Menu

Website integreren met JavaScript

Hierna laten we je zien hoe je je Spreadshop kunt integreren in een bestaande website. Hiervoor heb je wat basiskennis nodig van HTML, CSS en JavaScript en toegang tot de broncode van de website.

Waar moet je shop komen te staan?

Bepaal waar op de website je Spreadshop moet worden weergegeven. Hiervoor plaats je op de betreffende plaats in het HTML-bestand een div-container. Je Spreadshop wordt in deze container gerenderd. De id kun je willekeurig kiezen.

Alles wat je in dit div-element schrijft, wordt slechts zo lang weergegeven tot de shop is geladen. 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

Je configureert met spread_shop_config de betreffende variabel in JavaScript zodat je shop wordt geladen. Hierbij moet spread_shop_config in ‘window scope’ worden gezet.

Dit moet er minimaal zo uitzien:

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

Je moet nog de betreffende parameters definiëren zodat de configuratie kan worden geladen:

  • shopName string
    De naam of de ID van je shop. Deze vind je in het admin-gedeelte van je Spreadshop.
  • prefix string/url
    Het complete domein van je shop. Dat is 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

Ten slotte moet je nog een link aan het script toevoegen die het eigenlijke werk doet en je shop laadt. In het ideale geval plaats je deze onder je configuratie. Afhankelijk van het platform waarop je shop komt, voeg je nog de volgende regels in:

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 compleet voorbeeld ziet er zo uit:

<!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>

Lettertypes

We definiëren geen eigen lettertypes in een geïntegreerde shop zodat je Spreadshop ook goed bij je website past. Dat betekent voor jou 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.

Aanpassen voor gevorderden

Er zijn nog meer 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.
    De volgende 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 ontstaan bij het navigeren in een geïntegreerde shop hashbang-URL’s (.../shop/#!/männer+t-shirts?q=P24). Dit vermijd je als je deze parameter op true zet. Hiervoor moet echter ook het .htaccess-bestand op je webserver worden veranderd en daarom is deze feature alleen iets voor experts.
  • pushStateBaseUrl
    Is alleen relevant als je al ‘usePushState’ gebruikt (= true), een ‘redirect’ naar je Spreadshop wilt onderdrukken of je shop op verschillende plaatsen wilt integreren. Definieer hiervoor het punt van de geïntegreerde website vanaf waar je shop moet beginnen.
  • startToken string
    Met dit pad bepaal je welke pagina in je shop als startpagina moet worden weergegeven.
  • swipeMenu boolean (default: false)
    Als de geïntegreerde pagina al een burgermenu heeft, schakel je het burgermenu van je Spreadshop liever uit. Wijzig deze parameter en gebruik in plaats daarvan een swipemenu. Zet hiervoor de parameter op true.

Voorbeeld voor gevorderde aanpassingen

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 oorzaken

DOCTYPE ontbreekt

Je HTML-bestand moet beginnen met de tag <!DOCTYPE html> omdat 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 werken niet

Als je op niets kunt klikken in je shop, zou dit aan de compatibiliteitsmodus van MooTools kunnen liggen. Spreadshop gebruikt namelijk React.js dat niet compatibel is met MooTools in de compat-modus.

Shop meerdere malen geïntegreerd

Integreer je shop liever niet meerdere malen op dezelfde pagina.

Ongebruikelijke tekens (bv. ‘Â’)

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

“DOCTYPE missing” melding na het integreren in Weebly-site

Deze foutmelding krijg je meestal alleen in een Weebly-editor en kan worden genegeerd. Je Spreadshop zal blijven functioneren als je de wijzigingen bevestigt.

Integreren met GoDaddy Website Builder werkt niet

Met GoDaddy lukt het integreren op dit moment helaas niet.

Tutorial

Bekijk onze video-tutorial over het thema integreren:

Heeft dit artikel je geholpen?