Integrering på webbplatser med JavaScript – Spreadshop

Nedan visar vi hur du bäddar in din Spreadshop på en befintlig webbplats. För att göra det krävs lite grundläggande kunskaper om HTML, CSS och JavaScript samt tillgång till webbplatsens källkod.

Var ska din butik visas?

Bestäm var på webbplatsen din Spreadshop ska visas. Placera en div-behållare på motsvarande ställe i HTML-filen. Din Spreadshop renderas i denna behållare. Du kan välja id fritt.

Allt som du skriver inom div-elementet visas tills butiken har lästs in. Därför lämpar sig platsen mellan div-taggarna bra för ett meddelande som ”Spreadshop läses in ...”

<div id="shop">Spreadshop läses in ...</div>

Konfigurera

För att din butik ska läsas in konfigurerar du motsvarande variabel i JavaScript med spread_shop_config. Då måste spread_shop_config sättas i ”window scope”.

I sin minimala variant ser det ut så här:

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

För att konfigurationen ska kunna läsas in måste du definiera motsvarande parametrar:

shopName string
Din butiks namn eller ID. Dessa hittar du i din Spreadshops adminområde.
prefix string/url
Din butiks kompletta domän. Det är allt före snedstrecket, t.ex. https://SHOPNAME.myspreadshop.de eller https://SHOPNAME.myspreadshop.co.uk)
baseId string
Det id till div-elementet som du bestämt tidigare (se ovan)

Den sista pusselbiten: Skriptet

Slutligen behöver du infoga en länk till skriptet, som gör det egentliga arbetet och läser in din butik. Placera det helst under din konfiguration. Beroende på vilken plattform din butik finns på, infogar du följande rader:

För europeiska butiker:

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

För nordamerikanska butiker:

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

Så här arbetar allt tillsammans

Ett fullständigt exempel ser ut så här:

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

Teckensnitt

För att din Spreadshop ska passa bra till din webbplats definierar vi inga egna teckensnitt i den inbäddade butiken. Det betyder att du måste definiera dina teckensnitt själv, antingen i body-taggen, div som omfattar butiken eller själva Spreadshop-behållaren.

Anpassningar för avancerade användare

Det finns ytterligare parametrar som du kan ställa in.

locale string
Om du har en internationell butik, kan du ändra språket och valutan för din inbäddade butik med denna parameter.
Följande värden är tillgängliga:

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 Krona (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 (standard: true)
Om inget ytterligare definieras förändrar den integrerade butiken SEO-relevanta metadata i din sidas head (title, description och seoIndex samt OpenGraph och Twitter Card tags). Om du vill stänga av dessa funktioner sätter du parametern på false.
usePushState boolean (standard: false)
Vid navigering i inbäddade butiker uppstår som standard hashbang-URL:er (.../shop/#!/männer+t-shirts?q=P24). Dessa kringgår du om du sätter denna parameter på true. Då krävs dock även ändringar av .htaccess-filen på din webbserver och därför bör endast experter våga sig på denna funktion.
pushStateBaseUrl
Är bara relevant om du redan använder ”usePushState” (= true), undertrycker en ”redirect” till din Spreadshop eller vill bädda in din butik på olika ställen. Definiera då startpunkten för den inbäddade webbplatsen, från vilken din butik ska anslutas.
startToken string
Med denna sökväg bestämmer du vilken sida i din butik som ska visas som startsida.
swipeMenu boolean (standard: false)
Om den inbäddade sidan redan har en hamburgermeny, avaktiverar du helst hamburgermenyn för din Spreadshop. Ändra denna parameter och använd i stället en svepmeny. Sätt då parametern på true.

Exempel på avancerade anpassningar

Ett exempel som använder alla tillgängliga parametrar kan se ut så här:

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

Vanliga fel och orsaker

DOCTYPE saknas

Din HTML-fil måste börja med taggen <!DOCTYPE html>, eftersom Spreadshop skapades för HTML5. Utan denna tagg blir det problem med layout och utformning. I den inbäddade butiken kommer en mycket framträdande banner att göra dig uppmärksam på att denna tagg saknas.

Knappar och länkar fungerar inte

Om inget i din butik är klickbart kan det bero på MooTools kompatibilitetsläge. Spreadshop använder nämligen React.js, som inte är kompatibel med MooTools i compat-läge.

Butik inbäddad flera gånger

Vi avråder starkt från att bädda in butiken flera gånger på samma sida.

Ovanliga specialtecken (t.ex. ”Â”)

Observera UTF-8-kodningen. De flesta CMS har en inställning för det. Om du har tillgång till dina egna HTML-filer, kodar du dem med UTF-8 och ser till att taggen <meta charset=“UTF-8“> finns i ditt head.

Meddelandet ”DOCTYPE missing” vid inbäddning på Weebly-webbplats

Detta felmeddelande syns i regel bara i Weebly editor och kan ignoreras. Inbäddningen av din Spreadshop fungerar ändå när du publicerar ändringarna.

Integrering med GoDaddy Website Builder fungerar inte

Med GoDaddy fungerar för närvarande tyvärr ingen integrering.

Vägledning

Se även vår videovägledning i temat inbäddning: