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
oderhttps://SHOPNAME.myspreadshop.co.uk
) - baseId
string
Die von Dir vorher festgelegteid
desdiv
-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 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
)
Falls nicht weiter definiert, verändert der integrierte Shop SEO-relevante Metadaten imhead
Deiner Seite (title
,description
undseoIndex
sowie OpenGraph und Twitter Card tags). Möchtest Du diese Funktionalität ausschalten, setze den Parameter auffalse
. - 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 auftrue
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 auftrue
.
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.
Buttons und Links funktionieren nicht
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.
Tutorial
Sieh Dir zum Thema Einbetten auch unser Video-Tutorial an: