Refactor initializeDropins to re-load on prerenderingchange

scripts/initializers/index.js

@@ -33,33 +33,40 @@ const persistCartDataInSession = (data) => {
 };
 
 export default async function initializeDropins() {
-  // Set auth headers on authenticated event
-  events.on('authenticated', setAuthHeaders);
-  // Cache cart data in session storage
-  events.on('cart/data', persistCartDataInSession, { eager: true });
+  const init = async () => {
+    // Set auth headers on authenticated event
+    events.on('authenticated', setAuthHeaders);
+    // Cache cart data in session storage
+    events.on('cart/data', persistCartDataInSession, { eager: true });
 
-  // on page load, check if user is authenticated
-  const token = getUserTokenCookie();
-  // set auth headers
-  setAuthHeaders(!!token);
-  // emit authenticated event if token has changed
-  events.emit('authenticated', !!token);
+    // on page load, check if user is authenticated
+    const token = getUserTokenCookie();
+    // set auth headers
+    setAuthHeaders(!!token);
+    // emit authenticated event if token has changed
+    events.emit('authenticated', !!token);
+
+    // Event Bus Logger
+    events.enableLogger(true);
+    // Set Fetch Endpoint (Global)
+    setEndpoint(await getConfigValue('commerce-core-endpoint'));
 
-  // Event Bus Logger
-  events.enableLogger(true);
-  // Set Fetch Endpoint (Global)
-  setEndpoint(await getConfigValue('commerce-core-endpoint'));
+    // Initialize Global Drop-ins
+    await import('./auth.js');
+    import('./cart.js');
 
-  events.on('eds/lcp', async () => {
-    // Recaptcha
-    await import('@dropins/tools/recaptcha.js').then(({ setConfig }) => {
-      setConfig();
+    events.on('eds/lcp', async () => {
+      // Recaptcha
+      await import('@dropins/tools/recaptcha.js').then(({ setConfig }) => {
+        setConfig();
+      });
     });
-  });
+  };
+
+  // re-initialize on prerendering changes
+  document.addEventListener('prerenderingchange', initializeDropins);
 
-  // Initialize Global Drop-ins
-  await import('./auth.js');
-  import('./cart.js');
+  return init();
 }
 
 export function initializeDropin(cb) {