Websideintegration med JavaScript – Spreadshop

I det følgende viser vi dig, hvordan du integrerer din Spreadshop på en allerede eksisterende webside. Det er nødvendigt at du har et grundlæggende kendskab til HTML, CSS og JavaScript samt adgang til websidens kildekode.

Hvor skal din shop kunne ses?

Beslut, hvor på websiden din Spreadshop skal vises. For at gøre dette skal du på det pågældende sted i HTML-filen placere en div-container. I denne container renderes din Spreadshop. Du kan frit vælge et id.

Alt hvad du skriver inden for div-elementet, vises kun, indtil shoppen er loadet. Derfor egner området imellem div-tagsene sig specielt godt til en melding som f.eks. „SpreadShop loader...“

<div id="shop">SpreadShop loader ...</div>

Konfigurer

For at loade shoppen konfigurerer du med spread_shop_config den tilsvarende variabel i JavaScript. Dertil skal spread_shop_config indstilles i ‚window scope‘.

Den helt enkle udgave ser sådan ud:

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

For at konfigurationen skal kunne loades, skal du definere de tilsvarende parametre:

shopName string
Din shops navn eller ID. Dette finder du i din shops administrationsområde.
prefix string/url
Din shops samlede domæne. Din shops komplette domæne (alt før skråstregen, f.eks. https://SHOPNAME.myspreadshop.de eller https://SHOPNAME.myspreadshop.co.uk)
baseId string
Det af dig i forvejen fastlagte id fra div-elements (se herover)

Sidste brik til puslespillet: Scriptet

Til slut skal du tilføje endnu et link til scriptet, som udfører selve jobbet, og loader din shop. Den bedste placering er et sted under din konfiguration. Tilføj følgende linjer, afhængigt af hvilken platform der hoster din shop:

Til europæiske shops:

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

Til nordamerikanske shops:

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

Sådan falder det hele i hak

Et fuldstændigt eksempel ser sådan ud:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Integrated Shop Test</title>
    </head>
    <body>
        <div id="shop">Spreadshop loader...</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

Din shop skal passe godt til din webside, og derfor definerer vi ikke egne skrifttyper i integrerede shops. Det betyder, at du selv skal definere dine skrifttyper: enten i body-tagget, i et af de div, som omslutter shoppen, eller i selve SpreadShop-containeren.

Tilretning for fortsættere

Der er et par parametre mere, som du kan indstille.

locale string
Hvis du har en international shop, kan du ændre sprog og valuta for din integrerede shop med dette parameter.
Disse værdier står til rådighed:

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 der ikke defineres yderligere, så ændrer den integrerede shop SEO-relevante metadata i din sides head (title, description og seoIndex samt OpenGraph og Twitter Card tags). Hvis du vil slå denne funktion fra, skal du sætte parameteret på false.
usePushState booelan (default: false)
Som standard dannes der Hashbang-URLs i integrerede shops (.../shop/#!/männer+t-shirts?q=P24). Det kan du undgå, hvis du sætter parameteret på true. Der kræves dog også ændringer i .htaccess-filen på din webserver, og derfor bør kun eksperter give sig i kast med denne feature.
pushStateBaseUrl
Er kun relevant, hvis du allerede bruger ‚usePushState‘ (= true), undgår at ‚redirecte‘ til din Spreadshop, eller hvis du vil integrere din shop forskellige steder. Definér punktet på den integrerede webside, hvor din shop skal fastgøres.
startToken string
Med denne sti fastlægger du, hvilken side i din shop der skal vises som startside.
usePushState booelan (default: false)
Hvis den integrerende side allerede har en burgermenu, kan du med fordel deaktivere din Spreadshops burgermenu. Du skal ændre dette parameter og i stedet bruge en swipemenu. Sæt parameteret på true, hvis du vil foretage denne handling.

Eksempel på avancerede justeringer

Et eksempel, som anvender alle tilgængelige parametre, kan se sådan ud:

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,
};

Hyppige fejl og deres årsager

DOCTYPE mangler

Din HTML-fil skal starte med tagget <!DOCTYPE html>, fordi Spreadshoppen er lavet til HTML5. Uden dette tag kan der opstå layout- og stylingproblemer. I den integrerede shop vil et iøjnefaldende banner gøre dig opmærksom på, at dette tag mangler.

Buttons og links fungerer ikke

Hvis du ikke kan klikke på noget i shoppen, kan det skyldes MooTools kompatibilitetsmodus. Spreadshop bruger nemlig React.js, som er inkompatibel med Moo Tools i compat-modus.

Shop integreret flere gange

Vi fraråder på det kraftigste at integrere shoppen flere gange på den samme side.

Usædvanlige specialtegn (f.eks. „Â“)

Bemærk venligst UTF-8-indkodning. De fleste CMS har denne indstilling. Hvis du har adgang til dine egne HTML-filer, skal du kode dem med UTF-8, og sørge for, at tagget <meta charset=“UTF-8“> er tilgængeligt i din header.

“DOCTYPE missing” melding under integrering på Weebly-Site

Denne fejlmelding kan normalt kun ses i Weebly-editor og kan ignoreres. Integration af din Spreadshop fungerer, når du offentliggør ændringerne.

Integration med GoDaddy Website Builder fungerer ikke

Pt er det desværre ikke muligt at lave en funktionsdygtig integration med GoDaddy.

Tutorial

Se mere om temaet integration i vores videotutorial (på engelsk):