Nettsideintegrasjon med JavaScript – Spreadshop

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://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.no eller https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>

For butikker i Nord-Amerika:

<script type="text/javascript" src="https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.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: