MWPW-153810 media image is seen loaded twice in product page urls in …

…desktop (#2715) * Update utils.js * Update utils.js * Update utils.js * Update utils.js * Update utils.js * Update utils.js * Update body.html * Update utils.test.js
adobecom · Aug 14, 2024 · 3c9774c · 3c9774c
1 parent 01da50f
commit 3c9774c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -730,10 +730,30 @@ async function decorateIcons(area, config) {
 async function decoratePlaceholders(area, config) {
   const el = area.querySelector('main') || area;
   const regex = /{{(.*?)}}|%7B%7B(.*?)%7D%7D/g;
-  const found = regex.test(el.innerHTML);
-  if (!found) return;
+  const walker = document.createTreeWalker(
+    el,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        const a = regex.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        regex.lastIndex = 0;
+        return a;
+      },
+    },
+  );
+  const nodes = [];
+  let node = walker.nextNode();
+  while (node !== null) {
+    nodes.push(node);
+    node = walker.nextNode();
+  }
+  if (!nodes.length) return;
   const { replaceText } = await import('../features/placeholders.js');
-  el.innerHTML = await replaceText(el.innerHTML, config, regex);
+  const replaceNodes = nodes.map(async (textNode) => {
+    textNode.nodeValue = await replaceText(textNode.nodeValue, config, regex);
+    textNode.nodeValue = textNode.nodeValue.replace(/&nbsp;/g, '\u00A0');
+  });
+  await Promise.all(replaceNodes);
 }
 
 async function loadFooter() {

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -47,6 +47,6 @@
   <!-- Default content -->
   <div>
     <p>I'm not a blockhead.</p>
-    <p>{{nothing-to-see-here}}</p>
+    <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
 </main>
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -191,7 +191,7 @@ describe('Utils', () => {
     it('Decorates placeholder', () => {
       const paragraphs = [...document.querySelectorAll('p')];
       const lastPara = paragraphs.pop();
-      expect(lastPara.textContent).to.equal('nothing to see here');
+      expect(lastPara.textContent).to.equal(' inkl. MwSt.');
     });
 
     it('Decorates meta helix url', () => {