Meny

Nettsideintegrasjon med JavaScript

Her viser vi deg hvordan du kan integrere en Spreadshop i din egen nettside. Du trenger litt grunnleggende kjennskap til HTML, CSS og JavaScript, og tilgang til kildekoden for nettstedet.

Hvor skal butikken vises?

Fastlegg hvor på nettsiden Spreadshopen skal vises. For å gjøre dette, plasserer du en div-container på det tilsvarende stedet i HTML-filen. Spreadshopen din vil da vises i dette container-elementet. Du kan fritt velge id for elementet.

Alt du skriver inne i dette div-elementet, vises helt til butikken er lastet inn. 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 skal lastes inn, må du konfigurere den tilsvarende variabelen i JavaScript med spread_shop_config. Her må spread_shop_config settes i ‚window scope‘.

Den minimale varianten ser slik ut:

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

For at konfigurasjonen skal kunne lastes inn, må du dessuten definere de tilhørende parametrene:

  • shopName string
    Navn eller ID for butikken. Dette finner du i admin-området for Spreadshopen.
  • prefix string/url
    Det komplette domenet til butikken. Dette er alt før skråstreken, f.eks. https://shop.spreadshirt.no 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 slutt må du legge til en lenke i scriptet som utfører selve oppgaven og laster inn butikken. Helst bør du plassere det under konfigurasjonen. Avhengig av hvilken plattform butikken hostes på, legger du inn følgende linjer:

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 sammen

Et fullstendig eksempel ser slik ut:

<!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>

Skrifttyper

For at Spreadshopen skal passe til nettstedet ditt, definerer vi ingen egne skrifttyper i butikker som integreres. Det betyr at du selv må definere skrifttypene, enten i body-taggen, i div-containeren som ligger rundt butikken eller i selve SpreadShop-containeren.

Tilpasninger 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 ogseoIndex samt OpenGraph og Twitter Card tags). Hvis du vil slå av denne funksjonen, setter du parameteren på false.
  • usePushState boolean (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 krever dessuten endringer i .htaccess-filen på serveren. Derfor bør dette bare gjøres av eksperter.
  • pushStateBaseUrl
    Bare relevant hvis du allerede bruker ‚usePushState‘ (= true), vil undertrykke en ‚redirect‘ til Spreadshopen eller integrere butikken på forskjellige steder. For dette må du definere startpunktet der butikken skal legges inn på nettsiden.
  • startToken string
    Med denne banen bestemmer du hvilken side i butikken din som skal vises som startside.
  • swipeMenu boolean (default: false)
    Hvis siden det skal integreres i allerede har en hamburgermeny, er det best å deaktivere hamburgermenyen i Spreadshopen. Endre denne parameteren og bruk en swipe-meny i stedet. For å gjøre dette, setter du parameteren på true.

Eksempel på tilpasninger for viderekomne

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 utviklet 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

Hvis det ikke er mulig å klikke på noe i butikken din, kan det skyldes kompatibilitetsmodus i MooTools. Spreadshop benytter seg nemlig av React.js, som er inkompatibel med MooTools i compat-modus.

Butikken er integrert flere ganger

Vi fraråder deg sterkt å integrere butikken flere ganger på den samme siden.

Uvanlige 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, bør du kode dem med UTF-8 og sikre at taggen <meta charset=“UTF-8“> er på plass i head-delen.

Meldingen «DOCTYPE missing» ved integrering i et Weebly-nettsted

Denne feilmeldingen vises vanligvis bare i Weebly Editor, og kan ignoreres. Integreringen av Spreadshopen fungerer likevel når du publiserer endringene.

Integrering med GoDaddy Website Builder fungerer ikke

Med GoDaddy er det for øyeblikket dessverre umulig å få til en fungerende integrasjon.

Tutorial

Se vår videoinnføring om temaet integrering:

Var denne artikkelen nyttig?