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 avanzadas 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 rendimiento, 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 de bloqueo, a continuación algunos trucos para ganar espacio:

• La mayoría de los programas de edición de código (basta con Notepad ++) 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:

• La cabecera o pie de página debe introducirse en un <div> único en el cuerpo de la página integrada.
• El cuerpo debe contener los siguientes estilos:

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

• La cabecera o pie de página deben cambiar de tamaño con fluidez para que todo el contenido sea visible, sin tener que recurrir a las barras de desplazamiento.  
• Todos los recursos del HTML cargados deben ser importados 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.

Acceso a la API de SecuTix

SecuTix 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 utilizarla más fácil.

<script type="text/javascript">
	var SecuTixAPI = window.parent.SecuTixAPI;
</script>

Acceso a la informació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() {}

Acceso a las URLs aplicables

La siguiente API da acceso a las URLS URL que se pueden utilizar en los enlaces.

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

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 hace clic en un botón menú en la cabecera.

/**
 * 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 esté conectado.

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