MWPW-135821 introduce mep custom action & use it for card collection #2152

npeltier · 2024-04-16T14:46:13Z

and inaugurating first custom action for replacing cards in collection

with following manifest added to the page

action	selector	page filter (optional)	all
replace	in-block:merch-card-collection		/drafts/npeltier/fragments/merch/products/catalog/photoshop/promo

before & after personalisation (see photoshop card)
Test URLs:

- and inaugurating first custom action for replacing cards in collection

yesil · 2024-04-16T15:07:26Z

libs/features/personalization/personalization.js

@@ -51,6 +51,10 @@ const DATA_TYPE = {
  TEXT: 'text',
 };

+export const MERCH_CARD_COLLECTION_SELECTOR = 'in-card-collection';


I think this constant should not be here, personalization.js should not know about blocks needing delayed MEP based personalization.

yesil · 2024-04-16T15:07:37Z

libs/features/personalization/personalization.js

@@ -51,6 +51,10 @@ const DATA_TYPE = {
  TEXT: 'text',
 };

+export const MERCH_CARD_COLLECTION_SELECTOR = 'in-card-collection';
+
+const CUSTOM_SELECTORS = [MERCH_CARD_COLLECTION_SELECTOR];


this is the smallest footprint to have to get "custom" actions defined so mep knows it just needs to register them as such.

If selectors had a pattern or prefix, we wouldn't need to add custom selectors in this file.

I think @yesil is right. The more I think about it, the more I think we should do a prefix and maybe the block name. Something like:
in-block:blockname

if we did that, you wouldn't need the constant. You just extract the 2nd part of the string and in your block you just use your own block name.

sure :) or custom:whatever but yes in that case in-block:merch-card-collection sounds right indeed :)

yesil · 2024-04-16T15:09:42Z

libs/features/personalization/personalization.js

@@ -289,6 +293,14 @@ function getSection(rootEl, idx) {
    : rootEl.querySelector(`:scope > div:nth-child(${idx})`);
 }

+function registerCustomAction(cmd) {


should we differentiate normal MEP rules from these ones?
if we expose all the MEP rules and have a flag when they are successfully executed at page load, then blocks such as merch-card-collection can go over the rules without that flag and find matching rules and execute them.

they are, all normal processing is stopped if identified action is custom, and then put in config.mep.custom

actually I meant, do we need to differentiate, sorry for the language.

yesil · 2024-04-16T15:11:32Z

test/blocks/merch-card-collection/merch-card-collection.test.js

@@ -161,7 +161,23 @@ describe('Merch Cards', async () => {

  it('should override cards when asked to', async () => {
    const el = document.getElementById('multipleFilters');
-    el.dataset.overrides = '/override-photoshop,/override-express';
+    setConfig({


I suggest putting MEP rules in own config object.
it can be a module scoped config and be exposed from personalization.js.

this is what we do, in config.mep.custom

yesil

In my opinion, personalization.js should not know about blocks needing to perform MEP during block initialisation.

Otherwise, the current code looks concise and simple.

yesil · 2024-04-16T15:26:21Z

libs/features/personalization/personalization.js

@@ -289,6 +293,14 @@ function getSection(rootEl, idx) {
    : rootEl.querySelector(`:scope > div:nth-child(${idx})`);
 }

+function registerCustomAction(cmd) {


actually I meant, do we need to differentiate, sorry for the language.

yesil · 2024-04-16T15:27:06Z

test/blocks/merch-card-collection/merch-card-collection.test.js

@@ -161,7 +161,23 @@ describe('Merch Cards', async () => {

  it('should override cards when asked to', async () => {
    const el = document.getElementById('multipleFilters');
-    el.dataset.overrides = '/override-photoshop,/override-express';
+    setConfig({


yesil · 2024-04-16T15:28:18Z

test/blocks/merch-card-collection/merch-card-collection.test.js

+    setConfig({
+      ...conf,
+      mep: {
+        custom: {


suggestion: deferred or lazy instead of custom?

To me it's less talkative than custom. custom means in that context that it will not be handled by perso, which implies it's lazy/deferred, but also that something else should take care of it :)

yesil · 2024-04-16T15:30:56Z

libs/features/personalization/personalization.js

@@ -51,6 +51,10 @@ const DATA_TYPE = {
  TEXT: 'text',
 };

+export const MERCH_CARD_COLLECTION_SELECTOR = 'in-card-collection';
+
+const CUSTOM_SELECTORS = [MERCH_CARD_COLLECTION_SELECTOR];


If selectors had a pattern or prefix, we wouldn't need to add custom selectors in this file.

npeltier · 2024-04-16T15:37:44Z

If selectors had a pattern or prefix, we wouldn't need to add custom selectors in this file.

i suggested "custom-" prefix for actions :) but @vgoodric was preferring custom selectors :)

github-actions · 2024-04-17T01:09:22Z

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

vgoodric · 2024-04-17T07:16:26Z

libs/blocks/merch-card-collection/merch-card-collection.js

@@ -291,8 +292,7 @@ export default async function init(el) {
  }

  const cardsRoot = await cardsRootPromise;
-  const overrides = el.dataset[OVERRIDE_PATHS];
-  const overridePromises = overrides?.split(',').map(fetchOverrideCard);
+  const overridePromises = mep?.custom?.[MERCH_CARD_COLLECTION_SELECTOR]?.map(fetchOverrideCard);


look in personalization.js for the handleFragmentCommand function. In particular, this line:
if (config.mep.preview) a.dataset.manifestId = manifestPath;

This is what makes the highlight feature possible. I recommend doing this as well so people can see what has been changed.

npeltier · 2024-04-17T07:31:46Z

thanks for the great suggestion about prefixes @yesil @vivgoodrich, just updated

vgoodric · 2024-04-17T07:33:25Z

thanks for the great suggestion about prefixes @yesil @vivgoodrich, just updated

Can you also update your sample manifests? So I can see it all in action?

npeltier · 2024-04-17T07:55:04Z

just did @vivgoodrich , will now tackle your 2nd suggestion

aem-code-sync · 2024-04-17T09:33:02Z

Page	Scores	Audits	Google
/?martech=off

3ch023 · 2024-04-18T11:47:44Z

do we have a task to cover it with nala tests?
cc @afmicka

afmicka · 2024-04-18T11:52:06Z

do we have a task to cover it with nala tests? cc @afmicka

@3ch023 not as jira. I am working on updating promo tests today and tomorrow (all actions on fragments turned out to be supported but not working) and had this in mind too. We can create the jira task for this as well. cc: @npeltier

github-actions · 2024-04-19T01:09:51Z

This PR is currently in the needs-verification state. Please assign a QA engineer to verify the changes.

* stage: MWPW-146999: kodiak CVE 25883 (adobecom#2183) MWPW-144549 CTA alignment for Text, Icon, and Media Blocks (adobecom#2098) MWPW-146494-keep gnav sticky when branch banner is displayed (adobecom#2175) MWPW-135821 introduce mep custom action & use it for card collection (adobecom#2152) MWPW-146129 [Original: adobecom#2123] App Launcher overlaps the menu in Unav in the devices (adobecom#2184) Revert "MWPW-146129 App Launcher overlaps the menu in Unav in the devices" (adobecom#2182) MWPW-146129 App Launcher overlaps the menu in Unav in the devices (adobecom#2123) MWPW-139842 [Revert] Fill button style (adobecom#2181) Mwpw 142003: Mini Compare Chart card fixes (adobecom#2093) MWPW-146756] Add support for RTL in aside notifications, horizontal cards"" (adobecom#2178) Revert "[MWPW-146756] Add support for RTL in aside notifications, horizontal cards" (adobecom#2177) [MWPW-146756] Add support for RTL in aside notifications, horizontal cards (adobecom#2167) Revert "MWPW-142590 - [Share] enhancement - ability to edit text above icons" (adobecom#2172)

…dobecom#2152) * MWPW-135821 introduce custom action - and inaugurating first custom action for replacing cards in collection * MWPW-135821 use prefix in selector * MWPW-135821 adding preview data --------- Co-authored-by: Vivian A Goodrich <101133187+vgoodric@users.noreply.github.com>

MWPW-135821 introduce custom action

963be82

- and inaugurating first custom action for replacing cards in collection

npeltier added run-nala Run Nala Test Automation against PR commerce needs-verification PR requires E2E testing by a reviewer labels Apr 16, 2024

npeltier requested review from a team as code owners April 16, 2024 14:46

npeltier changed the title ~~MWPW-135821 introduce custom action~~ MWPW-135821 introduce mep custom action & use it for card collection Apr 16, 2024

yesil reviewed Apr 16, 2024

View reviewed changes

yesil approved these changes Apr 16, 2024

View reviewed changes

npeltier requested a review from chrischrischris April 17, 2024 07:10

vgoodric reviewed Apr 17, 2024

View reviewed changes

MWPW-135821 use prefix in selector

4198e00

npeltier added 2 commits April 17, 2024 11:32

MWPW-135821 adding preview data

ea86555

Merge branch 'stage' of github.com:adobecom/milo into MWPW-135821

28861fc

Merge branch 'stage' into MWPW-135821

6e8e7a9

vgoodric approved these changes Apr 18, 2024

View reviewed changes

Merge branch 'gnavinternal' into MWPW-135821

c80b3ec

afmicka added verified PR has been E2E tested by a reviewer and removed needs-verification PR requires E2E testing by a reviewer labels Apr 23, 2024

npeltier added the Ready for Stage label Apr 23, 2024

vladen merged commit d21f705 into adobecom:stage Apr 23, 2024
20 of 21 checks passed

vladen mentioned this pull request Apr 23, 2024

[Release] Stage to Main #2186

Merged

github-actions bot mentioned this pull request Apr 30, 2024

[Release] Stage to Main mokimo/milo#57

Closed

mokimo mentioned this pull request May 7, 2024

[Release] Stage to Main mokimo/milo#59

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-135821 introduce mep custom action & use it for card collection #2152

MWPW-135821 introduce mep custom action & use it for card collection #2152

npeltier commented Apr 16, 2024 •

edited by 3ch023

Loading

yesil Apr 16, 2024

yesil Apr 16, 2024

npeltier Apr 16, 2024

yesil Apr 16, 2024

vgoodric Apr 17, 2024

vgoodric Apr 17, 2024

npeltier Apr 17, 2024

yesil Apr 16, 2024

npeltier Apr 16, 2024

yesil Apr 16, 2024

yesil Apr 16, 2024

npeltier Apr 16, 2024

yesil Apr 16, 2024

yesil left a comment

yesil Apr 16, 2024

yesil Apr 16, 2024

yesil Apr 16, 2024

npeltier Apr 16, 2024

yesil Apr 16, 2024

npeltier commented Apr 16, 2024 •

edited

Loading

github-actions bot commented Apr 17, 2024

vgoodric Apr 17, 2024

npeltier commented Apr 17, 2024

vgoodric commented Apr 17, 2024

npeltier commented Apr 17, 2024

aem-code-sync bot commented Apr 17, 2024 •

edited

Loading

3ch023 commented Apr 18, 2024

afmicka commented Apr 18, 2024

github-actions bot commented Apr 19, 2024

MWPW-135821 introduce mep custom action & use it for card collection #2152

MWPW-135821 introduce mep custom action & use it for card collection #2152

Conversation

npeltier commented Apr 16, 2024 • edited by 3ch023 Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yesil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

npeltier commented Apr 16, 2024 • edited Loading

github-actions bot commented Apr 17, 2024

Choose a reason for hiding this comment

npeltier commented Apr 17, 2024

vgoodric commented Apr 17, 2024

npeltier commented Apr 17, 2024

aem-code-sync bot commented Apr 17, 2024 • edited Loading

3ch023 commented Apr 18, 2024

afmicka commented Apr 18, 2024

github-actions bot commented Apr 19, 2024

npeltier commented Apr 16, 2024 •

edited by 3ch023

Loading

npeltier commented Apr 16, 2024 •

edited

Loading

aem-code-sync bot commented Apr 17, 2024 •

edited

Loading