Meny

Integrasjon på nettstedet ditt ved hjelp av JavaScript

Du kan integrere din Spreadshop i en nettside du har.

Det trengs bare noen få grep. For å få til dette, må du ha tilgang til kildekoden for siden og litt kjennskap til HTML, CSS og JavaScript.

Hvor skal butikken vises?

For å bestemme hvor butikken skal ligge på siden, plasserer du et div-element med en id (som du velger selv) på det riktige stedet i HTML-filen. Alt du skriver inne i dette div-elementet, vises bare frem til butikken er lastet inn. Da fjernes det helt. Derfor er plassen mellom div-taggene egnet for en melding som «Spreadshop lastes inn»

<div id="shop">Spreadshop lastes inn...</div>

Konfigurering

For at butikken virkelig skal lastes ned, legger du inn konfigurasjonsobjektet spread_shop_config i JavaScript, som må være tilgjengelig i window scope.

Minimumsversjonen ser slik ut:

var spread_shop_config = {
	shopName: 'goats',
	prefix: 'https://shop.spreadshirt.de',
	baseId: 'shop',
};

Påkrevde parametere:

  • shopName string
    Navn eller ID for butikken. Du finner dette i oversikten over salgskanaler
  • prefix string/url
    Det komplette domenet til butikken (alt før skråstreken, f.eks. https://shop.spreadshirt.de eller https://shop.spreadshirt.co.uk)
  • baseId string
    Den id-en du har fastlagt for div-elementet (se ovenfor)

Siste brikke i puslespillet: Scriptet

Til syvende og sist må du legge inn en lenke til scriptet som gjør selve jobben og laster inn butikken. Helst bør du plassere det et sted under konfigurasjonen.

For butikker i Europa:

<script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

For butikker i Nord-Amerika:

<script type="text/javascript" src="https://shop.spreadshirt.com/js/shopclient.nocache.js"></script>

Slik fungerer det samlet

Et fullstendig eksempel vil se slik ut (minst):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Integrated Shop Test</title>
    </head>
    <body>
        <div id="shop">Spreadshop lastes inn...</div>
        <script>
            var spread_shop_config = {
              prefix: 'https://shop.spreadshirt.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>
    </body>
</html>
</code>

Skrifttyper

For at butikken skal passe godt inn på nettstedet ditt, definerer vi ikke egne skrifttyper i butikker som integreres. Det betyr at du selv må definere skrifttypene, enten i body-taggen, et div-element som ligger rundt butikken, eller i selve Spreadshop-containeren.

Tilpasning av butikken for viderekomne

Det er enda flere parametere du kan stille inn.

  • locale string
    Hvis du har en internasjonal butikk, kan du endre språk og valuta i den integrerte butikken med denne parameteren.
    Disse verdiene står til disposisjon:
    platform locale language currency
    EU da_DK Danish Danish Krone (kr)
    EU en_EU English Euro (€)
    EU en_GB English Pound Sterling (£)
    EU en_IE English Euro (€)
    EU de_DE German Euro (€)
    EU de_AT German Euro (€)
    EU de_CH German Swiss Franc (CHF)
    EU es_ES Spanish Euro (€)
    EU fi_FI Finnish Euro (€)
    EU fr_BE French Euro (€)
    EU fr_CH French Swiss Franc (CHF)
    EU fr_FR French Euro (€)
    EU it_CH Italian Swiss Franc (CHF)
    EU it_IT Italian Euro (€)
    EU nl_BE Dutch Euro (€)
    EU nl_NL Dutch Euro (€)
    EU no_NO Norwegian Norwegian Krone (kr)
    EU pl_PL Polish Euro (€)
    EU sv_SE Swedish Swedish Krone (kr)
    NA en_US English Dollar ($)
    NA en_CA English Dollar ($)
    NA en_AU English Australian Dollar (AUD$)
    NA fr_CA French Canadian Dollar (CAD$)
  • updateMetadata boolean (default: true)
    Hvis det ikke er nærmere definert, vil den integrerte butikken forandre SEO-relevante metadata i head på siden din (title, description og seoIndex samt OpenGraph og Twitter Card tags). Hvis du vil slå av denne funksjonen, setter du parameteren på false.
  • usePushState booelan (default: false)
    Som standard opprettes det Hashbang-URLs ved navigering i den integrerte butikken (.../shop/#!/männer+t-shirts?q=P24). Du kan omgå dette ved å sette sette parameteren på true. Dette er en ekspertfunksjon, ettersom det også krever endringer i .htaccess-filen på nettserveren din.
  • startToken string
    Banen til en side i butikken din som skal vises som startside.

Eksempel

Et eksempel som bruker alle tilgjengelige parametere, kan se slik ut:

var spread_shop_config = {
    shopName: 'goats',
    prefix: 'https://shop.spreadshirt.de',
    baseId: 'shop',
    locale: 'de_DE',
    startToken: 'men+t-shirts?q=P24',
    usePushState: false,
    updateMetadata: true,
};

Vanlige feil og årsakene til dem

DOCTYPE mangler

HTML-filen din må begynne med taggen <!DOCTYPE html>, ettersom Spreadshop er opprettet for HTML5. Uten denne taggen vil det oppstå problemer med layout og styling. I den integrerte butikken vises et tydelig banner for å gjøre deg oppmerksom på at denne taggen mangler.

Knapper og lenker fungerer ikke

Spreadshop benytter seg av React.js, som forårsaker feil sammen med MooTools i kompatibilitetsmodus. Hvis ingenting i butikken din kan klikkes på, kan årsaken være at du bruker MooTools i kompatibilitetsmodus.

Butikken er integrert flere ganger

Vi fraråder deg å integrere butikken flere ganger på den samme siden. Det vil føre til uønskede reaksjoner.

Uvanlig spesialtegn (f.eks. «Â»)

Pass på at UTF-8-koding anvendes. De feste CMS-systemer har en innstilling for dette. Hvis du har tilgang til dine egne HTML-filer, må du kode dem med UTF-8 og sikre at taggen <meta charset=“UTF-8“> er på plass i head-delen.

Tutorial

Se vår videoinnføring om temaet integrering (på engelsk):

Var denne artikkelen nyttig?