Implementar el Locator y Pages en una Single-page-application (SPA)

Spanish

+ More

Introducción

El localizador de tiendas funciona directamente en páginas renderizadas en el servidor, pero para páginas que se renderizan una sola vez al iniciar y después el navegador no se vuelve a renderizar al hacer clic en una página diferente, es necesario realizar algunas configuraciones manuales para que el localizador de tiendas funcione. Esto es frecuente en sitios web que utilizan frameworks populares como React, Vue.js o Angular.

Pasos a seguir

Paso 1

Añade el script inicial del localizador de tiendas a tu HTML:

<script src="https://uberall.com/assets/storeFinderWidget-v2.js" type="text/javascript"></script>

Paso 2

Añade el div contenedor a tu componente dentro del SPA:

<div
id="store-finder-widget"
data-key="KEY">
// any other customization options
</div>

El localizador de tiendas no se iniciará automáticamente con un SPA, porque el script inicial no puede encontrar el div con el id «store-finder-widget» ya que solo se renderizará en la ejecución de JavaScript.

Delete

Información

Consulta también este artículo sobre cómo implementar el widget Locator & Pages para más detalles sobre la configuración general.

Paso 3

Cuando inicies el localizador de tiendas por primera vez y el div del localizador de tiendas esté en la estructura HTML actual, debes llamar a

window.UberallStorefinderStart();

Esto activará el script inicial y cargará el bundle. El localizador de tiendas debería aparecer ahora y funcionar correctamente.

Paso 4

Cuando navegues a una ruta diferente dentro del SPA, debes llamar a

window.UberallStorefinderUnmount();

al desmontar el componente del localizador de tiendas. Esto asegurará que todos los componentes se desmonten correctamente y se puedan iniciar de nuevo si el usuario regresa a la vista.

Paso 5

Cuando regreses a la ruta donde se muestra el componente del localizador de tiendas, debes llamar a

window.UberallStorefinderRestart();

para activar el bundle del localizador de tiendas que ya está cargado.

Delete

Advertencia

Debes añadir cierta lógica para asegurarte de que la primera vez que se renderiza este componente, lo inicies con window.UberallStorefinderStart() y solo en los ocasiones posteriores llames a window.UberallStorefinderRestart()

Ejemplo

Aquí hay un repositorio ejemplo con una implementación en React con este componente del localizador de tiendas que contiene la mayoría de la lógica mencionada en los pasos anteriores.