Einbinden eines Widgets

Nach erfolgreichem Erstellen eines Widgets wird automatisch der benötigte Code für das Einbinden des Widgets erstellt.

1. Embed Button des gewünschten Widgets drücken.
2. HTML zeigt den div-Container, welcher auf der Webseite, auf welcher das Widget angezeigt werden soll, eingebunden werden muss
   <div id="shopWidgetContainer"></div>
3. JS Snippet zeigt den Javascript Code, welcher den div-Container befüllt und muss auf derselben Webseite (ganz wichtig im Body !!!) eingebunden werden.

<script async src="https://domain.skischool.shop/widget/[IDENTIFIER]/script.js"></script> <script> window.WSSW = window.WSSW || [] function initWSSW() { if(window.WSShopWidget) window.WSShopWidget.initialize(arguments) else window.WSSW.push(arguments) } initWSSW({ containerId: "shopWidgetContainer", widgetId: "[IDENTIFIER]", config: { ... } }) </script>

4. [optional] Wenn mehrere Widgets auf einer Seite eingebettet werden, kann man sich einen Teil des Codes sparen.
Es muss nur ein HTML div-Container für jedes Widget angelegt werden sowie die "initWSSW()" Funktion mit den jeweiligen Parametern aufgerufen werden. Das Skript muss man sich selber kombinieren, indem man das vollständige Skript des ersten Widgets kopiert und dann von jedem weiteren Widget nur mehr die initWSSW()" Funktion mit den jeweiligen Parametern ans Ende des Skripts kopiert. Wie die einzelnen IDs lauten ist komplett egal, sie müssen sie nur voneinander unterscheiden und die HTML-ID muss der containerId im Skript entsprechen.

Beispiel HTML:

<div id="shopWidgetContainer"></div>
<div id="shopWidgetContainer_2"></div>

Beispiel JS:

<script async src="https://domain.skischool.shop/widget/[IDENTIFIER]/script.js"></script> <script> window.WSSW = window.WSSW || [] function initWSSW() { if(window.WSShopWidget) window.WSShopWidget.initialize(arguments) else window.WSSW.push(arguments) } initWSSW({ containerId: "shopWidgetContainer", widgetId: "[IDENTIFIER]", config: { ... } }) initWSSW({ containerId: "shopWidgetContainer_2", widgetId: "[IDENTIFIER_2]", config: { ... } }) ... </script>