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

+ More

Table of Contents

Introduction Steps to follow Step 1 Step 2 Info Step 3 Step 4 Step 5 Warning Example

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.

implement install