Revert "MWPW-142130: update the source of merch card name" (#1927)

Revert "MWPW-142130: update the source of merch card name (#1883)" This reverts commit f5e68ff.
adobecom · Feb 26, 2024 · 3f1b6c9 · 3f1b6c9
1 parent f5e68ff
commit 3f1b6c9
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 32 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -5,6 +5,102 @@ import { processTrackingLabels } from '../../martech/attributes.js';
 import { replaceKey } from '../../features/placeholders.js';
 import '../../deps/merch-card.js';
 
+const PRODUCT_NAMES = [
+  'acrobat-pdf-pack',
+  'acrobat-pro-2020',
+  'acrobat-reader-dc-mobile',
+  'acrobat-reader-dc',
+  'acrobat-sign-solutions-mobile',
+  'acrobat-sign-solutions',
+  'acrobat-standard-2020',
+  'acrobat-standard-dc',
+  'acrobat',
+  'adobe-connect',
+  'adobe-export-pdf',
+  'adobe-firefly',
+  'adobe-scan',
+  'advertising-cloud',
+  'aero',
+  'aftereffects',
+  'analytics',
+  'animate',
+  'audience-manager',
+  'audition',
+  'behance',
+  'bridge',
+  'campaign',
+  'captivate-prime',
+  'captivate',
+  'capture',
+  'all-apps',
+  'express',
+  'character-animator',
+  'cloud-service',
+  'coldfusion-aws',
+  'coldfusion-builder',
+  'coldfusion-enterprise',
+  'coldfusion',
+  'color',
+  'commerce-cloud',
+  'content-server',
+  'customer-journey-analytics',
+  'design-to-print',
+  'digital-editions',
+  'dreamweaver',
+  'embedded-print-engine',
+  'experience-manager-assets',
+  'experience-manager-forms',
+  'experience-manager-sites',
+  'experience-manager',
+  'experience-platform',
+  'fill-sign',
+  'fonts',
+  'frame',
+  'framemaker-publishing-server',
+  'framemaker',
+  'fresco',
+  'http-dynamic-streaming',
+  'illustrator',
+  'incopy',
+  'indesign-server',
+  'indesign',
+  'intelligent-services',
+  'journey-orchestration',
+  'lightroom-classic',
+  'lightroom',
+  'magento',
+  'marketo',
+  'media-encoder',
+  'media-server-aws',
+  'media-server-extended',
+  'media-server-professional',
+  'media-server-standard',
+  'mixamo',
+  'pdf-print-engine',
+  'pepe',
+  'photoshop-elements',
+  'photoshop-express',
+  'photoshop',
+  'portfolio',
+  'postscript',
+  'premiere-elements',
+  'premierepro',
+  'presenter-video-express',
+  'real-time-customer-data-platform',
+  'robohelp-server',
+  'robohelp',
+  'stock',
+  'substance-3d-designer',
+  'substance-3d-modeler',
+  'substance-3d-painter',
+  'substance-3d-sampler',
+  'substance-3d-stager',
+  'target',
+  'technical-communication-suite',
+  'type',
+  'xml-documentation',
+];
+
 const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;
 
 const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart'];
@@ -247,6 +343,8 @@ const setMiniCompareOfferSlot = (merchCard, offers) => {
 
 const init = async (el) => {
   const styles = [...el.classList];
+  const lastClass = styles[styles.length - 1];
+  const name = PRODUCT_NAMES.includes(lastClass) ? lastClass : undefined;
   const cardType = getPodType(styles) || 'product';
   if (!styles.includes(cardType)) {
     styles.push(cardType);
@@ -273,15 +371,11 @@ const init = async (el) => {
   if (el.dataset.removedManifestId) {
     merchCard.dataset.removedManifestId = el.dataset.removedManifestId;
   }
+  if (name) {
+    merchCard.setAttribute('name', name);
+  }
   let tags = {};
-  if (el.lastElementChild?.previousElementSibling?.querySelector('h3,h3,h4,h5,h6')) {
-    // tag section is available
-    const nameSelector = 'h3,h4,h5,h6';
-    const nameEl = el.lastElementChild.querySelector(nameSelector);
-    if (nameEl) {
-      merchCard.setAttribute('name', nameEl.textContent?.trim());
-      nameEl.remove();
-    }
+  if (el.lastElementChild) {
     tags = extractTags(el.lastElementChild);
     if (tags.categories?.length > 1 || tags.types?.length > 0) {
     // this div contains tags, remove it from further processing.

diff --git a/libs/blocks/merch-cards/merch-cards.js b/libs/blocks/merch-cards/merch-cards.js
@@ -39,7 +39,7 @@ const fail = (el, err = '') => {
 };
 
 /**
- * Removes merch cards from the DOM if they are not meant to be displayed for the given filter.
+ * Removes merch cards from the DOM if they are not meant to be displayed in this merch cards block.
  * @param {*} merchCards merch-cards element
  */
 export function filterMerchCards(merchCards, filtered) {
@@ -113,9 +113,9 @@ async function initMerchCards(config, type, filtered, el, preferences) {
       const preference = preferences[key];
       if (!preference) return;
       preference
-        .forEach(([sortKey, cardSize], index) => {
-          if (merchCard.name === sortKey || merchCard.title === sortKey) {
-            filters[key] = { order: index + 1, size: cardSize };
+        .forEach(([cardTitle, cardSize], index) => {
+          if (merchCard.title === cardTitle) {
+            filters[key] = { order: index, size: cardSize };
           }
         });
     });
@@ -134,12 +134,12 @@ export default async function init(el) {
     return fail(el, 'Missing queryIndexCardPath config');
   }
 
-  const { base } = getConfig();
+  const { miloLibs } = getConfig();
   const merchStyles = new Promise((resolve) => {
-    loadStyle(`${base}/blocks/merch/merch.css`, resolve);
+    loadStyle(`${miloLibs}/blocks/merch/merch.css`, resolve);
   });
   const merchCardStyles = new Promise((resolve) => {
-    loadStyle(`${base}/blocks/merch-card/merch-card.css`, resolve);
+    loadStyle(`${miloLibs}/blocks/merch-card/merch-card.css`, resolve);
   });
   const allStyles = Promise.all([merchStyles, merchCardStyles]);
 
@@ -150,12 +150,12 @@ export default async function init(el) {
 
   if (!filtered) {
     await Promise.all([
-      import(`${base}/features/spectrum-web-components/dist/theme.js`),
-      import(`${base}/features/spectrum-web-components/dist/button.js`),
-      import(`${base}/features/spectrum-web-components/dist/search.js`),
-      import(`${base}/features/spectrum-web-components/dist/overlay.js`),
-      import(`${base}/features/spectrum-web-components/dist/menu.js`),
-      import(`${base}/features/spectrum-web-components/dist/popover.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/search.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/overlay.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/menu.js`),
+      import(`${miloLibs}/features/spectrum-web-components/dist/popover.js`),
     ]);
   }
 

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
@@ -258,7 +258,6 @@ describe('Catalog Card', () => {
   it('Parses the filters and types', async () => {
     document.body.innerHTML = await readFile({ path: './mocks/catalog.html' });
     const merchCard = await init(document.querySelector('.merch-card.catalog.tags'));
-    expect(merchCard.name).equal('photoshop');
     expect(merchCard.filters).to.be.deep.equal({
       all: { order: undefined, size: undefined },
       'creativity-design': { order: undefined, size: undefined },

diff --git a/test/blocks/merch-card/mocks/catalog.html b/test/blocks/merch-card/mocks/catalog.html
@@ -125,7 +125,6 @@ <h5>Desktop + Mobile</h5>
     </div>
     <div>
       <div data-valign="middle">
-        <h3>photoshop</h3>
         <p>catalog:categories/creativity-design</p>
         <p>catalog:categories/creativity-design/graphic-design</p>
         <p>catalog:categories/creativity-design/photo</p>

diff --git a/test/blocks/merch-cards/mocks/merch-cards.html b/test/blocks/merch-cards/mocks/merch-cards.html
@@ -31,7 +31,7 @@
       <div>
         <div>
           <p><strong>Photoshop</strong></p>
-          <p>all-apps</p>
+          <p>Creative Cloud All Apps</p>
           <p>Express</p>
         </div>
       </div>
@@ -132,30 +132,27 @@
   </div>
 
   <div id="cards">
-    <div class="merch-card catalog">
+    <div class="merch-card catalog express">
       <div>
         <h3>Adobe Express</h3>
       </div>
       <div>
-        <h3>express</h3>
         <p>catalog:categories/creativity-design/photo</p>
       </div>
     </div>
-    <div class="merch-card catalog">
+    <div class="merch-card catalog photoshop">
       <div>
         <h3>Photoshop</h3>
       </div>
       <div>
-        <h3>photoshop</h3>
         <p>catalog:categories/creativity-design/photo</p>
       </div>
     </div>
-    <div class="merch-card catalog">
+    <div class="merch-card catalog all-apps">
       <div>
         <h3>Creative Cloud All Apps</h3>
       </div>
       <div>
-        <h3>all-apps</h3>
         <p>catalog:categories/creativity-design/photo</p>
         <p>catalog:categories/creativity-design/video</p>
       </div>