Website integreren met JavaScript – Spreadshop

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://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.de of https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.net/js/shopclient.nocache.js"></script>

Voor Noord-Amerikaanse shops:

<script type="text/javascript" src="https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://SHOPNAME.myspreadshop.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://SHOPNAME.myspreadshop.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: