Meny

Integrering på webbplatser med JavaScript

Du kan bädda in din Spreadshop på din befintliga webbplats.

Då krävs några steg som du behöver lite kunskap om HTML, CSS och JavaScript samt tillgång till din webbplats källkod för.

Var ska din butik visas?

För att bestämma platsen för butiken på din webbplats placerar du ett div-element med ett id (som du kan välja fritt) på motsvarande ställe i din HTML-fil. Allt som du skriver inom detta div-element visas bara tills butiken har lästs in. Sedan tas det bort helt. 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 verkligen ska läsas in lägger du till ett konfigurationsobjekt spread_shop_config i JavaScript, som måste vara tillgängligt i fönstret Scope.

Minimum ser ut så här:

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

De nödvändiga parametrarna:

  • shopName string
    Din butiks namn eller ID. Dessa ser du i översikten över försäljningskanaler.
  • prefix string/url
    Din butiks kompletta domän (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 bara infoga en länk till skriptet, som gör grovarbetet och läser in butiken. Placera det helst någonstans under din konfiguration.

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, minimalt exempel skulle se 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>
</code>

Teckensnitt

För att din butik även ska passa bra till din webbplats definierar vi inga egna teckensnitt i inbäddade butiker. 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.

Anpassa butik för avancerade användare

Det finns ytterligare några 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.
    Dessa 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 booelan (standard: false)
    Vid navigering i inbäddade butiker uppstår som standard hashbang-URL:er (.../shop/#!/männer+t-shirts?q=P24). Dessa kan du kringgå om du sätter denna parameter på true. Detta räknas som en expertfunktion, eftersom ändringar av htaccess-filen på din webbserver dessutom krävs.
  • startToken string
    Sökväg till en sida i din butik som ska visas som startsida.

Exempel

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',
    locale: 'de_DE',
    startToken: 'men+t-shirts?q=P24',
    usePushState: false,
    updateMetadata: true,
};

Vanliga fel och orsakerna

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

Spreadshop använder React.js, som orsakar fel tillsammans med MooTools i kompatibilitetsläget. Om inget i din butik är klickbart kan det bero på att du använder MooTools i kompatibilitetsläget.

Butik inbäddad flera gånger

Vi avråder starkt från att bädda in butiken flera gånger på samma sida. Detta kan orsaka oönskat beteende.

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.

Vägledning

Se även vår videovägledning i temat inbäddning (på engelska):

Var denna artikel till hjälp?