[MWPW-140627] [MEP] Replace MEP placeholders when loading fragments (#…

…3193) Initial checkin. Replace Fragment placeholders.
adobecom · Nov 14, 2024 · 0e407ec · 0e407ec
1 parent c834273
commit 0e407ec
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/libs/blocks/fragment/fragment.js b/libs/blocks/fragment/fragment.js
@@ -63,7 +63,7 @@ function replaceDotMedia(path, doc) {
 }
 
 export default async function init(a) {
-  const { decorateArea, mep } = getConfig();
+  const { decorateArea, mep, placeholders } = getConfig();
   let relHref = localizeLink(a.href);
   let inline = false;
 
@@ -125,13 +125,16 @@ export default async function init(a) {
   }
 
   updateFragMap(fragment, a, relHref);
-  if (a.dataset.manifestId || a.dataset.adobeTargetTestid) {
-    const { updateFragDataProps } = await import('../../features/personalization/personalization.js');
-    updateFragDataProps(a, inline, sections, fragment);
-  }
-  if (mep?.commands?.length) {
-    const { handleCommands } = await import('../../features/personalization/personalization.js');
-    handleCommands(mep?.commands, fragment, false, true);
+  if (a.dataset.manifestId
+    || a.dataset.adobeTargetTestid
+    || mep?.commands?.length
+    || placeholders) {
+    const { updateFragDataProps, handleCommands, replacePlaceholders } = await import('../../features/personalization/personalization.js');
+    if (a.dataset.manifestId || a.dataset.adobeTargetTestid) {
+      updateFragDataProps(a, inline, sections, fragment);
+    }
+    if (mep?.commands?.length) handleCommands(mep?.commands, fragment, false, true);
+    if (placeholders) fragment.innerHTML = replacePlaceholders(fragment.innerHTML, placeholders);
   }
   if (inline) {
     insertInlineFrag(sections, a, relHref, mep);

diff --git a/test/blocks/fragment/fragment.test.js b/test/blocks/fragment/fragment.test.js
@@ -16,6 +16,7 @@ const config = {
   contentRoot: `${window.location.origin}${getLocale(locales).prefix}`,
   decorateArea,
   locales,
+  placeholders: { placeholdercheck: 'hello world' },
   mep: {
     commands: [
       {
@@ -53,6 +54,9 @@ describe('Fragments', () => {
     await getFragment(a);
     const h1 = document.querySelector('h1');
     expect(h1).to.exist;
+    const p = document.querySelector('#placeholdercheck');
+    expect(p).to.exist;
+    expect(p.innerHTML).to.equal('hello world');
   });
 
   it('Loads a fragment with cache control', async () => {

diff --git a/test/blocks/fragment/mocks/fragments/fragment.plain.html b/test/blocks/fragment/mocks/fragments/fragment.plain.html
@@ -1,3 +1,4 @@
 <div>
-  <h1>Hello World</1h>
+  <h1>Hello World</h1>
+  <p id="placeholdercheck">{{placeholdercheck}}</p>
 </div>