Añadir lightboxes en url dinámicas (AJAX #!)

18.06.2017 14:11:27

Cada vez son más populares las websites que cargan parte de su contenido con AJAX. Esto significa que cuando al hacer click en algunos enlaces de la página web, sólo se actualiza una parte de la pagina en lugar de cargar la página completa.

Este artículo explica como añadir lightboxes en este tipo de paginas web.

Una forma sencilla de detectar que las páginas web cargan contenido con AJAX es viendo como aparecen los caracteres #! en la url. Por ejemplo, que la url de la página de inicio sea www.ejemplo.com/demo y que al hacer click en un link para ver la "Sección A" la url cambie a algo como www.ejemplo.com/demo#!seccion-a

Es probable que ahora te estés preguntado... ¿Qué tiene que ver todo esto con TuriTop?

Al cargar nuestro widget de reservas a través de un lightbox, el navegador le indica a TuriTop la url de donde procede (referer), pero ignora todo lo que haya después del símbolo #.

Esta es la forma en que funcionan los navegadores hasta la fecha. En este punto todavía no se han puesto al día con tecnologías como AJAX.

El resultado es que, al cargar un lightbox de TuriTop y hacer clic en "cerrar", funcionará perfectamente cuando la url NO contenga #!, pero si contiene dichos caracteres, enviará al usuario a la página de inicio www.ejemplo.com/demo en lugar de www.ejemplo.com/demo#!seccion-a

Para resolver este problema, TuriTop te permite añadir un parámetro extra a la url del lightbox para que nuestro sistema de reservas sepa a que url debe enviar al usuario cuando haga click en el botón "cerrar".


Funciona de la siguiente forma

Paso 1

Primero necesitas copiar la url donde añadirás el lightbox, por ejemplo, http://www.ejemplo.com/demo#!seccion-a


Paso 2

Luego visita https://www.base64encode.org/ y pega la url para obtener la versión encriptada de url, que será algo como aHR0cDovL3d3dy5leGFtcGxlLmNvbS9kZW1vIyFzZWN0aW9uLWE=

Importante: asegúrate que la url que vas a codificar contenga http:// ó https:// al principio, de lo contrario mostrará un error (Forbidden)


Paso 3

Copia este código y añádelo al final de la url del lightbox, por ejemplo;

http://app.turitop.com/light/box/D1/P1/es/aHR0cDovL3d3dy5leGFtcGxlLmNvbS9kZW1vIyFzZWN0aW9uLWE=

¡Eso esto todo!

Ahora TuriTop sabrá exactamente a donde quieres enviar cada usuario cuando hagan click en el botón "cerrar" del lightbox.

Mira un ejemplo de uno de nuestros clientes usando esta técnica en su página web:

http://www.tourzmart.com/#!rafting-manuel-antonio/cs8b

¡Contáctanos!


¿Listo para comenzar a trabajar con nosotros? ¡Genial! Llámanos o envíanos un correo electrónico y nos pondremos en contacto contigo lo antes posible!

(+34) 922 394 632