Meny

Integrering på webbplatser med JavaScript

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://shop.spreadshirt.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://shop.spreadshirt.de eller https://shop.spreadshirt.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://shop.spreadshirt.net/js/shopclient.nocache.js"></script>

För nordamerikanska butiker:

<script type="text/javascript" src="https://shop.spreadshirt.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://shop.spreadshirt.de',
              shopName: 'goats',
              baseId: 'shop',
            };
        </script>
        <script type="text/javascript" src="https://shop.spreadshirt.net/js/shopclient.nocache.js"></script>
    </body>
</html>

Teckensnitt

Din Spreadshop använder automatiskt samma teckensnitt som den webbplats där du bäddar in den. Du kan dock även behålla din butiks teckensnitt. Under loadFonts i nästa avsnitt förklarar vi hur du gör det.

Anpassningar för avancerade användare

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

  • loadFonts boolean (standard: false)
    Sätt denna parameter på true om du vill visa din inbäddade butik i ett teckensnitt som du själv har konfigurerat i partnerområdet. Teckensnittet används sedan i din Spreadshop, men inte på din webbplats.
  • 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://shop.spreadshirt.de',
    baseId: 'shop',
    loadFonts: true,
    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:

Var denna artikel till hjälp?