${offer.content?.body?.content}
+ `; + return offerElement; +} + +export default function decorate(block) { + const content = block.textContent.trim(); + const editedContent = content.replace('Personalization Card:', '').trim(); + if(!isValidJSON(editedContent)) return; + const data = JSON.parse(editedContent); + block.children[0].remove(); + data.forEach((offer) => { + const cardOffer = createCardOffer(offer); + block.append(cardOffer); + }); + block.append(content); +} \ No newline at end of file diff --git a/blocks/personalization-cbe/personalization-cbe.css b/blocks/personalization-cbe/personalization-cbe.css new file mode 100644 index 00000000..ac6a338b --- /dev/null +++ b/blocks/personalization-cbe/personalization-cbe.css @@ -0,0 +1,28 @@ +.personalization-cbe { + display: grid; + grid-template-columns: 1fr; + grid-column-gap: 20px; + margin-top: 20px; + + > *:first-child { + grid-column: span 2; + } + + > *:not(:first-child) { + grid-column: span 1; + } + + > *:only-child { + grid-column: span 2; + } + + @media (min-width: 600px) { + grid-template-columns: 1fr 1fr; + } + + .cbe-offer { + border: 1px solid #2f78c4; + padding: 20px; + margin-block-end: 20px; + } +} \ No newline at end of file diff --git a/blocks/personalization-cbe/personalization-cbe.js b/blocks/personalization-cbe/personalization-cbe.js new file mode 100644 index 00000000..fa35b2cc --- /dev/null +++ b/blocks/personalization-cbe/personalization-cbe.js @@ -0,0 +1,30 @@ +function isValidJSON(str) { + try { + JSON.parse(str); + return true; + } catch (e) { + return false; + } +} + +function createCbeOffer(offer) { + const offerElement = document.createElement('div'); + offerElement.classList.add('cbe-offer'); + offerElement.innerHTML = ` +${offer.content?.content}
+ `; + return offerElement; +} + +export default function decorate(block) { + const content = block.textContent.trim(); + const editedContent = content.replace('Personalization CBE:', '').trim(); + if(!isValidJSON(editedContent)) return; + const data = JSON.parse(editedContent); + block.children[0].remove(); + data.forEach((offer) => { + const cbeOffer = createCbeOffer(offer); + block.append(cbeOffer); + }); + block.append(content); +} \ No newline at end of file diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css new file mode 100644 index 00000000..edb29413 --- /dev/null +++ b/blocks/personalization-ed/personalization-ed.css @@ -0,0 +1,28 @@ +.personalization-ed { + display: grid; + grid-template-columns: 1fr; + grid-column-gap: 20px; + margin-top: 20px; + + > *:first-child { + grid-column: span 2; + } + + > *:not(:first-child) { + grid-column: span 1; + } + + > *:only-child { + grid-column: span 2; + } + + @media (min-width: 600px) { + grid-template-columns: 1fr 1fr; + } + + .ed-offer { + border: 1px solid #06c7cc; + padding: 20px; + margin-block-end: 20px; + } +} \ No newline at end of file diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js new file mode 100644 index 00000000..4a18d117 --- /dev/null +++ b/blocks/personalization-ed/personalization-ed.js @@ -0,0 +1,30 @@ +function isValidJSON(str) { + try { + JSON.parse(str); + return true; + } catch (e) { + return false; + } +} + +function createEdOffer(offer) { + const offerElement = document.createElement('div'); + offerElement.classList.add('ed-offer'); + offerElement.innerHTML = ` +${offer.content?.content}
+ `; + return offerElement; +} + +export default function decorate(block) { + const content = block.textContent.trim(); + const editedContent = content.replace('Personalization ED:', '').trim(); + if(!isValidJSON(editedContent)) return; + const data = JSON.parse(editedContent); + block.children[0].remove(); + data.forEach((offer) => { + const edOffer = createEdOffer(offer); + block.append(edOffer); + }); + block.append(content); +} \ No newline at end of file From f970d1297a92533b45e1a2a51f65afb010aa825b Mon Sep 17 00:00:00 2001 From: Joan Beltran${offer.content?.body?.content}
+${offer.body?.content}
`; return offerElement; } @@ -29,11 +29,11 @@ export default function decorate(block) { block.children[0].remove(); data.forEach((offer) => { if (Array.isArray(offer.content)) { - offer.forEach((subOffer) => { + offer.content.forEach((subOffer) => { handleOffers(block, subOffer); }); } else { - handleOffers(block, offer); + handleOffers(block, offer.content); } }); block.append(content); diff --git a/blocks/personalization-cbe/personalization-cbe.js b/blocks/personalization-cbe/personalization-cbe.js index c5dee981..860ad793 100644 --- a/blocks/personalization-cbe/personalization-cbe.js +++ b/blocks/personalization-cbe/personalization-cbe.js @@ -11,7 +11,7 @@ function createCbeOffer(offer) { const offerElement = document.createElement('div'); offerElement.classList.add('cbe-offer'); offerElement.innerHTML = ` -${offer.content?.content}
+${offer.content}
`; return offerElement; } @@ -29,11 +29,11 @@ export default function decorate(block) { block.children[0].remove(); data.forEach((offer) => { if (Array.isArray(offer.content)) { - offer.forEach((subOffer) => { + offer.content.forEach((subOffer) => { handleOffers(block, subOffer); }); } else { - handleOffers(block, offer); + handleOffers(block, offer.content); } }); block.append(content); diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js index b2e91f68..6fdef2ed 100644 --- a/blocks/personalization-ed/personalization-ed.js +++ b/blocks/personalization-ed/personalization-ed.js @@ -11,7 +11,7 @@ function createEdOffer(offer) { const offerElement = document.createElement('div'); offerElement.classList.add('ed-offer'); offerElement.innerHTML = ` -${offer.content?.content}
+${offer.content}
`; return offerElement; } @@ -29,11 +29,11 @@ export default function decorate(block) { block.children[0].remove(); data.forEach((offer) => { if (Array.isArray(offer.content)) { - offer.forEach((subOffer) => { + offer.content.forEach((subOffer) => { handleOffers(block, subOffer); }); } else { - handleOffers(block, offer); + handleOffers(block, offer.content); } }); block.append(content); From e7608eec19f73e81a27bf0c2bb9bdc37f9a43db4 Mon Sep 17 00:00:00 2001 From: Joan Beltran${offer.content}
`; return offerElement; @@ -29,5 +31,5 @@ export default function decorate(block) { handleOffers(block, offer.content); } }); - block.append(content); + // block.append(content); } \ No newline at end of file diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css index edb29413..f4c06740 100644 --- a/blocks/personalization-ed/personalization-ed.css +++ b/blocks/personalization-ed/personalization-ed.css @@ -1,11 +1,19 @@ .personalization-ed { display: grid; grid-template-columns: 1fr; - grid-column-gap: 20px; - margin-top: 20px; + column-gap: 20px; + row-gap: 40px; + margin-block-end: 80px; > *:first-child { grid-column: span 2; + display: flex; + column-gap: 20px; + align-items: center; + + img { + width: calc(50% - 10px); + } } > *:not(:first-child) { @@ -21,8 +29,8 @@ } .ed-offer { - border: 1px solid #06c7cc; - padding: 20px; - margin-block-end: 20px; + h2 { + margin-block: 0; + } } } \ No newline at end of file diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js index aa4e1c0a..cc1f5b96 100644 --- a/blocks/personalization-ed/personalization-ed.js +++ b/blocks/personalization-ed/personalization-ed.js @@ -1,9 +1,11 @@ -import { isValidJSON } from '../../scripts/personalisation-helpers.js'; +import { isValidJSON, getImageURL } from '../../scripts/personalisation-helpers.js'; function createEdOffer(offer) { const offerElement = document.createElement('div'); + const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium'; offerElement.classList.add('ed-offer'); offerElement.innerHTML = ` +${offer.content}
`; return offerElement; @@ -29,5 +31,5 @@ export default function decorate(block) { handleOffers(block, offer.content); } }); - block.append(content); + // block.append(content); } \ No newline at end of file diff --git a/scripts/personalisation-helpers.js b/scripts/personalisation-helpers.js index ed79e483..43df337c 100644 --- a/scripts/personalisation-helpers.js +++ b/scripts/personalisation-helpers.js @@ -11,7 +11,17 @@ function isValidJSON(str) { } } +function getImageURL(imageUrl) { + const validHosts = ['www.netcentric.biz', 'rockstar.moment-innovation.com'] + const url = new URL(imageUrl); + if (validHosts.includes(url.hostname)) { + return url.pathname; + } + return imageUrl; +} + export { handleHardReload, - isValidJSON + isValidJSON, + getImageURL } \ No newline at end of file From ea396c440b07ff2e42d1aa25f7b1d6db630ffa15 Mon Sep 17 00:00:00 2001 From: Joan Beltran
+ 
+
+
${offer.content}
`; return offerElement; diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css index f4c06740..36a7a43d 100644 --- a/blocks/personalization-ed/personalization-ed.css +++ b/blocks/personalization-ed/personalization-ed.css @@ -7,12 +7,28 @@ > *:first-child { grid-column: span 2; - display: flex; - column-gap: 20px; - align-items: center; - img { - width: calc(50% - 10px); + .img-wrap { + position: relative; + } + + .img-mask { + position: absolute; + top: 0; + left: auto; + width: 100%; + height: 100%; + background-color: #000; + opacity: 0.5; + } + + h2 { + width: 50%; + position: absolute; + top: 50%; + z-index: 2; + left: 20px; + color: #fff; } } @@ -29,8 +45,14 @@ } .ed-offer { + position: relative; + h2 { margin-block: 0; } } + + img { + display: block; + } } \ No newline at end of file diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js index cc1f5b96..5ec0123c 100644 --- a/blocks/personalization-ed/personalization-ed.js +++ b/blocks/personalization-ed/personalization-ed.js @@ -5,7 +5,10 @@ function createEdOffer(offer) { const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium'; offerElement.classList.add('ed-offer'); offerElement.innerHTML = ` -
+
+
+
${offer.content}
`; return offerElement; From 8e591e3daf8a73ed3f3fb38af1e19733b3975490 Mon Sep 17 00:00:00 2001 From: Joan Beltran${offer.body?.content}
+${offer.body?.text}
`; return offerElement; } diff --git a/blocks/personalization-cbe/personalization-cbe.css b/blocks/personalization-cbe/personalization-cbe.css index 9a3f2822..642ffd0f 100644 --- a/blocks/personalization-cbe/personalization-cbe.css +++ b/blocks/personalization-cbe/personalization-cbe.css @@ -22,17 +22,27 @@ opacity: 0.4; } - h2 { + .offer-details { width: 50%; position: absolute; - top: 50%; + top: 40%; z-index: 2; left: 20px; + } + + h2, p { color: #fff; font-weight: bold; - font-size: 48px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } + + h2 { + font-size: 48px; + } + + p { + font-size: 24px; + } } > *:not(:first-child) { diff --git a/blocks/personalization-cbe/personalization-cbe.js b/blocks/personalization-cbe/personalization-cbe.js index 6b77ed2a..7accb17b 100644 --- a/blocks/personalization-cbe/personalization-cbe.js +++ b/blocks/personalization-cbe/personalization-cbe.js @@ -3,13 +3,17 @@ import { isValidJSON, getImageURL } from '../../scripts/personalisation-helpers. function createCbeOffer(offer) { const offerElement = document.createElement('div'); const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium'; + const subject = offer.subject ? `${offer.subject}
` : ''; offerElement.classList.add('cbe-offer'); offerElement.innerHTML = `${offer.content}
+
+ ${subject}
+
`;
return offerElement;
}
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index 18b79c54..b6dd08b7 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -22,17 +22,27 @@
opacity: 0.4;
}
- h2 {
+ .offer-details {
width: 50%;
position: absolute;
- top: 50%;
+ top: 40%;
z-index: 2;
left: 20px;
+ }
+
+ h2, p {
color: #fff;
font-weight: bold;
- font-size: 48px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
+
+ h2 {
+ font-size: 48px;
+ }
+
+ p {
+ font-size: 24px;
+ }
}
> *:not(:first-child) {
diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js
index 5ec0123c..4bd33f51 100644
--- a/blocks/personalization-ed/personalization-ed.js
+++ b/blocks/personalization-ed/personalization-ed.js
@@ -3,13 +3,17 @@ import { isValidJSON, getImageURL } from '../../scripts/personalisation-helpers.
function createEdOffer(offer) {
const offerElement = document.createElement('div');
const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium';
+ const subject = offer.subject ? `${offer.text}
+${offer.subject}
` : ''; offerElement.classList.add('ed-offer'); offerElement.innerHTML = `${offer.content}
+
+ ${subject}
+
`;
return offerElement;
}
From 44ec09171085060d3100708442e302dec1b9e2b3 Mon Sep 17 00:00:00 2001
From: Joan Beltran ${offer.text}
+${offer.subject}
` : ''; - offerElement.classList.add('cbe-offer'); - offerElement.innerHTML = ` -
-
-
-
-
- ${subject}
-
- `;
- return offerElement;
-}
-
-function handleOffers(block, offer) {
- const cbeOffer = createCbeOffer(offer);
- block.append(cbeOffer);
-}
+import { isValidJSON } from '../../scripts/personalisation-helpers.js';
export default function decorate(block) {
const content = block.textContent.trim();
@@ -29,14 +6,6 @@ export default function decorate(block) {
if(!isValidJSON(editedContent)) return;
const data = JSON.parse(editedContent);
block.children[0].remove();
- data.forEach((offer) => {
- if (Array.isArray(offer.content)) {
- offer.content.forEach((subOffer) => {
- handleOffers(block, subOffer);
- });
- } else {
- handleOffers(block, offer.content);
- }
- });
- // block.append(content);
+ window.personalizationData = {...data[0]};
+ console.log(data)
}
\ No newline at end of file
diff --git a/scripts/login.js b/scripts/login.js
index a2a2ca34..731ca30e 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -1,4 +1,4 @@
-import { handleHardReload } from './personalisation-helpers.js';
+import { handleHardReload, getImageURL } from './personalisation-helpers.js';
let userLoggedIn = false;
@@ -82,34 +82,45 @@ function createDialog() {
return dialog;
}
-function setUpButtonText(button) {
- button.textContent = userLoggedIn ? 'Log Out' : 'Log In';
+function setUpButtonTextAndLogo(button, logo) {
+ const firstName = window.personalizationData.content?.firstName ? `${window.personalizationData.content.firstName},` : '';
+ const imageSrc = window.personalizationData.content?.profileImageURL ? window.personalizationData.content.profileImageURL : '';
+ button.textContent = userLoggedIn ? `${firstName} Log Out` : 'Log In';
+ if (imageSrc) {
+ setTimeout(() => {
+ logo.classList.add('personalized');
+ logo.innerHTML = `${offer.text}
-${offer.body?.text}
+ `; return offerElement; } @@ -21,6 +26,7 @@ export default function decorate(block) { block.parentElement.remove(); return; } + loadCSS('/blocks/hero/hero.css'); const data = JSON.parse(editedContent); block.children[0].remove(); data.forEach((offer) => { From 56d52c2ea8362ab6aa660a8af0af87f84a6ed0db Mon Sep 17 00:00:00 2001 From: Joan Beltran${offer.title?.content}
` : ''; + const text = offer.body?.content ? `${offer.body?.content}
` : ''; + const button = offer.buttons[0]?.text?.content ? `` : ''; + const image = offer.image?.url ? `${offer.title?.content}
-${offer.body?.content}
- ${offer.buttons[0]?.text?.content} + ${image} +
+ ${title}
+ ${text}
+ ${button}
+
`;
return offerElement;
}
function handleOffers(block, offer) {
const cardOffer = createCardOffer(offer);
+ addChevronToButtons(block);
block.append(cardOffer);
}
@@ -24,10 +32,8 @@ export default function decorate(block) {
block.parentElement.remove();
return;
}
- loadCSS('/blocks/hero/hero.css');
const data = JSON.parse(editedContent);
block.children[0].remove();
- console.log(data)
data.forEach((offer) => {
if (Array.isArray(offer.content)) {
offer.content.forEach((subOffer) => {
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index b6dd08b7..6407f5fe 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -6,36 +6,10 @@
margin-block-end: 80px;
> *:first-child {
- grid-column: span 2;
-
.img-wrap {
position: relative;
}
- .img-mask {
- position: absolute;
- top: 0;
- left: auto;
- width: 100%;
- height: 100%;
- background-color: #000;
- opacity: 0.4;
- }
-
- .offer-details {
- width: 50%;
- position: absolute;
- top: 40%;
- z-index: 2;
- left: 20px;
- }
-
- h2, p {
- color: #fff;
- font-weight: bold;
- text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
- }
-
h2 {
font-size: 48px;
}
@@ -43,6 +17,34 @@
p {
font-size: 24px;
}
+
+ @media (min-width: 900px) {
+ grid-column: span 2;
+
+ .img-mask {
+ position: absolute;
+ top: 0;
+ left: auto;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ opacity: 0.4;
+ }
+
+ .offer-details {
+ width: 50%;
+ position: absolute;
+ top: 40%;
+ z-index: 2;
+ left: 20px;
+ }
+
+ h2, p {
+ color: #fff;
+ font-weight: bold;
+ text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+ }
+ }
}
> *:not(:first-child) {
@@ -53,12 +55,13 @@
grid-column: span 2;
}
- @media (min-width: 600px) {
+ @media (min-width: 900px) {
grid-template-columns: 1fr 1fr;
}
.ed-offer {
position: relative;
+ margin-inline: 20px;
h2 {
margin-block: 0;
diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js
index cde07c82..a7fa3f4e 100644
--- a/blocks/personalization-ed/personalization-ed.js
+++ b/blocks/personalization-ed/personalization-ed.js
@@ -4,6 +4,7 @@ function createEdOffer(offer) {
const offerElement = document.createElement('div');
const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium';
const subject = offer.subject ? `${offer.subject}
` : ''; + const button = offer.buttonText ? `` : ''; offerElement.classList.add('ed-offer'); offerElement.innerHTML = `
@@ -13,6 +14,7 @@ function createEdOffer(offer) {
Date: Thu, 13 Mar 2025 16:38:27 +0100
Subject: [PATCH 23/33] text sizes
---
blocks/personalization-ed/personalization-ed.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index 6407f5fe..1854a6eb 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -11,11 +11,11 @@
}
h2 {
- font-size: 48px;
+ font-size: 38px;
}
p {
- font-size: 24px;
+ font-size: 30px;
}
@media (min-width: 900px) {
From 4f750c958a87aa0be7147d7ce2e089cad7f75b5d Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Thu, 13 Mar 2025 17:28:08 +0100
Subject: [PATCH 24/33] big text space
---
blocks/personalization-ed/personalization-ed.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index 1854a6eb..6d04d5c9 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -32,7 +32,7 @@
}
.offer-details {
- width: 50%;
+ width: 60%;
position: absolute;
top: 40%;
z-index: 2;
From d20a6c5d4f71fc8c9917c78e492ccb5509535747 Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Thu, 13 Mar 2025 17:48:51 +0100
Subject: [PATCH 25/33] big text space
---
blocks/personalization-ed/personalization-ed.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index 6d04d5c9..28fdffc3 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -32,7 +32,7 @@
}
.offer-details {
- width: 60%;
+ width: 65%;
position: absolute;
top: 40%;
z-index: 2;
From c6bf3afc684e7e33d9fe683525410919cb8f722f Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Thu, 13 Mar 2025 17:50:34 +0100
Subject: [PATCH 26/33] big text space
---
blocks/personalization-ed/personalization-ed.css | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/blocks/personalization-ed/personalization-ed.css b/blocks/personalization-ed/personalization-ed.css
index 28fdffc3..b37c879b 100644
--- a/blocks/personalization-ed/personalization-ed.css
+++ b/blocks/personalization-ed/personalization-ed.css
@@ -32,7 +32,6 @@
}
.offer-details {
- width: 65%;
position: absolute;
top: 40%;
z-index: 2;
@@ -45,6 +44,12 @@
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
}
+
+ @media (min-width: 1200px) {
+ .offer-details {
+ width: 65%;
+ }
+ }
}
> *:not(:first-child) {
From 7e020dbb0fd4c39b22027daee8880ed0ede555ae Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Fri, 14 Mar 2025 13:13:02 +0100
Subject: [PATCH 27/33] remove custom image flickr
---
blocks/header/header.js | 14 +++++++++++++-
scripts/login.js | 15 ++++-----------
2 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/blocks/header/header.js b/blocks/header/header.js
index 60c6fdca..d8a77540 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,6 +1,7 @@
import { decorateIcons, getMetadata, getLanguagePath } from '../../scripts/lib-franklin.js';
import { addChevronToButtons } from '../../scripts/scripts.js';
import initLogIn from '../../scripts/login.js';
+import { getImageURL } from '../../scripts/personalisation-helpers.js';
const mobileBreakpoint = 900;
let globalWindowWidth = window.innerWidth;
@@ -142,13 +143,24 @@ export default async function decorate(block) {
// fetch nav content
const resp = await fetch(`${getLanguagePath()}${getNavPath()}.plain.html`);
if (resp.ok) {
- const html = await resp.text();
+ let html = await resp.text();
const isCampaignTemplate = document.querySelector('meta[content="campaign"]');
// decorate nav DOM
const nav = document.createElement('nav');
+ if (window.personalizationData.content?.profileImageURL) {
+ const classes = 'icon icon-netcentric-logo icon-decorated personalized';
+ const url = getImageURL(window.personalizationData.content.profileImageURL);
+ const altText = window.personalizationData.content?.firstName || 'Netcentric logo';
+ html = html.replace('', `
+
+ 
+
+ `);
+ }
nav.innerHTML = html;
+
const classes = isCampaignTemplate ? ['brand'] : ['brand', 'sections', 'search', 'tools'];
classes.forEach((e, j) => {
const section = nav.children[j];
diff --git a/scripts/login.js b/scripts/login.js
index b3957198..831f939f 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -82,16 +82,9 @@ function createDialog() {
return dialog;
}
-function setUpButtonTextAndLogo(button, logo) {
+function setUpButtonText(button) {
const firstName = window.personalizationData.content?.firstName ? `${window.personalizationData.content.firstName},` : '';
- const imageSrc = window.personalizationData.content?.profileImageURL ? window.personalizationData.content.profileImageURL : '';
button.textContent = userLoggedIn ? `${firstName} Log Out` : 'Log In';
- if (imageSrc) {
- setTimeout(() => {
- logo.classList.add('personalized');
- logo.innerHTML = `})
`;
- },100);
- }
}
function setUserCookie(data) {
@@ -111,7 +104,7 @@ export default function initLogIn(button) {
const logo = document.querySelector('.icon-netcentric-logo');
window.personalizationData = window.personalizationData || {};
userLoggedIn = getCookie('ncUser');
- setUpButtonTextAndLogo(button, logo);
+ setUpButtonText(button);
button.href = '#';
button.addEventListener('click', (e) => {
@@ -120,7 +113,7 @@ export default function initLogIn(button) {
if (userLoggedIn) {
document.cookie = 'userchanged=true';
removeUserCookie();
- setUpButtonTextAndLogo(button, logo);
+ setUpButtonText(button);
handleHardReload(window.location.href);
} else {
resetForm(document.forms.loginForm);
@@ -144,7 +137,7 @@ export default function initLogIn(button) {
if (isValid) {
document.cookie = 'userchanged=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
setUserCookie(email);
- setUpButtonTextAndLogo(button, logo);
+ setUpButtonText(button);
dialog.close();
handleHardReload(window.location.href);
}
From 3c1a9397db1e3b91586afcc4bb75ba5f66e7f228 Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Fri, 14 Mar 2025 14:28:15 +0100
Subject: [PATCH 28/33] fix personalizationdata check
---
blocks/header/header.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/blocks/header/header.js b/blocks/header/header.js
index d8a77540..c413481b 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -148,7 +148,7 @@ export default async function decorate(block) {
// decorate nav DOM
const nav = document.createElement('nav');
- if (window.personalizationData.content?.profileImageURL) {
+ if (window.personalizationData?.content?.profileImageURL) {
const classes = 'icon icon-netcentric-logo icon-decorated personalized';
const url = getImageURL(window.personalizationData.content.profileImageURL);
const altText = window.personalizationData.content?.firstName || 'Netcentric logo';
From d69dbecc82cde541fee170a8e84821c98023d644 Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Mon, 17 Mar 2025 16:36:28 +0100
Subject: [PATCH 29/33] sign in form
---
scripts/login.js | 150 +++++++++++++++++++++++++++++++++++++++++++++-
styles/styles.css | 4 ++
2 files changed, 152 insertions(+), 2 deletions(-)
diff --git a/scripts/login.js b/scripts/login.js
index 831f939f..734a73fc 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -1,4 +1,4 @@
-import { handleHardReload, getImageURL } from './personalisation-helpers.js';
+import { handleHardReload } from './personalisation-helpers.js';
let userLoggedIn = false;
@@ -82,6 +82,152 @@ function createDialog() {
return dialog;
}
+function generateUUID() {
+ let d = new Date().getTime();
+
+ // Use high-precision timer if available
+ if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+ d += performance.now();
+ }
+
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+ const r = (d + Math.random() * 16) % 16 | 0;
+ d = Math.floor(d / 16);
+ return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+ });
+}
+
+async function post(request, callback) {
+ try {
+ const response = await fetch(request);
+ const result = await response.json();
+ console.log("Success:", result);
+ if (callback) callback();
+ } catch (error) {
+ console.error("Error:", error);
+ }
+}
+
+function sentSignInData(form , callback) {
+ const data = {
+ "xdmMeta": {
+ "schemaRef": {
+ "id": "https://ns.adobe.com/netcentricgmbh/schemas/709781f368368fceb6e2fb8c62b4def7ad2d6c2e91f98551",
+ "contentType": "application/vnd.adobe.xed-full+json;version=1"
+ }
+ },
+ "xdmEntity": {
+ "_id": generateUUID(),
+ "identityMap": {
+ "email": [
+ {
+ "id": form.email.value
+ }
+ ]
+ },
+ "consents": {
+ "marketing": {
+ "preferred": "email",
+ "postalMail": {
+ "val": "y"
+ },
+ "email": {
+ "val": "y"
+ },
+ "call": {
+ "val": "n"
+ },
+ "any": {
+ "val": "y"
+ }
+ }
+ },
+ "person": {
+ "name": {
+ "lastName": form.lastName.value,
+ "firstName": form.firstName.value
+ }
+ },
+ "homeAddress": {
+ "label": form.company.value
+ },
+ "personalEmail": {
+ "address": form.email.value
+ }
+ }
+ };
+
+ const request = new Request("https://dcs.adobedc.net/collection/d51a67adf7de6444b4bd4be318417667b13aea942d5d1edd548ad7174419a7be?syncValidation=true", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data),
+ });
+
+ post(request, callback);
+}
+
+function createSignInButton(button) {
+ if (userLoggedIn) return;
+ const signInButton = document.createElement('a');
+ signInButton.href = '#';
+ signInButton.textContent = 'Sign In';
+ button.parentElement.append(signInButton);
+
+ const dialog = document.createElement('dialog');
+ dialog.className = 'login-dialog';
+ dialog.innerHTML = `
+
+ `;
+ window.document.body.appendChild(dialog);
+ const submitButton = dialog.querySelector('button');
+
+ signInButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ dialog.showModal();
+ });
+
+ dialog.addEventListener('click', (e) => {
+ if (e.target === dialog) {
+ dialog.close();
+ resetValidationErrors(document.forms.signInForm);
+ }
+ });
+
+ submitButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ const form = document.forms.signInForm;
+ const isValid = validateForm(form);
+
+
+ if (isValid) {
+ sentSignInData(form, () => {
+ dialog.close();
+ document.cookie = `ncUser=${form.email.value}`;
+ userLoggedIn = true;
+ handleHardReload(window.location.href);
+ });
+ }
+ });
+}
+
function setUpButtonText(button) {
const firstName = window.personalizationData.content?.firstName ? `${window.personalizationData.content.firstName},` : '';
button.textContent = userLoggedIn ? `${firstName} Log Out` : 'Log In';
@@ -101,11 +247,11 @@ function removeUserCookie() {
export default function initLogIn(button) {
const dialog = createDialog();
const submitButton = dialog.querySelector('button');
- const logo = document.querySelector('.icon-netcentric-logo');
window.personalizationData = window.personalizationData || {};
userLoggedIn = getCookie('ncUser');
setUpButtonText(button);
button.href = '#';
+ createSignInButton(button)
button.addEventListener('click', (e) => {
e.preventDefault();
diff --git a/styles/styles.css b/styles/styles.css
index 4ef5c8a2..2f3805a2 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -749,6 +749,10 @@ main .section.text-white {
.login-dialog-content {
padding: 40px;
+
+ @media (min-width: 900px) {
+ max-width: 600px;
+ }
}
.form-wrapper {
From 6add6ae332f6dd445fade249ebbfab7b3a836ec1 Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Tue, 18 Mar 2025 10:45:11 +0100
Subject: [PATCH 30/33] change payload
---
scripts/login.js | 85 ++++++++++++++++++++++++++++--------------------
1 file changed, 49 insertions(+), 36 deletions(-)
diff --git a/scripts/login.js b/scripts/login.js
index 734a73fc..cdcb8cc7 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -110,49 +110,62 @@ async function post(request, callback) {
function sentSignInData(form , callback) {
const data = {
- "xdmMeta": {
+ "header": {
"schemaRef": {
"id": "https://ns.adobe.com/netcentricgmbh/schemas/709781f368368fceb6e2fb8c62b4def7ad2d6c2e91f98551",
"contentType": "application/vnd.adobe.xed-full+json;version=1"
- }
- },
- "xdmEntity": {
- "_id": generateUUID(),
- "identityMap": {
- "email": [
- {
- "id": form.email.value
- }
- ]
},
- "consents": {
- "marketing": {
- "preferred": "email",
- "postalMail": {
- "val": "y"
- },
- "email": {
- "val": "y"
- },
- "call": {
- "val": "n"
- },
- "any": {
- "val": "y"
- }
- }
+ "imsOrgId": "FA907D44536A3C2B0A490D4D@AdobeOrg",
+ "source": {
+ "name": "postman"
},
- "person": {
- "name": {
- "lastName": form.lastName.value,
- "firstName": form.firstName.value
+ "datasetId": "67b1acd4627d0f2aefaca606"
+ },
+ "body": {
+ "xdmMeta": {
+ "schemaRef": {
+ "id": "https://ns.adobe.com/netcentricgmbh/schemas/709781f368368fceb6e2fb8c62b4def7ad2d6c2e91f98551",
+ "contentType": "application/vnd.adobe.xed-full+json;version=1"
}
},
- "homeAddress": {
- "label": form.company.value
- },
- "personalEmail": {
- "address": form.email.value
+ "xdmEntity": {
+ "_id": generateUUID(),
+ "identityMap": {
+ "email": [
+ {
+ "id": form.email.value
+ }
+ ]
+ },
+ "consents": {
+ "marketing": {
+ "preferred": "email",
+ "postalMail": {
+ "val": "y"
+ },
+ "email": {
+ "val": "y"
+ },
+ "call": {
+ "val": "n"
+ },
+ "any": {
+ "val": "y"
+ }
+ }
+ },
+ "person": {
+ "name": {
+ "lastName": form.lastName.value,
+ "firstName": form.firstName.value
+ }
+ },
+ "homeAddress": {
+ "label": form.company.value
+ },
+ "personalEmail": {
+ "address": form.email.value
+ }
}
}
};
From ee4787e5fdc8bbbca323406e12971d38e3e0036a Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Tue, 18 Mar 2025 15:11:15 +0100
Subject: [PATCH 31/33] resposive images and other small changes
---
.../personalization-ed/personalization-ed.js | 26 ++++++++++++-------
scripts/login.js | 16 +++---------
scripts/personalisation-helpers.js | 15 ++++++++++-
styles/styles.css | 2 +-
4 files changed, 34 insertions(+), 25 deletions(-)
diff --git a/blocks/personalization-ed/personalization-ed.js b/blocks/personalization-ed/personalization-ed.js
index a7fa3f4e..975506c1 100644
--- a/blocks/personalization-ed/personalization-ed.js
+++ b/blocks/personalization-ed/personalization-ed.js
@@ -1,15 +1,21 @@
-import { isValidJSON, getImageURL } from '../../scripts/personalisation-helpers.js';
+import { isValidJSON, getImageURL, getCookie } from '../../scripts/personalisation-helpers.js';
+import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
-function createEdOffer(offer) {
+
+function createEdOffer(offer, index) {
const offerElement = document.createElement('div');
const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium';
const subject = offer.subject ? `
diff --git a/scripts/personalisation-helpers.js b/scripts/personalisation-helpers.js
index 43df337c..254e9f48 100644
--- a/scripts/personalisation-helpers.js
+++ b/scripts/personalisation-helpers.js
@@ -20,8 +20,21 @@ function getImageURL(imageUrl) {
return imageUrl;
}
+function getCookie(cookieStartName) {
+ const decodedCookie = decodeURIComponent(document.cookie);
+ const ca = decodedCookie.split(';');
+ for (let i = 0; i < ca.length; i++) {
+ const c = ca[i].trim();
+ if (c.startsWith(cookieStartName)) {
+ return c.substring(c.indexOf('=') + 1);
+ }
+ }
+ return '';
+}
+
export {
handleHardReload,
isValidJSON,
- getImageURL
+ getImageURL,
+ getCookie
}
\ No newline at end of file
diff --git a/styles/styles.css b/styles/styles.css
index 2f3805a2..e0c15ba2 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -772,7 +772,7 @@ main .section.text-white {
right: 0;
}
- input,
+ input:not([type='checkbox']),
button {
box-sizing: border-box;
font-size: 16px;
From ef483b875b5c575f7d2bb038405676ceab6c41c0 Mon Sep 17 00:00:00 2001
From: Joan Beltran
${subject}
`;
return offerElement;
From 58e132c1f3187ce6ba5ea1a20a374b1d0e231bf8 Mon Sep 17 00:00:00 2001
From: Joan Beltran ${offer.text}
+ ${button}${offer.subject}
` : ''; const button = offer.buttonText ? `` : ''; + const isAutenticated = getCookie('ncUser'); + const imgMask = isAutenticated ? '' : ''; + const imageLoading = !isAutenticated && index === 1 ? 'eager' : 'lazy'; + const offerPicture = createOptimizedPicture(imageSrc, offer.offerName, imageLoading, [{ media: '(min-width: 900px)', width: '2000' }, { width: '1200' }]); offerElement.classList.add('ed-offer'); offerElement.innerHTML = `
-
-
+ ${offerPicture.outerHTML}
+ ${imgMask}
${subject}
@@ -20,8 +26,8 @@ function createEdOffer(offer) {
return offerElement;
}
-function handleOffers(block, offer) {
- const edOffer = createEdOffer(offer);
+function handleOffers(block, offer, index) {
+ const edOffer = createEdOffer(offer, index);
block.append(edOffer);
}
@@ -34,13 +40,13 @@ export default function decorate(block) {
}
const data = JSON.parse(editedContent);
block.children[0].remove();
- data.forEach((offer) => {
+ data.forEach((offer, index) => {
if (Array.isArray(offer.content)) {
- offer.content.forEach((subOffer) => {
- handleOffers(block, subOffer);
+ offer.content.forEach((subOffer, subIndex) => {
+ handleOffers(block, subOffer, subIndex);
});
} else {
- handleOffers(block, offer.content);
+ handleOffers(block, offer.content, index);
}
});
}
\ No newline at end of file
diff --git a/scripts/login.js b/scripts/login.js
index cdcb8cc7..b30eb64a 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -1,19 +1,7 @@
-import { handleHardReload } from './personalisation-helpers.js';
+import { handleHardReload, getCookie } from './personalisation-helpers.js';
let userLoggedIn = false;
-function getCookie(cookieStartName) {
- const decodedCookie = decodeURIComponent(document.cookie);
- const ca = decodedCookie.split(';');
- for (let i = 0; i < ca.length; i++) {
- const c = ca[i].trim();
- if (c.startsWith(cookieStartName)) {
- return c.substring(c.indexOf('=') + 1);
- }
- }
- return '';
-}
-
function resetForm(form) {
const inputs = form.querySelectorAll('input');
inputs.forEach((input) => {
@@ -204,6 +192,8 @@ function createSignInButton(button) {
+
+
From 50f215df76f6f1fa4a066456865784a6f9abe3bd Mon Sep 17 00:00:00 2001
From: Joan Beltran
Date: Wed, 19 Mar 2025 15:18:08 +0100
Subject: [PATCH 33/33] little changes
---
scripts/login.js | 9 ++++++++-
styles/styles.css | 4 ++++
2 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/scripts/login.js b/scripts/login.js
index b30eb64a..5b3532f3 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -173,7 +173,7 @@ function createSignInButton(button) {
if (userLoggedIn) return;
const signInButton = document.createElement('a');
signInButton.href = '#';
- signInButton.textContent = 'Sign In';
+ signInButton.textContent = 'Sign Up';
button.parentElement.append(signInButton);
const dialog = document.createElement('dialog');
@@ -188,6 +188,13 @@ function createSignInButton(button) {
+
+
+
diff --git a/styles/styles.css b/styles/styles.css
index e0c15ba2..d5571502 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -757,6 +757,10 @@ main .section.text-white {
.form-wrapper {
position: relative;
+
+ > div {
+ margin-bottom: 20px;
+ }
}
input {
+
+
+
+