Menu

Integration på din webside med JavaScript

Du kan integrere din Spreadshop på dit eksisterende website.

For at gøre det er et par handlinger nødvendige, som kræver, at du har lidt kendskab til HTML, CSS og JavaScript samt adgang til din sides Quellcode.

Hvor skal din shop kunne ses?

Når du skal fastlægge, hvor på siden din shop skal være, skal du placere et div element med et id (som du selv vælger) på området i din HTML-fil. Alt, hvad du skriver inden for dette div element, vises kun, indtil shoppen er loadet. Derefter fjernes det helt. Derfor egner området imellem div-tagsene sig godt til en melding som f.eks. „Spreadshop loader...“

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

Konfigurer

For at din shop faktisk kan loades, tilføjer du i JavaScript konfigurationsobjektet spread_shop_config, som skal være tilgængeligt i window Scope.

Som minimum skal det se sådan ud:

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

De nødvendige parametre:

  • shopName string
    Din shops navn eller ID. Det kan du se i din oversigt over salgskanaler
  • prefix string/url
    Din shops komplette domæne (alt før skråstregen, f.eks. https://shop.spreadshirt.de eller https://shop.spreadshirt.co.uk)
  • baseId string
    Det af dig i forvejen fastlagte id fra div-elements (se herover)

Sidste brik til puslespillet: Scriptet

Til allersidst skal du nu integrere et link til scriptet, som gør det hårde arbejde og henter shoppen. Den bedste placering er et sted under din konfiguration.

Til europæiske shops:

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

Til nordamerikanske shops:

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

Sådan falder det hele i hak

Et fuldstændigt, minimalt eksempel ville dermed se 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://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

Din shop skal passe godt til netop din webside, så derfor definerer vi ikke skrifttyper i integrerede shops. Det betyder, at du selv skal definere dine skrifttyper, enten i body Tagget, i et af de div-elementer, som omslutter shoppen, eller i selve Spreadshop-containeren.

Shoptilretning 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 header (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 boolean (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. Dette kategoriseres som ekspert-feature, fordi ændringer af .htaccess-filen på din webserver også er påkrævede.
  • startToken string
    Sti til en side i din shop, som skal vises som startside.
  • swipeMenu boolean (default: false)
    Hvis du aktuelt benytter en burgermenu, når du navigerer i din indlejrede shop, kan du deaktivere Spreadshop-burgermenuen med dette parameter og anvende en swipemenu. Sæt parameteret på true, hvis du vil foretage denne handling.

Eksempel

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

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

Hyppige fejl og deres årsager

DOCTYPE mangler

Din HTML-fil skal starte med <!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 er no go

Spreadshop benytter React.js, som sammen med MooTools kan forårsage fejl i kompatibilitetsmodus. Hvis der ikke kan klikkes på noget i din shop, kan det evt. skyldes, at du benytter MooTools i kompatibilitetsmodus.

Shop integreret flere gange

Vi fraråder på det kraftigste at integrere shoppen flere gange på den samme side. Dette kan udvirke uønsket aktivitet.

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.

Tutorial

Se mere om at integrere i vores videoturtorial (på engelsk) :

Hjalp denne artikel dig?