Webpagina-inspiratie per JavaScript – Spreadshirt

Je kunt je Spreadshop in je eigen website integreren.

Hiervoor zijn een paar handelingen nodig waarvoor je wat moet weten over HTML, CSS en JavaScript en de toegang tot de broncode van je pagina.

Waar moet je shop staan?

Om de plaats voor je shop op je eigen pagina te bepalen, plaats je een div element met een (door jou te kiezen) id op de betreffende plaats in je HTML-bestand. Alles wat je in dit div element schrijft, wordt slechts zo lang weergegeven tot de shop is geladen. Daarna wordt het helemaal verwijderd. Daarom is de plaats tussen de div tags goed geschikt voor een tekst als ‘Spreadshop wordt geladen...’

<div id="shop">Spreadshop wordt geladen...</div>

Configureren

Voeg een configuratieobject spread_shop_config in JavaScript toe dat in window Scope beschikbaar moet zijn zodat je shop ook daadwerkelijk wordt geladen.

Dit ziet er minimaal zo uit:

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

De benodigde parameters:

shopName string
De naam of de id van je shop. Deze kun je in je overzicht boven de verkoopkanalen zien
prefix string/url
Het complete domain van je shop (alles voor de slash, bv. https://shop.spreadshirt.de of https://shop.spreadshirt.co.uk)
baseId string
De door jou van te voren vastgelegde id van het div element (zie hierboven)

Laatste puzzelstukje: het script

Tenslotte moet je alleen nog een link naar het script invoegen die ervoor zorgt dat de shop wordt geladen. In het ideale geval plaats je deze ergens onder je configuratie.

Voor Europese shops.

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

Voor Noord-Amerikaanse shops:

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

Zo werkt alles samen

Een volledig, minimaal voorbeeld zou er dan zo uitzien:

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

Lettertypes

We definiëren geen eigen lettertypes in een geïntegreerde shop zodat je shop ook goed bij je website past. Dat betekent dat je je lettertypes zelf moet definiëren. Dit kun je doen in body tag, een div die je shop omsluit of in de Spreadshop-container zelf.

Shop aanpassen voor gevorderden

Er zijn nog enkele parameters die je kunt instellen.

locale string
Als je een internationale shop hebt, kun je de taal en de valuta van je geïntegreerde shop met deze parameters wijzigen.
Deze waarden staan ter beschikking:

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)
Als er niets meer is gedefinieerd, verandert de geïntegreerde shop SEO-relevante metagegevens in de head van je pagina (title, description en seoIndex, OpenGraph en Twitter Card tags). Als je deze functie wilt uitschakelen, zet dan de parameter op false.
usePushState boolean (default: false)
Standaard zullen bij het navigeren in geïntegreerde shops hashbang-URL’s ontstaan (.../shop/#!/männer+t-shirts?q=P24). Deze kun je vermijden als je deze parameter op true zet. Dit wordt geclassificeerd als expert-feature omdat ook wijzigingen aan het .htaccess-bestand op je webserver nodig zijn.
startToken string
Pad naar een pagina in je shop die als startpagina moet worden weergegeven.
swipeMenu boolean (default: false)
Indien je voor het navigeren in je geïntegreerde shop al een zogenaamd burgermenu gebruikt, kun je het burgermenu van de Spreadshop met deze parameter uitschakelen en een swipemenu gebruiken. Zet hiervoor de parameter op true.

Voorbeeld

Een voorbeeld dat alle beschikbare parameters gebruikt, zou er zo uit kunnen zien:

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

Vaak voorkomende fouten en de oorzaken

DOCTYPE ontbreekt

Je HTML-bestand moet beginnen met de tag <!DOCTYPE html> omdat de Spreadshop is gemaakt voor HTML5. Zonder deze tag ontstaan er layout- en stylingproblemen. In de geïntegreerde shop zal een heel duidelijke banner je wijzen op het ontbreken van deze tag.

Buttons en links functioneren niet

De Spreadshop gebruikt React.js, dat in combinatie met MooTools in de compatibiliteitsmodus fouten veroorzaakt. Als je niets in je shop aan kunt klikken, kan het daaraan liggen dat je MooTools in de compatibiliteitsmodus gebruikt.

Shop meerdere malen geïntegreerd

Integreer je shop niet meerdere malen op dezelfde pagina. Dit zal ongewenst gedrag veroorzaken.

Ongebruikelijke tekens (bv. ‘Â’)

Let op de UTF-8-codering De meeste CMS hebben hiervoor een instelling. Wanneer je toegang tot je eigen HTML-bestanden heb, codeer deze dan met UTF-8 en zorg ervoor dat de tag <meta charset=“UTF-8“> in je head staat.

Tutorial

Bekijk onze video-tutorial over het thema integreren (in het Engels):