SecuTix offre la possibilité de mettre en place un entête et/ou un pied-de-page sur mesure.
Structure de l'entête et du pied-de-page
L'entête et le pied sont des pages statiques HTML qui sont injectées dans le tunnel d'achat dans des iframes. Ces iframes vont se redimensionner automatique en fonction de leur contenu, ce qui implique les limitations suivantes:
- L'entête ou le pied de page doivent être contenu dans un div unique dans le body de la page injectée.
- Le body doit avoir les styles suivants:
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 doivent être importées avec le protocole https
- Pour des raisons techniques, un traitement spéciale est ajouté sur les liens contenus dans le he..... Ils peuvent donc être utilisés normalement. Ctr clic ne marche pas.
<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>
Accéder à l'API SecuTix
SecuTix va injecter le contenu de l'entête et du pied de page dans une iframe, et exposer une API documentée pour les interactions avec le reste de la page.
Récupérer l'API
En début de page, il convient de rappatrier l'API dans l'iframe pour pouvoir l'utiliser plus facilement.
<script type="text/javascript"> var SecuTixAPI = window.parent.SecuTixAPI; </script>
Accès aux informations de contact
/**
* 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.
/**
* 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
/**
* 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.
/**
* Show or hide the secutix mobile menu.
* @param {boolean} show
* @returns
*/
toggleSecutixMobileMenu: function (show) {}