Colocación

Podrá cambiar un cierto número de elementos del tema gráfico para cada punto de venta. Diríjase a su Punto de Venta> Tema Internet . En esta página de configuración, una de las pestañas le permite llevar a cabo las manipulaciones avanxzadas para las cabeceras y pies de página. Para ambos bloques de páginas, verá aparecer tantos campos de texto como idiomas activos haya en el punto de venta. Le permitirá ejecutar los cambios de las etiquetas de manera más fácil.

Tamaño máximo. Punto importante: por razones técnicas y de performance, evite cargar una cabecera o pie de página que supere los 20'000 caracteres (incluidos los espacios y saltos de línea) para cada idioma. Si este punto es bloqueante, a continuación algunos trucos para ganar espacio:

• La mayoría de los programas de edición de código (basta con Notepas ++) permiten eliminar los espacios y los saltos de línea. Con este tipo de formato ahorrará de un 10% a un 20% de los caracteres.

• El CSS puede ocupar espacio rápido y, por ello, le recomendamos que use el de su página web principal.

Estructura de la cabecera y del pie de página

La cabecera y el pie de página son dos páginas estáticas HTML que se integran en la pasarela de pago a través de <iframes>. Estos iframes van a cambiar el tamaño automáticamente en función de su contenido, lo que implica tener que respetar las siguientes condiciones:

• L'a cabecera o pie de página introducirse en un <div> único en el cuerpo de la página integrada

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.

• La cabecera o pie de página deben cambiar de tamaño con fluidez para que todo el contenido sea visible, sin ttner que recurrir a las barras de desplazamiento. ' 
• Todos los recursos del HTML cargado debe ser importado con el protocolo https 
• Por razones técnicas, se ha previsto un tratamiento especial para los enlaces que haya en la cabecera y pie de página. Así, pueden utilizarse normalmente.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

integrará el contenido de la cabecera y del pie de página en un iframe. No obstante, ciertos elementos son específicos de la venta de entradas como por ejemplo el registro del usuario, las llamadas para cambiar de idioma, etc. Es por lo que presentamos una API documentada para las integraciones con el resto de la página.

Recuperar la API

Al comienzo de la página cargada, es conveniente recuperar la API en el iframe para poder utilizarlo más fácilEn 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>

Acceso a la infromación de contacto

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

Acceso a las URLs aplicables

La siguiente API da acceso a las URLS que se pueden utilizar en los enlacesL'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 () {}

Acceso a la información de la cesta

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

Utilización del menú móvil SecuTix

SecuTix muestra un método de manipulación del menú móvil que viene por defecto en la pasarela de pago. Por ejemplo: abra el menú SecuTix móvil mientras que el usuario clica en un botón menú en la cabeceraSecuTix 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) {}

Ejemplo de cabecera

Ejemplo de html para una cabecera en la que el enlace Mi cuenta se convierte en el nombre del contacto mientras orsque

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>