Menu

Webpagina-inspiratie per JavaScript

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 loading...</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 = { &Tab;shopName: 'goats', &Tab;prefix: 'https://shop.spreadshirt.de', &Tab;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 loading...</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 booelan (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.

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

Heeft dit artikel je geholpen?