/
RouteWithStoreLocator.js
46 lines (42 loc) · 1.48 KB
/
RouteWithStoreLocator.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { useEffect, useLayoutEffect } from "react";
const RouteWithStoreLocator = ({
isStoreFinderBundleLoaded,
setIsStoreFinderBundleLoaded,
}) => {
// we need to use useLayoutEffect here and not useEffect, because
// we first have to unmount the DOM element and after update the screen
// useEffect does this asynchronously, which throws then errors
useLayoutEffect(() => {
return () => {
window.UberallStorefinderUnmount();
};
}, []);
useEffect(() => {
if (!isStoreFinderBundleLoaded) {
// This is the first time we render the store finder. We need to call window.UberallStorefinderStart
// because we need to fetch the storefinder script and load it into the browsers memory
window.UberallStorefinderStart();
setIsStoreFinderBundleLoaded(true);
} else {
// When the storefinder bundle is already loaded into the browsers memory, we need to call
// window.UberallStorefinderRestart to only update the screen again
window.UberallStorefinderRestart();
}
}, []);
return (
<div
id="store-finder-widget"
data-key="YOUR_STOREFINDER_KEY"
data-language="en"
data-baseurl="https://uberall.com/"
data-showheader="true"
data-showbrands="true"
data-showservices="true"
data-footertext="Uberall Storefinder Test Footer"
data-title="Uberall Storefinder"
data-filters="services"
data-widgetoriginurl=""
></div>
);
};
export default RouteWithStoreLocator;