Implémenter le Locator & Pages dans une Single-page-application (SPA)

French

+ More

Introduction

Le store-locator fonctionne directement pour les pages rendues côté serveur, mais pour les pages qui ne sont rendues qu'une seule fois au démarrage et dont la fenêtre du navigateur n'est pas re-rendue au clic sur une page différente, certaines configurations manuelles sont nécessaires pour faire fonctionner le store-locator. C'est souvent le cas pour les sites web qui utilisent des frameworks populaires comme React, Vue.js ou Angular.

Étapes à suivre

Étape 1

Ajoutez le script store-locator initial à votre HTML :

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

Étape 2

Ajoutez le div conteneur à votre composant dans le SPA :

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

Le store-locator ne démarrera pas automatiquement avec un SPA, car le script initial ne peut pas trouver le div avec l'id « store-finder-widget » car celui-ci ne sera rendu qu'à l'exécution du javascript.

Delete

Information

Consultez également cet article sur la manière d'implémenter le widget Locator & Pages pour plus de détails sur la configuration générale.

Étape 3

Au premier démarrage du store-locator et si le div store-locator se trouve dans la structure HTML actuelle, vous devez appeler

window.UberallStorefinderStart();

Cela déclenchera le script initial et chargera le bundle. Le store-locator devrait maintenant s'afficher et fonctionner correctement.

Étape 4

Lorsque vous accédez à une route différente dans le SPA, vous devez appeler

window.UberallStorefinderUnmount();

au démontage du composant store-locator. Cela permettra de s'assurer que tous les composants sont correctement démontés et peuvent être redémarrés correctement si l'utilisateur revient à cette vue.

Étape 5

Lorsque vous revenez à la route où le composant store-locator s'affiche, vous devez appeler

window.UberallStorefinderRestart();

pour déclencher le bundle store-locator déjà chargé.

Delete

Avertissement

Vous devez ajouter une logique pour vous assurer que la première fois que ce composant est rendu, vous le démarrez avec window.UberallStorefinderStart() et seulement les fois suivantes, appelez window.UberallStorefinderRestart()

Exemple

Voici un exemple de dépôt avec une implémentation React avec ce composant store-locator contenant la plupart de la logique mentionnée dans les étapes ci-dessus.