Schritt 1: Beide Widget-Codes generieren
Generiere den Code für jedes Widget nacheinander in deinem Backoffice.
Gehe zu Einstellungen > Widgets.
Wähle unter „Komponente auswählen" Pässe aus, lege deine Optionen fest (zum Beispiel, welche Pass-Kategorien angezeigt werden sollen) und kopiere den Code.
Gehe zurück, wähle Abonnement aus, lege deine Optionen fest und kopiere den Code.
Halte beide Codes bereit. Im nächsten Schritt fügst du sie zusammen ein.
Schritt 2: Beide Widgets zusammen einfügen
Füge den Abonnement-Code und danach den Pässe-Code nacheinander in denselben HTML- oder Code-Block deiner Seite ein. Bearbeite keinen der beiden Codes.
Das folgende Beispiel zeigt beide Widgets zusammen. Die companyId ist ein Platzhalter: Deine eigenen Codes enthalten deine echte Unternehmens-ID und die Widget-IDs.
<!-- Subscription widget -->
<script id="insert-bsport-widget-cdn">!function (b, s, p, o, r, t) { typeof window.BsportWidget === "undefined" && !document.getElementById("bsport-widget-cdn") && !function () { m = b.createElement(s), m.id = "bsport-widget-cdn", m.src = p, b.getElementsByTagName("head")[0].appendChild(m) }() }(document, "script", "https://cdn.bsport.io/scripts/widget.js")</script>
<script id="bsport-widget-mount">
function MountBsportWidget(config, repeat=1) {
if (repeat > 50) { return }
if (!window.BsportWidget) {
return setTimeout(() => {
MountBsportWidget(config,repeat+1)
}, 100 * repeat || 1)
}
BsportWidget.mount(config)
}
</script>
<script>
MountBsportWidget({
"parentElement": "bsport-widget-337136",
"companyId": yourcompanyId,
"franchiseId": null,
"dialogMode": 1,
"widgetType": "subscription",
"showFab": false,
"fullScreenPopup": false,
"styles": undefined,
"config": {
"subscription": {}
}
})
</script>
<div id="bsport-widget-337136"></div>
<!-- Passes widget -->
<script id="insert-bsport-widget-cdn">!function (b, s, p, o, r, t) { typeof window.BsportWidget === "undefined" && !document.getElementById("bsport-widget-cdn") && !function () { m = b.createElement(s), m.id = "bsport-widget-cdn", m.src = p, b.getElementsByTagName("head")[0].appendChild(m) }() }(document, "script", "https://cdn.bsport.io/scripts/widget.js")</script>
<script id="bsport-widget-mount">
function MountBsportWidget(config, repeat=1) {
if (repeat > 50) { return }
if (!window.BsportWidget) {
return setTimeout(() => {
MountBsportWidget(config,repeat+1)
}, 100 * repeat || 1)
}
BsportWidget.mount(config)
}
</script>
<script>
MountBsportWidget({
"parentElement": "bsport-widget-421437",
"companyId": yourcompanyId,
"franchiseId": null,
"dialogMode": 1,
"widgetType": "pass",
"showFab": false,
"fullScreenPopup": false,
"styles": undefined,
"config": {
"pass": {
"paymentPackCategories": [],
"privatePassCategories": []
}
}
})
</script>
<div id="bsport-widget-421437"></div>
Schritt 3: Das Skript nach beiden Widgets einfügen
Füge dieses Skript direkt nach dem Pässe-Widget-Code in denselben Code-Block ein.
Es wartet, bis beide Widgets geladen sind, und verschiebt dann die Abonnements in den Container der Pässe. Die Prüfung erfolgt alle 0,3 Sekunden.
<script>
function appendSubs() {
const subs = document.querySelector(".bs-contract-page");
if (!subs) {
setTimeout(appendSubs, 300);
return;
}
const passes = document.querySelector(".bs-pass-page__list");
if (!passes) {
setTimeout(appendSubs, 300);
return;
}
passes.appendChild(subs);
}
document.addEventListener("DOMContentLoaded", () => {
appendSubs();
})
</script>
Veröffentliche die Seite. Deine Mitglieder sehen die Abonnements jetzt innerhalb der Pässe-Liste.
