LoginRegistrieren
Shop einrichten

Website-Integration mit JavaScript

Im Folgenden zeigen wir Dir, wie Du Deinen Spreadshop in eine bestehende Website einbettest. Dafür benötigst Du ein paar grundlegende Kenntnisse in HTML, CSS und JavaScript sowie Zugriff auf den Quellcode der Website.

Wo soll Dein Shop erscheinen?

Lege fest, wo auf der Website Dein Spreadshop angezeigt werden soll. Dafür platzierst Du an der entsprechenden Stelle in der HTML-Datei einen div-Container. Dein Spreadshop wird in diesem Container gerendert. Die id kannst du frei wählen.

Alles, was Du innerhalb des div-Elements schreibst, wird so lange angezeigt, bis der Shop geladen ist. Deshalb eignet sich der Ort zwischen den div-Tags besonders gut für eine Meldung wie „Spreadshop wird geladen...“

<div id="shop">Spreadshop wird geladen ...</div>

Konfigurieren

Damit Dein Shop geladen wird, konfigurierst Du mit spread_shop_config die entsprechende Variable in JavaScript. Dabei muss spread_shop_config im ‚window scope‘ gesetzt werden.

In seiner minimalen Variante sieht das so aus:

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

Damit die Konfiguration geladen werden kann, musst Du noch die entsprechenden Parameter definieren:

  • shopName string
    Der Name oder die ID Deines Shops. Diese findest Du im Admin-Bereich Deines Spreadshops.

  • prefix string/url
    Die komplette Domain Deines Shops. Das ist alles vor dem Schrägstrich, z.B. https://SHOPNAME.myspreadshop.de oder https://SHOPNAME.myspreadshop.co.uk)

  • baseId string
    Die von Dir vorher festgelegte id des div-Elements (siehe oben)

Letztes Puzzleteil: Das Script

Zum Schluss musst Du noch einen Link zu dem Script hinzufügen, das die eigentliche Arbeit erledigt und Deinen Shop lädt. Idealerweise platzierst Du es unterhalb Deiner Konfiguration. Je nachdem, auf welcher Plattform Dein Shop gehostet wird, fügst Du die folgenden Zeilen ein:

Für europäische Shops:

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

Für nordamerikanische Shops:

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

So arbeitet alles zusammen

Ein vollständiges Beispiel sieht so aus:

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

Schriftarten

Damit Dein Spreadshop gut zu Deiner Website passt, definieren wir keine eigenen Schriftarten im eingebetteten Shop. Das bedeutet für Dich, dass Du Deine Schriftarten selbst definieren musst: entweder im body-Tag, einem den Shop umschließenden div oder im Spreadshop-Container selbst.

Anpassungen für Fortgeschrittene

Es gibt noch 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.
    Folgende 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 Norwegia 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)\

    Falls 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 entstehen beim Navigieren in eingebetteten Shop Hashbang-URLs (.../shop/#!/männer+t-shirts?q=P24). Dies umgehst Du, wenn Du diesen Parameter auf true setzt. Dazu sind jedoch auch Änderungen an der .htaccess-Datei auf Deinem Webserver notwendig und deswegen sollten sich nur Experten an dieses Feature wagen.

  • pushStateBaseUrl\

    Ist nur relevant, wenn Du bereits ‚usePushState‘ nutzt (= true), einen ‚redirect‘ zu Deinem Spreadshop unterdrücken oder aber Deinen Shop an unterschiedlichen Stellen einbetten möchtest. Definiere dafür den Einstiegspunkt der einbettenden Website, ab der Dein Shop eingehängt werden soll.

  • startToken string\

    Mit diesem Pfad legst Du fest, welche Seite in Deinem Shop als Startseite angezeigt werden soll.

  • swipeMenu boolean (default: false)\

    Hat die einbettende Seite bereits ein Burger-Menü, deaktivierst Du am besten das Burger-Menü Deines Spreadshops. Ändere diesen Parameter und nutze stattdessen ein Swipe-Menü. Setze dafür den Parameter auf true.

Beispiel für fortgeschrittene Anpassungen

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

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

Häufige Fehler und Ursachen

DOCTYPE fehlt

Deine HTML-Datei muss mit dem Tag <!DOCTYPE html> beginnen, weil 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.

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

Shop merhmals eingebettet

Wir raten dringend davon ab, den Shop mehrmals in dieselbe Seite einzubetten.

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.

“DOCTYPE missing” Meldung beim Einbetten in Weebly-Site

Diese Fehlermeldung ist in der Regel nur im Weebly-Editor sichtbar und kann ignoriert werden. Das Einbetten Deines Spreadshops funktioniert trotzdem, wenn Du die Änderungen veröffentlichst.

Integration mit GoDaddy Website Builder funktioniert nicht

Mit GoDaddy lässt sich zurzeit leider keine funktionierende Integration realisieren.

Twitter
Facebook