Passaggio 1: genera entrambi i codici widget
Genera il codice di ciascun widget nel tuo back office, uno dopo l'altro.
Vai su Impostazioni > Widget.
In "Scegli un componente", seleziona Pass, imposta le tue opzioni (ad esempio, quali categorie di pass mostrare) e copia il codice.
Torna indietro, seleziona Abbonamento, imposta le tue opzioni e copia il codice.
Tieni a portata di mano entrambi i codici. Li incollerai insieme nel passaggio successivo.
Passaggio 2: incolla entrambi i widget insieme
Incolla il codice dell'Abbonamento, poi quello dei Pass, uno dopo l'altro nello stesso blocco HTML o di codice della tua pagina. Non modificare nessuno dei due codici.
L'esempio seguente mostra entrambi i widget insieme. Il companyId è un segnaposto: i tuoi codici reali contengono il tuo ID azienda effettivo e gli id dei widget.
<!-- 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>
Passaggio 3: aggiungi lo script dopo entrambi i widget
Incolla questo script subito dopo il codice del widget Pass, nello stesso blocco di codice.
Lo script attende che entrambi i widget siano stati caricati, poi sposta gli abbonamenti all'interno del contenitore dei pass. Il controllo avviene ogni 0,3 secondi.
<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>
Pubblica la pagina. I tuoi membri vedranno ora gli abbonamenti all'interno dell'elenco dei pass.
