Multi source support for commerce configs and placeholders

blocks/commerce-order-header/commerce-order-header.js

@@ -3,7 +3,7 @@
 import { events } from '@dropins/tools/event-bus.js';
 import { Header, provider as uiProvider } from '@dropins/tools/components.js';
 import { CUSTOMER_ORDER_DETAILS_PATH, CUSTOMER_ORDERS_PATH } from '../../scripts/constants.js';
-import { fetchPlaceholders } from '../../scripts/aem.js';
+import { fetchPlaceholders } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   block.innerHTML = '';

blocks/commerce-return-header/commerce-return-header.js

@@ -3,7 +3,7 @@
 import { events } from '@dropins/tools/event-bus.js';
 import { Header, provider as uiProvider } from '@dropins/tools/components.js';
 import { CUSTOMER_RETURN_DETAILS_PATH, CUSTOMER_RETURNS_PATH } from '../../scripts/constants.js';
-import { fetchPlaceholders } from '../../scripts/aem.js';
+import { fetchPlaceholders } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   block.innerHTML = '';

blocks/product-details/product-details.js

@@ -22,7 +22,7 @@ import ProductGallery from '@dropins/storefront-pdp/containers/ProductGallery.js
 
 // Libs
 import { setJsonLd } from '../../scripts/commerce.js';
-import { fetchPlaceholders } from '../../scripts/aem.js';
+import { fetchPlaceholders } from '../../scripts/scripts.js';
 
 // Initializers
 import { IMAGES_SIZES } from '../../scripts/initializers/pdp.js';

head.html

@@ -31,7 +31,6 @@
 <script src="/scripts/configs.js" type="module"></script>
 <script src="/scripts/commerce.js" type="module"></script>
 
-<link rel="preload" href="/placeholders.json" as="fetch" crossorigin="anonymous" />
 <link rel="modulepreload" href="/scripts/initializers/index.js" />
 <link rel="modulepreload" href="/scripts/initializers/auth.js" />
 <link rel="modulepreload" href="/scripts/initializers/cart.js" />

scripts/configs.js

@@ -1,3 +1,5 @@
+import { getRootPath } from './scripts.js';
+
 const ALLOWED_CONFIGS = ['prod', 'stage', 'dev'];
 
 /**
@@ -29,21 +31,22 @@
   return environment;
 };
 
-function buildConfigURL(environment) {
+function buildConfigURL(environment, root = '/') {
   const env = environment || calcEnvironment();
   let fileName = 'configs.json';
   if (env !== 'prod') {
     fileName = `configs-${env}.json`;
   }
-  const configURL = new URL(`${window.location.origin}/${fileName}`);
+  const configURL = new URL(`${window.location.origin}${root}${fileName}`);
   return configURL;
 }
 
 const getConfigForEnvironment = async (environment) => {
   const env = environment || calcEnvironment();
+  const root = getRootPath() || '/';
 
   try {
-    const configJSON = window.sessionStorage.getItem(`config:${env}`);
+    const configJSON = window.sessionStorage.getItem(`config:${env}:${root}:${root}`);
     if (!configJSON) {
       throw new Error('No config in session storage');
     }
@@ -55,13 +58,13 @@
 
     return parsedConfig;
   } catch (e) {
-    let configJSON = await fetch(buildConfigURL(env));
+    let configJSON = await fetch(buildConfigURL(env, root));
     if (!configJSON.ok) {
       throw new Error(`Failed to fetch config for ${env}`);
     }
     configJSON = await configJSON.json();
     configJSON[':expiry'] = Math.round(Date.now() / 1000) + 7200;
-    window.sessionStorage.setItem(`config:${env}`, JSON.stringify(configJSON));
+    window.sessionStorage.setItem(`config:${env}:${root}`, JSON.stringify(configJSON));
     return configJSON;
   }
 };
@@ -87,13 +90,21 @@
 export const getHeaders = async (scope, environment) => {
   const env = environment || calcEnvironment();
   const config = await getConfigForEnvironment(env);
-  const configElements = config.data.filter((el) => el?.key.includes(`headers.${scope}`));
+  const configElements = config.data.filter((el) => el?.key.includes('headers.all') || el?.key.includes(`headers.${scope}`));
 
   return configElements.reduce((obj, item) => {
     let { key } = item;
+
+    // global values
+    if (key.includes('commerce.headers.all.')) {
+      key = key.replace('commerce.headers.all.', '');
+    }
+
+    // scoped values
     if (key.includes(`commerce.headers.${scope}.`)) {
       key = key.replace(`commerce.headers.${scope}.`, '');
     }
+
     return { ...obj, [key]: item.value };
   }, {});
 };

scripts/initializers/account.js

@@ -1,7 +1,7 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-account/api.js';
 import { initializeDropin } from './index.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 import { getHeaders } from '../configs.js';
 
 await initializeDropin(async () => {

scripts/initializers/auth.js

@@ -2,7 +2,7 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-auth/api.js';
 import { initializeDropin } from './index.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 import { getHeaders } from '../configs.js';
 
 await initializeDropin(async () => {

scripts/initializers/cart.js

@@ -2,7 +2,7 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-cart/api.js';
 import { initializeDropin } from './index.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 import { getHeaders } from '../configs.js';
 
 await initializeDropin(async () => {

scripts/initializers/checkout.js

@@ -1,7 +1,7 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-checkout/api.js';
 import { initializeDropin } from './index.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 import { getHeaders } from '../configs.js';
 
 await initializeDropin(async () => {

scripts/initializers/order.js

@@ -3,7 +3,7 @@ import { initializers } from '@dropins/tools/initializer.js';
 import { initialize, setFetchGraphQlHeaders } from '@dropins/storefront-order/api.js';
 import { checkIsAuthenticated, getHeaders } from '../configs.js';
 import { initializeDropin } from './index.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 
 import {
   CUSTOMER_ORDER_DETAILS_PATH,

scripts/initializers/pdp.js

@@ -1,5 +1,5 @@
+/* eslint-disable import/no-cycle */
 /* eslint-disable import/prefer-default-export */
-/* eslint import/no-cycle: [2, { maxDepth: 1 }] */
 
 import { initializers } from '@dropins/tools/initializer.js';
 import { Image, provider as UI } from '@dropins/tools/components.js';
@@ -17,7 +17,7 @@ import {
   loadErrorPage,
 } from '../commerce.js';
 import { getHeaders } from '../configs.js';
-import { fetchPlaceholders } from '../aem.js';
+import { fetchPlaceholders } from '../scripts.js';
 
 export const IMAGES_SIZES = {
   width: 960,

scripts/scripts.js

@@ -20,6 +20,7 @@ import {
   loadSections,
   loadCSS,
   sampleRUM,
+  fetchPlaceholders as _fetchPlaceholders,
 } from './aem.js';
 import { trackHistory } from './commerce.js';
 import initializeDropins from './initializers/index.js';
@@ -356,6 +357,22 @@ export async function fetchIndex(indexFile, pageSize = 500) {
   return newIndex;
 }
 
+/**
+ * Get root path
+ */
+export function getRootPath() {
+  window.ROOT_PATH = window.rootPath || getMetadata('root') || '/';
+  return window.ROOT_PATH;
+}
+
+/**
+ * Fetch Placeholders with multi-store support.
+ */
+export async function fetchPlaceholders() {
+  const lang = getRootPath().replace(/\/$/, '') ?? undefined;
+  return _fetchPlaceholders(lang);
+}
+
 /**
  * Check if consent was given for a specific topic.
  * @param {*} topic Topic identifier