Implementa Locator & Pages in una Single-page-application (SPA)

Italian

Padroneggiare la Piattaforma
Vicino a me 360 IA Analitiche Directory Homepage Hub Ubicazione Localizzatore + Pagine Messaggi App Mobile Stato della Piattaforma e Domande Frequenti Gestione delle Recensioni Sociale La Dashboard Novità

+ More

Introduzione

Il localizzatore di negozi funziona subito per le pagine renderizzate lato server, ma per le pagine che vengono renderizzate una sola volta all'avvio e il browser non viene re-renderizzato al clic su una pagina diversa, è necessario effettuare alcune configurazioni manuali per far funzionare il localizzatore di negozi. Questo è spesso il caso dei siti web che utilizzano framework popolari come React, Vue.js o Angular.

Passaggi da seguire

Passaggio 1

Aggiungi lo script iniziale del localizzatore di negozi al tuo HTML:

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

Passaggio 2

Aggiungi il div contenitore al tuo componente all'interno della SPA:

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

Il localizzatore di negozi non si avvierà automaticamente con una SPA, perché lo script iniziale non può trovare il div con l'id «store-finder-widget» poiché questo verrà renderizzato solo all'esecuzione di JavaScript.

Delete

Info

Vedi anche questo articolo su come implementare il widget Locator & Pages per ulteriori dettagli sulla configurazione generale.

Passaggio 3

Quando avvii il localizzatore di negozi per la prima volta e il div del localizzatore di negozi è nella struttura HTML attuale, devi chiamare

window.UberallStorefinderStart();

Questo attiverà lo script iniziale e caricherà il bundle. Il localizzatore di negozi dovrebbe ora comparire e funzionare correttamente.

Passaggio 4

Quando vai a un percorso diverso all'interno della SPA, devi chiamare

window.UberallStorefinderUnmount();

allo smontaggio del componente del localizzatore di negozi. Ciò garantirà che tutti i componenti vengano correttamente smontati e possano essere avviati di nuovo correttamente se l'utente torna alla visualizzazione.

Passaggio 5

Quando torni al percorso in cui il componente del localizzatore di negozi viene visualizzato, devi chiamare

window.UberallStorefinderRestart();

per attivare il bundle del localizzatore di negozi già caricato.

Delete

Avviso

Devi aggiungere della logica per assicurarti che la prima volta che questo componente viene renderizzato, lo avvii con window.UberallStorefinderStart() e solo le volte successive chiami window.UberallStorefinderRestart()

Esempio

Qui c'è un repository di esempio con un'implementazione React con questo componente del localizzatore di negozi che contiene la maggior parte della logica descritta nei passaggi precedenti.