Menü

Webseiten-Integration per JavaScript

Du kannst Deinen Spreadshop in Deine bestehende Website einbetten.

Dafür sind ein paar Handgriffe nötig, für die Du etwas Kenntnis von HTML, CSS und JavaScript sowie Zugang zum Quellcode Deiner Seite benötigst.

Wo soll Dein Shop erscheinen?

Um den Ort für den Shop auf Deiner Seite festzulegen, platziere ein div Element mit einer (von Dir frei wählbaren) id an der entsprechenden Stelle in Deiner HTML-Datei. Alles, was Du innerhalb dieses div Elements schreibst, wird nur so lange angezeigt, bis der Shop geladen wurde. Dann wird es komplett entfernt. Deshalb eignet sich der Ort zwischen den div-Tags gut für eine Meldung wie „Spreadshop lädt...“

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

Konfigurieren

Damit auch wirklich Dein Shop geladen wird, fügst Du ein Konfigurationsobjekt spread_shop_config in JavaScript hinzu, das im window Scope verfügbar sein muss.

Das Minimum sieht dabei so aus:

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

Die benötigten Parameter:

  • shopName string
    Der Name oder die ID Deines Shops. Diese kannst Du in Deiner Übersicht über die Verkaufskanäle einsehen
  • prefix string/url
    Die komplette Domain Deines Shops (alles vor dem Schrägstrich, z.B. https://shop.spreadshirt.de oder https://shop.spreadshirt.co.uk)
  • baseId string
    Die von Dir vorher festgelegte id des div-Elements (siehe oben)

Letztes Puzzleteil: Das Script

Zu guter Letzt musst Du nur noch einen Link zu dem Script einfügen, das die Schwerarbeit leistet und den Shop lädt. Idealerweise platzierst Du es irgendwo unterhalb Deiner Konfiguration.

Für europäische Shops:

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

Für nordamerikanische Shops:

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

So arbeitet alles zusammen

Ein vollständiges, minimales Beispiel würde dann so aussehen:

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

Schriftarten

Damit Dein Shop auch gut zu Deiner Website passt, definieren wir keine eigene Schriftarten in eingebetteten Shops. Das bedeutet, dass Du Deine Schriftarten selbst definieren musst, entweder im body Tag, einem den Shop umschließenden div oder dem Spreadshop-Container selbst.

Shop anpassen für Fortgeschrittene

Es gibt noch einige weitere Parameter, die Du einstellen kannst.

  • locale string
    Hast Du einen internationalen Shop, kannst Du die Sprache und Währung Deines eingebetteten Shops mit diesem Parameter ändern.
    Diese Werte stehen zur Verfügung:
    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)
    Wenn nicht weiter definiert, verändert der integrierte Shop SEO-relevante Metadaten im head Deiner Seite (title, description und seoIndex sowie OpenGraph und Twitter Card tags). Möchtest Du diese Funktionalität ausschalten, setze den Parameter auf false.
  • usePushState boolean (default: false)
    Standardmäßig werden beim Navigieren in eingebetteten Shops Hashbang-URLs entstehen (.../shop/#!/männer+t-shirts?q=P24). Dies kannst Du umgehen, wenn Du diesen Parameter auf true setzt. Dies wird als Experten-Feature eingestuft, weil zudem Änderungen an der .htaccess-Datei auf Deinem Webserver notwendig sind.
  • startToken string
    Pfad zu einer Seite in Deinem Shop, die als Startseite angezeigt werden soll.
  • swipeMenu boolean (default: false)
    Nutzt Du für die Navigation Deines eingebetteten Shops bereits ein Burger-Menü, kannst Du das Spreadshop-Burger-Menü mit diesem Parameter deaktivieren und ein Swipe-Menü nutzen. Setze dafür den Parameter auf true.

Beispiel

Ein Beispiel, das alle verfügbaren Parameter verwendet, könnte so aussehen:

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

Häufige Fehler und die Ursachen

DOCTYPE fehlt

Deine HTML-Datei muss mit dem Tag <!DOCTYPE html> beginnen, weil der Spreadshop für HTML5 erstellt wurde. Ohne dieses Tag kommt es zu Layout- und Styling-Problemen. Im eingebetteten Shop wird Dich ein sehr prominentes Banner auf das Fehlen dieses Tags aufmerksam machen.

Buttons und Links gehen nicht

Der Spreadshop benutzt React.js, das mit MooTools im compat-Modus inkompatibel ist. Wenn nichts in Deinem Shop klickbar ist, könnte es an dem Kompatibilitätsmodus von MooTools liegen.

Shop merhmals eingebettet

Wir raten stark davon ab, den Shop mehrmals in dieselbe Seite einzubetten. Dies wird ungewünschtes Verhalten hervorrufen.

Ungewöhnliche Sonderzeichen (z.B. „“)

Bitte achte auf UTF-8-Kodierung. Die meisten CMS haben eine Einstellung dafür. Hast Du Zugang zu Deinen eigenen HTML-Dateien, kodiere sie bitte mit UTF-8 und stelle sicher, dass das Tag <meta charset=“UTF-8“> in Deinem head vorhanden ist.

Tutorial

Sieh Dir zum Thema Einbetten auch unser Video-Tutorial an:

War dieser Artikel hilfreich?