Menu

Websideintegration med JavaScript

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://shop.spreadshirt.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://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 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://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 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://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

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://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 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):

Hjalp denne artikel dig?