Multi source support for commerce configs and placeholders

blocks/commerce-mini-cart/commerce-mini-cart.js

@@ -5,6 +5,7 @@ import MiniCart from '@dropins/storefront-cart/containers/MiniCart.js';
 import '../../scripts/initializers/cart.js';
 
 import { readBlockConfig } from '../../scripts/aem.js';
+import { localizeLink } from '../../scripts/scripts.js';
 
 export default async function decorate(block) {
   const {
@@ -18,7 +19,7 @@ export default async function decorate(block) {
   return provider.render(MiniCart, {
     routeEmptyCartCTA: startShoppingURL ? () => startShoppingURL : undefined,
     routeCart: cartURL ? () => cartURL : undefined,
-    routeCheckout: checkoutURL ? () => checkoutURL : undefined,
+    routeCheckout: checkoutURL ? () => localizeLink(checkoutURL) : undefined,
     routeProduct: (product) => `/products/${product.url.urlKey}/${product.topLevelSku}`,
   })(block);
 }

blocks/fragment/fragment.js

@@ -7,6 +7,7 @@
 
 import {
   decorateMain,
+  getRootPath,
 } from '../../scripts/scripts.js';
 
 import {
@@ -20,7 +21,9 @@ import {
  */
 export async function loadFragment(path) {
   if (path && path.startsWith('/')) {
-    const resp = await fetch(`${path}.plain.html`);
+    const root = getRootPath().replace(/\/$/, '');
+    const url = `${root}${path}.plain.html`;
+    const resp = await fetch(url);
     if (resp.ok) {
       const main = document.createElement('main');
       main.innerHTML = await resp.text();

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/aem.js

@@ -503,20 +503,35 @@ function decorateSections(main) {
  */
 // eslint-disable-next-line import/prefer-default-export
 async function fetchPlaceholders(prefix = 'default') {
+  const overrides = getMetadata('placeholders') || '';
+  const [fallback, override] = overrides.split('\n');
   window.placeholders = window.placeholders || {};
   if (!window.placeholders[prefix]) {
     window.placeholders[prefix] = new Promise((resolve) => {
-      const url = getMetadata('placeholders') || `${prefix === 'default' ? '' : prefix}/placeholders.json`;
-      fetch(url)
-        .then((resp) => {
+      const url = fallback || `${prefix === 'default' ? '' : prefix}/placeholders.json`;
+      Promise.all([fetch(url), override ? fetch(override) : Promise.resolve()])
+        .then(async ([resp, oResp]) => {
           if (resp.ok) {
-            return resp.json();
+            if (oResp?.ok) {
+              return Promise.all([resp.json(), await oResp.json()]);
+            }
+            return Promise.all([resp.json(), {}]);
           }
           return {};
         })
-        .then((json) => {
+
+        .then(([json, oJson]) => {
           const placeholders = {};
+          // build placeholders object
           json.data.forEach(({ Key, Value }) => {
+            // check for overrides
+            if (oJson?.data) {
+              const overrideItem = oJson.data.find((item) => item.Key === Key);
+              if (overrideItem) {
+                // eslint-disable-next-line no-param-reassign
+                Value = overrideItem.Value;
+              }
+            }
             if (Key) {
               const keys = Key.split('.');
               const lastKey = keys.pop();
@@ -527,10 +542,13 @@ async function fetchPlaceholders(prefix = 'default') {
               target[lastKey] = Value;
             }
           });
+          // cache placeholders
           window.placeholders[prefix] = placeholders;
+          // return placeholders
           resolve(window.placeholders[prefix]);
         })
-        .catch(() => {
+        .catch((error) => {
+          console.error('error loading placeholders', error);
           // error loading placeholders
           window.placeholders[prefix] = {};
           resolve(window.placeholders[prefix]);

scripts/configs.js

@@ -1,3 +1,7 @@
+/* eslint-disable import/no-cycle */
+
+import { getRootPath } from './scripts.js';
+
 const ALLOWED_CONFIGS = ['prod', 'stage', 'dev'];
 
 /**
@@ -29,21 +33,22 @@ export const calcEnvironment = () => {
   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}`);
     if (!configJSON) {
       throw new Error('No config in session storage');
     }
@@ -55,13 +60,13 @@ const getConfigForEnvironment = async (environment) => {
 
     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 +92,21 @@ export const getConfigValue = async (configParam, environment) => {
 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/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';

scripts/scripts.js

@@ -150,6 +150,7 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  decorateLinks(main);
 }
 
 function preloadFile(href, as) {
@@ -356,6 +357,45 @@ 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;
+}
+
+/**
+ * Decorates links.
+ * @param {Element} main The main element
+ */
+export function decorateLinks(main) {
+  const root = getRootPath();
+  if (root === '/') return;
+  const links = main.querySelectorAll('a');
+
+  links.forEach((link) => {
+    if (link.href.startsWith('//' || link.href.startsWith(root))) return;
+
+    if (
+      link.href.startsWith('/')
+      || link.href.startsWith(window.location.origin)
+    ) {
+      const url = new URL(link.href, window.location.origin);
+      link.href = `${root}${url.pathname.substring(1)}${url.search}${url.hash}`;
+    }
+  });
+}
+
+/**
+ * Decorates links.
+ * @param {string} [url] url to be localized
+ */
+export function localizeLink(link) {
+  const root = getRootPath().replace(/\/$/, '');
+  return `${root}${link}`;
+}
+
 /**
  * Check if consent was given for a specific topic.
  * @param {*} topic Topic identifier