Home Mastering our Platform Locator + Pages

    Implement the Locator & Pages in a Single-page-application (SPA)

    Last updated on December 22nd, 2022

    Introduction

    The store-locator works out of the box for server-side-rendered pages, but for pages that are rendered only once on start and then the browser window doesn't get re-rendered on click of a different page, there have to be some manual configurations to make the store-locator work. This is often the case for websites which use popular frameworks like React, Vue.js or Angular. 

    Steps to follow


    Step 1

    Add the initial store-locator script to your html:

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


    Step 2

    Add the container div to your component inside the SPA:

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


    The store-locator won't start automatically with a SPA, because the initial script can't find the div with the id "store-finder-widget" because this will only be rendered at the execution of javascript.

    Delete

    Info

    See also this article on how to implement the Locator & Pages widget for more details on the general setup.


    Step 3

    When starting the store-locator for the first time and the store-locator div is in the current HTML structure, you need to call

    window.UberallStorefinderStart(); 

    This will trigger the initial script and load the bundle. The store-locator should now show up and work properly.


    Step 4

    When going to a different route inside the SPA, you need to call 

    window.UberallStorefinderUnmount();


    on unmount of the store-locator component. This will make sure all components are correctly unmounted and can be started up properly again if the user comes back to the view.


    Step 5

    When going back to the route where the store-locator component is shown, you need to call

    window.UberallStorefinderRestart();


    in order to trigger the already loaded store-locator bundle. 

    Delete

    Warning

    You need to add some logic to make sure the first time this component is rendered, you start it with window.UberallStorefinderStart() and only the times after that call window.UberallStorefinderRestart()


    Example

    Here is an example repository with a React implementation with this store-locator component carrying most of the logic mentioned in the steps above.

    Was this article helpful?

    Save as PDF