Setup

For each point of sale, you can change a certain number of elements of the graphic theme. Go to Your Point of Sale > Internet Theme. On this settings page, a tab allows you to make advanced changes to the headers and footers. For every two blocks of pages, a text field for each activated language will appear for the point of sale,allowing you to make changes to labels more easily.

Maximum size: Important point: For technical and performance reasons, avoid uploading headers and footers of more than 20,000 characters (including spaces and hard returns) for each language.If this proves difficult, there are some tricks for getting more room:

• Most code-editing software (even Notepad ++) allows spaces and hard returns to be deleted. This type of formatting can reduce your characters by 10 to 20%.

• CSS can take up room quickly, so we recommend that you import what was used for your main site. 

Header and footer structure

The header and footer are two static HTML pages that are inserted into the purchase process through <iframes>. These iframes will automatically re-size according to their content, which means that the following conditions must be respected:

• The header or footer must be contained in a unique <div> in the body of the inserted page.
• The body must have the following styles

Mise en place

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:

• 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. 

Structure de l'en-tête et du pied-de-page

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:

• L'en-tê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:

body, html {	
	margin: 0;
    padding: 0;
    overflow: hidden;
}

• L'en-tê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é doit être importé avec le protocole https 
• Pour des raisons techniques, un traitement spécial est prévu sur les liens contenus dans l'en-tê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'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.

Récupérer l'API

• The header or footer must be re-sized seamlessly so that all content is visible, without needing scroll bars.
• All uploaded HTML resources must be imported with the https protocol. 
• For technical reasons, links contained in headers and footers undergo special processing. They may therefore be used normally.

Accessing the SecuTix API

SecuTix will insert the header and footer content in an iframe. However, some elements, such as the user login and requests to change the language etc., are specific to ticketing. We therefore use a documented API for interactions with the rest of the page.

Retrieving the API

Before uploading the page, downloading the API in the iframe is useful so that it may be used more easilyEn 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>

Accessing contact information

/**
 * 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

Accessing usable URLs

The following API gives access to usable URLs in the linksL'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 () {}

Accessing basket information

/**
 * 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 () {}

Using the mobile SecuTix menu

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 uses a method for manipulating the mobile menu provided by default by the purchase process. For example, the mobile SecuTix menu can be opened when the user clicks on the menu button in the header.

/**
 * Show or hide the secutix mobile menu.
 * @param {boolean} show
 * @returns
 */
 toggleSecutixMobileMenu: function (show) {}

Header example

Example of html for a header, where the My account link becomes the contact name when they are logged in

Exemple d'en-tête

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>