Étape 1 : générer les deux codes de widget
Générez le code de chaque widget dans votre back office, l'un après l'autre.
Allez dans Paramètres > Widgets.
Dans « Choisir un composant », sélectionnez Cartes, définissez vos options (par exemple, quelles catégories de cartes afficher), puis copiez le code.
Revenez en arrière, sélectionnez Abonnement, définissez vos options, puis copiez le code.
Gardez les deux codes à portée de main. Vous allez les coller ensemble à l'étape suivante.
Étape 2 : coller les deux widgets ensemble
Collez le code Abonnement, puis le code Cartes, l'un après l'autre, dans le même bloc HTML ou de code sur votre page. Ne modifiez aucun des deux codes.
L'exemple ci-dessous montre les deux widgets ensemble. Le companyId est un espace réservé : vos propres codes contiennent l'identifiant réel de votre entreprise ainsi que les identifiants de vos 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>
Étape 3 : ajouter le script après les deux widgets
Collez ce script juste après le code du widget Cartes, dans le même bloc de code.
Il attend que les deux widgets soient chargés, puis déplace les abonnements dans le conteneur des cartes. Il effectue une vérification toutes les 0,3 secondes.
<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>
Publiez la page. Vos membres voient désormais les abonnements dans la liste des cartes.
