placeholders integration (#166)

* placeholders integration * log error * preload and cache placeholders * Update head.html
hlxsites · Nov 6, 2024 · a3b5808 · a3b5808
1 parent ceaa1e8
commit a3b5808
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 43 deletions.
diff --git a/scripts/aem.js b/scripts/aem.js
@@ -511,11 +511,17 @@ async function fetchPlaceholders(prefix = 'default') {
         })
         .then((json) => {
           const placeholders = {};
-          json.data
-            .filter((placeholder) => placeholder.Key)
-            .forEach((placeholder) => {
-              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
-            });
+          json.data.forEach(({ Key, Value }) => {
+            if (Key) {
+              const keys = Key.split('.');
+              const lastKey = keys.pop();
+              const target = keys.reduce((obj, key) => {
+                obj[key] = obj[key] || {};
+                return obj[key];
+              }, placeholders);
+              target[lastKey] = Value;
+            }
+          });
           window.placeholders[prefix] = placeholders;
           resolve(window.placeholders[prefix]);
         })

diff --git a/scripts/initializers/account.js b/scripts/initializers/account.js
@@ -1,7 +1,16 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-account/api.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 initializeDropin(async () => {
-  await initializers.mountImmediately(initialize, {});
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
+  await initializers.mountImmediately(initialize, { langDefinitions });
 })();
diff --git a/scripts/initializers/auth.js b/scripts/initializers/auth.js
@@ -2,7 +2,16 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-auth/api.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 initializeDropin(async () => {
-  await initializers.mountImmediately(initialize, {});
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
+  await initializers.mountImmediately(initialize, { langDefinitions });
 })();
diff --git a/scripts/initializers/cart.js b/scripts/initializers/cart.js
@@ -2,7 +2,16 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-cart/api.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 initializeDropin(async () => {
-  await initializers.mountImmediately(initialize, {});
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
+  await initializers.mountImmediately(initialize, { langDefinitions });
 })();
diff --git a/scripts/initializers/checkout.js b/scripts/initializers/checkout.js
@@ -1,7 +1,16 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-checkout/api.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 initializeDropin(async () => {
-  await initializers.mountImmediately(initialize, {});
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
+  await initializers.mountImmediately(initialize, { langDefinitions });
 })();
diff --git a/scripts/initializers/order-confirmation.js b/scripts/initializers/order-confirmation.js
@@ -1,7 +1,16 @@
 import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-order-confirmation/api.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 initializeDropin(async () => {
-  await initializers.mountImmediately(initialize, {});
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
+  await initializers.mountImmediately(initialize, { langDefinitions });
 })();
diff --git a/scripts/initializers/order.js b/scripts/initializers/order.js
@@ -3,6 +3,7 @@ import { initializers } from '@dropins/tools/initializer.js';
 import { initialize } from '@dropins/storefront-order/api.js';
 import { checkIsAuthenticated } from '../configs.js';
 import { initializeDropin } from './index.js';
+import { fetchPlaceholders } from '../aem.js';
 
 import {
   CUSTOMER_ORDER_DETAILS_PATH,
@@ -25,6 +26,14 @@ initializeDropin(async () => {
 })();
 
 async function handleUserOrdersRedirects(pathname, isAccountPage, orderRef, isTokenProvided) {
+  const labels = await fetchPlaceholders();
+
+  const langDefinitions = {
+    default: {
+      ...labels,
+    },
+  };
+
   let targetPath = null;
   if (pathname.includes(CUSTOMER_ORDERS_PATH)) {
     return;
@@ -60,6 +69,7 @@ async function handleUserOrdersRedirects(pathname, isAccountPage, orderRef, isTo
     window.location.href = targetPath;
   } else {
     await initializers.mountImmediately(initialize, {
+      langDefinitions,
       orderRef,
     });
   }

diff --git a/scripts/initializers/pdp.js b/scripts/initializers/pdp.js
@@ -23,46 +23,16 @@ await initializeDropin(async () => {
   const sku = getSkuFromUrl();
   window.getProductPromise = getProduct(sku);
 
-  const [product, placeholders] = await Promise.all([
+  const [product, labels] = await Promise.all([
     window.getProductPromise,
     fetchPlaceholders(),
   ]);
 
   const langDefinitions = {
     default: {
-      PDP: {
-        Product: {
-          Incrementer: { label: placeholders.pdpProductIncrementer },
-          OutOfStock: { label: placeholders.pdpProductOutofstock },
-          AddToCart: { label: placeholders.pdpProductAddtocart },
-          Details: { label: placeholders.pdpProductDetails },
-          RegularPrice: { label: placeholders.pdpProductRegularprice },
-          SpecialPrice: { label: placeholders.pdpProductSpecialprice },
-          PriceRange: {
-            From: { label: placeholders.pdpProductPricerangeFrom },
-            To: { label: placeholders.pdpProductPricerangeTo },
-          },
-          Image: { label: placeholders.pdpProductImage },
-        },
-        Swatches: {
-          Required: { label: placeholders.pdpSwatchesRequired },
-        },
-        Carousel: {
-          label: placeholders.pdpCarousel,
-          Next: { label: placeholders.pdpCarouselNext },
-          Previous: { label: placeholders.pdpCarouselPrevious },
-          Slide: { label: placeholders.pdpCarouselSlide },
-          Controls: {
-            label: placeholders.pdpCarouselControls,
-            Button: { label: placeholders.pdpCarouselControlsButton },
-          },
-        },
-        Overlay: {
-          Close: { label: placeholders.pdpOverlayClose },
-        },
-      },
+      ...labels,
       Custom: {
-        AddingToCart: { label: placeholders.pdpCustomAddingtocart },
+        AddingToCart: { label: labels.pdpCustomAddingtocart },
       },
     },
   };