diff --git a/libs/features/personalization/personalization.js b/libs/features/personalization/personalization.js index 6598613dbb..66fd2fbd69 100644 --- a/libs/features/personalization/personalization.js +++ b/libs/features/personalization/personalization.js @@ -148,6 +148,17 @@ const createFrag = (el, action, content, manifestId, targetManifestId) => { return frag; }; +export function replacePlaceholders(value, placeholders) { + let val = value; + const matches = val.match(/{{(.*?)}}/g); + if (!matches) return val; + matches.forEach((match) => { + const key = match.replace(/{{|}}/g, '').trim(); + if (placeholders[key]) val = val.replace(match, placeholders[key]); + }); + return val; +} + export const createContent = (el, content, manifestId, targetManifestId, action, modifiers) => { if (action === 'replace') { addIds(el, manifestId, targetManifestId); @@ -158,11 +169,16 @@ export const createContent = (el, content, manifestId, targetManifestId, action, return el; } if (getSelectorType(content) !== 'fragment') { + const config = getConfig(); + const newContent = replacePlaceholders(content, config.placeholders); + if (action === 'replace') { - el.innerHTML = content; + el.innerHTML = newContent; + return el; } - const container = createTag('div', {}, content); + + const container = createTag('div', {}, newContent); addIds(container, manifestId, targetManifestId); return container; } @@ -926,17 +942,6 @@ export function handleFragmentCommand(command, a) { return false; } -function replacePlaceholders(value, placeholders) { - let val = value; - const matches = val.match(/{{(.*?)}}/g); - if (!matches) return val; - matches.forEach((match) => { - const key = match.replace(/{{|}}/g, '').trim(); - if (placeholders[key]) val = val.replace(match, placeholders[key]); - }); - return val; -} - export function parseNestedPlaceholders({ placeholders }) { if (!placeholders) return; Object.entries(placeholders).forEach(([key, value]) => { diff --git a/test/features/personalization/parseNestedPlaceholders.test.js b/test/features/personalization/parseNestedPlaceholders.test.js index e53d080d92..43a5d05071 100644 --- a/test/features/personalization/parseNestedPlaceholders.test.js +++ b/test/features/personalization/parseNestedPlaceholders.test.js @@ -1,19 +1,31 @@ import { expect } from '@esm-bundle/chai'; -import { parseNestedPlaceholders } from '../../../libs/features/personalization/personalization.js'; +import { parseNestedPlaceholders, createContent } from '../../../libs/features/personalization/personalization.js'; +import { getConfig } from '../../../libs/utils/utils.js'; -const config = { - placeholders: { - 'promo-product-name': 'CC All Apps', - 'promo-header': 'Buy now and save {{promo-discount}}% off {{promo-product-name}}.', - 'promo-discount': '50', - 'promo-description': 'For just {{promo-price}}, get 20+...', - 'promo-price': 'US$49.99', - }, +const config = getConfig(); +config.placeholders = { + 'promo-product-name': 'CC All Apps', + 'promo-header': 'Buy now and save {{promo-discount}}% off {{promo-product-name}}.', + 'promo-discount': '50', + 'promo-description': 'For just {{promo-price}}, get 20+...', + 'promo-price': 'US$49.99', }; -describe('test different values', () => { +describe('test different values for parseNestedPlaceholders', () => { it('should update placeholders', () => { parseNestedPlaceholders(config); expect(config.placeholders['promo-header']).to.equal('Buy now and save 50% off CC All Apps.'); expect(config.placeholders['promo-description']).to.equal('For just US$49.99, get 20+...'); }); }); +describe('test createContent', () => { + const el = document.createElement('div'); + it('append action', () => { + const newContent = createContent(el, '{{promo-discount}}', false, false, 'append', []); + expect(newContent.innerHTML).to.equal('50'); + }); + it('replace action', () => { + el.innerHTML = 'Hello World'; + const newContent = createContent(el, '{{promo-discount}}', false, false, 'replace', []); + expect(newContent.innerHTML).to.equal('50'); + }); +});