Dans le cadre de customisation plus avancées, SecuTix offre la possibilité de mettre en place un entête et/ou un pied-de-page sur mesure. Ce réglage se fait en uploadant le code html de l'entête et/ou pied-de-page dans un onglet avancé du paramétrage du thème graphique. Ceci offre l'avantage que l'agence web qui a réalisé votre site principal peut réutiliser le code qu'elle a créé, sans devoir en re-écrire un nouveau juste pour la billetterie.
Mise en place
Pour chaque point de vente, il est possible de changer un certains nombre d'éléments du Thème graphique. Rendez-vous dans Votre Point De Vente > Thème Internet . Sur cette page de paramétrisation un onglet permet les manipulations avancées pour les entê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 facilité.
Taille Maximale: Un point d'attention: pour des raisons techniques (et de performance), il convient de ne pas uploader d'entête ou pied-de-page de plus de 20'000 caractères de long (espaces et retours à la ligne compris), pour chaque langue. Si ce point vous pose des problèmes, il existe quelques astuces pour gagner en place:
- La plupart des logiciels pour éditer du code (même Notepad ++ suffit) permettent de supprimer les espaces et les retours à la ligne. Ce type de formatage peut vous économiser 10% à 20% de caractères
Le CSS pouvant rapidement prendre de la place, nous vous recommandons d'importer celui de votre site principal. Puisque la balise
<head>a déjà été terminée au moment de l'import, nous vous recommandons de passer par du javascript. Voici un example:Code Block language js
Structure de l'entête et du pied-de-page
L'entê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 les limitations suivantes:
- L'entête ou le pied-de-page doivent être contenus dans un
<div>unique dans le body de la page injectée. - Le body doit avoir les styles suivants:
| Code Block | ||
|---|---|---|
| ||
body, html {
margin: 0;
padding: 0;
overflow: hidden;
} |
- L'entête ou le pied-de-page doivent se redimensionner de manière fluide afin que tout contenu soit visible, sans avoir recours à des barres de défilement.
- L'ensemble des ressources du HTML uploadé doivent être importées avec le protocole https
- Pour des raisons techniques, un traitement spéciale est ajouté sur les liens contenus dans l'entête et le pied-de-page. Ils peuvent donc être utilisés normalement.
Accéder à l'API SecuTix
SecuTix va injecter le contenu de l'entê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. A ce titre nous exposons une API documentée pour les interactions avec le reste de la page.
Récupérer l'API
En début de page uploadée, il convient de rapatrier l'API dans l'iframe pour pouvoir l'utiliser plus facilement.
| Code Block | ||
|---|---|---|
| ||
<script type="text/javascript"> var SecuTixAPI = window.parent.SecuTixAPI; </script> |
Accès aux informations de contact
| Code Block | ||
|---|---|---|
| ||
/**
* 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() {} |
Accès aux urls utilisables
L'API suivante donne accès aux urls utilisables dans les liens.
| Code Block | ||
|---|---|---|
| ||
/**
* 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 () {} |
Accès aux informations de panier
| Code Block | ||
|---|---|---|
| ||
/**
* 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 () {} |
Utiliser le menu mobile SecuTix
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.
| Code Block | ||
|---|---|---|
| ||
/**
* Show or hide the secutix mobile menu.
* @param {boolean} show
* @returns
*/
toggleSecutixMobileMenu: function (show) {} |
Exemple d'entête
Exemple de html pour un entête, où le lien Mon compte devient le nom du contact lorsque celui-ci est connecté.
| Code Block | ||
|---|---|---|
| ||
<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> |