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:

Step 2

Add the container div to your component inside the SPA:

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.

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

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 

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

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

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.