Stap 1: Genereer beide widgetcodes
Genereer de code voor elke widget in je back office, één voor één.
Ga naar Instellingen > Widgets.
Selecteer bij "Kies een component" de optie Strippenkaarten, stel je opties in (bijvoorbeeld welke strippenkaartcategorieën getoond moeten worden) en kopieer de code.
Ga terug, selecteer Abonnement, stel je opties in en kopieer de code.
Houd beide codes bij de hand. Je plakt ze in de volgende stap samen.
Stap 2: Plak beide widgets samen
Plak de code van de abonnementswidget en daarna de code van de strippenkaartenwidget, één na de ander, in hetzelfde HTML- of codeblok op je pagina. Pas geen van beide codes aan.
Het voorbeeld hieronder toont beide widgets samen. De companyId is een tijdelijke aanduiding: je eigen codes bevatten je echte bedrijfs-ID en widget-ID's.
<!-- 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>
Stap 3: Voeg het script na beide widgets toe
Plak dit script direct na de code van de strippenkaartenwidget, in hetzelfde codeblok.
Het script wacht tot beide widgets zijn geladen en verplaatst de abonnementen vervolgens naar de container van de strippenkaarten. Het controleert elke 0,3 seconden.
<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>
Publiceer de pagina. Je leden zien nu de abonnementen in de lijst met strippenkaarten.
