Pour chaque point de vente, vous pouvez changer un certain nombre d'éléments du thème graphique. Rendez-vous dans Votre Point De Vente > Thème Internet
. Sur cette page de paramétrage, un onglet permet les manipulations avancées pour les en-têtes et pieds-de-page. Pour chacun des deux blocs de pages, vous verrez apparaître autant de champs de texte qu'il y a de langues activées sur le point de vente. Ceci vous permettra de traiter les changements de labels avec plus de facilité.
Taille maximale: Point important: Pour des raisons techniques et de performance, évitez d'uploader une en-tête ou un pied-de-page supérieur à 20'000 caractères (espaces et retours à la ligne compris) pour chaque langue. Si ce point est bloquant pour vous, voici quelques astuces pour gagner en place:
Le CSS pouvant rapidement prendre de la place, nous vous recommandons d'importer celui de votre site principal.
L'en-tête et le pied-de-page sont deux pages statiques HTML qui sont injectées dans le tunnel d'achat au travers de <iframes>
. Ces iframes vont se redimensionner automatiquement en fonction de leur contenu, ce qui implique de respecter les conditions suivantes:
<div>
unique dans le body de la page injectée.body, html { margin: 0; padding: 0; overflow: hidden; } |
SecuTix va injecter le contenu de l'en-tête et du pied-de-page dans une iframe. Toutefois, certains éléments sont spécifiques à la problématique de billetterie, tels que le login de l'utilisateur, les appels pour changer de langue, etc. C'est pourquoi nous exposons une API documentée pour les interactions avec le reste de la page.
En début de page uploadée, il convient de rapatrier l'API dans l'iframe pour pouvoir l'utiliser plus facilement.
<script type="text/javascript"> var SecuTixAPI = window.parent.SecuTixAPI; </script> |
/** * Get the details on loggued contact. Null if not logged. Otherwise: * { * lang: // the contact prefered language * firstName: // the contact first name * lastName: // the contact last name * title: // the contact title * structureName: // if contact belongs to a structure, structure name * } * * @returns {Object} */ getContact: function() {} |
L'API suivante donne accès aux urls utilisables dans les liens.
/** * Return available urls: * { * account: // url to account page * cart: // url to cart page * continueShopping: // url to continue shopping * logout: // url to logout the user * langs: // map of urls for the langs. Keys are the language codes * } * @returns {Object} */ getUrls: function () {} |
/** * Get the current content of the cart. Null is empty. Otherwise: * { * nbItems: // number of items in cart {number} * amount: // amount of cart as {string} * currency: // currency of the amount * } * * @returns */ getCart: function () {} |
SecuTix expose une méthode pour manipuler le menu mobile fourni par défaut par le tunnel d'achat. Par exemple, vous pouvez ouvrir le menu SecuTix mobile lorsque l'utilisateur clique sur un bouton menu dans le header.
/** * Show or hide the secutix mobile menu. * @param {boolean} show * @returns */ toggleSecutixMobileMenu: function (show) {} |
Exemple de html pour une en-tête, où le lien Mon compte devient le nom du contact lorsque celui-ci est connecté.
<html> <head> <!-- import your css here --> <link rel="stylesheet" type="text/css" href="//my.css"> </head> <body> <!-- there should be only one div as child of the body tag --> <div> <!-- the header or the footer content should be here --> <a href="#" id="my_account" class="hide">My account</a> <a href="#" id="my_account_mobile"> ☰ </a> </div> <!-- import your scripts here --> <script type="text/javascript"> var SecuTixAPI = window.parent.SecuTixAPI; // If the contact is not logged in, show the "My account" link if (!SecuTixAPI.getContact()) { var myAcountLink = document.getElementById("my_account"); myAcountLink .classList.remove("hide"); myAcountLink.attributes.href.value = SecuTixAPI.getUrls().account; } // Clicking on the mobile link opens the mobile menu document.getElementById("my_account_mobile").addEventListener(function (event) { event.preventDefault(); SecuTixAPI.toggleSecutixMobileMenu(); }); </script> </body> </html> |