Passo 1: gerar os dois códigos de widget
Gere o código de cada widget no seu back office, um a seguir ao outro.
Vá a Definições > Widgets.
Em "Escolher um componente", selecione Passes, defina as suas opções (por exemplo, que categorias de passes mostrar) e copie o código.
Volte atrás, selecione Subscrição, defina as suas opções e copie o código.
Mantenha os dois códigos à mão. Vai colá-los juntos no passo seguinte.
Passo 2: colar os dois widgets juntos
Cole o código da Subscrição e, a seguir, o código dos Passes, um a seguir ao outro, no mesmo bloco de HTML ou de código na sua página. Não edite nenhum dos códigos.
O exemplo abaixo mostra os dois widgets juntos. O companyId é um marcador de posição: os seus próprios códigos contêm o ID real da sua empresa e os IDs dos widgets.
<!-- 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>
Passo 3: adicionar o script a seguir aos dois widgets
Cole este script logo a seguir ao código do widget dos Passes, no mesmo bloco de código.
Ele aguarda até que os dois widgets estejam carregados e depois move as subscrições para dentro do contentor dos passes. Verifica isto a cada 0,3 segundos.
<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>
Publique a página. Os seus membros vão agora ver as subscrições dentro da lista de passes.
