MWPW-150560 make search literals usable as fragments (#3320)

* MWPW-150560 make search literals usable as fragments * Revert "MWPW-140452 - Icon authoring in milo using the federal repo a… (#3357) Revert "MWPW-140452 - Icon authoring in milo using the federal repo and individual SVG assets (#3259)" This reverts commit 81a5770. * review comment * Update libs/blocks/merch-card-collection/merch-card-collection.js Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com> * fix unit test --------- Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com> Co-authored-by: Okan Sahin <39759830+mokimo@users.noreply.github.com> Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com>
adobecom · Jan 7, 2025 · ea9f4a9 · ea9f4a9
1 parent 7db0ff0
commit ea9f4a9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/libs/blocks/merch-card-collection/merch-card-collection.js b/libs/blocks/merch-card-collection/merch-card-collection.js
@@ -269,11 +269,14 @@ export default async function init(el) {
     }
   }
 
-  const literalsEl = el.lastElementChild?.firstElementChild;
+  // in case of search literals being fragments, data is marked with a data-path attribute,
+  // and shallower
+  const literalsEl = el.lastElementChild?.firstElementChild?.getAttribute('data-path') !== null
+    ? el.lastElementChild : el.lastElementChild?.firstElementChild;
   // parse literals
   const literalSlots = [];
-  if (literalsEl && /filter/.test(literalsEl.querySelector('u')?.innerText)) {
-    literalsEl.querySelectorAll('u').forEach((u) => {
+  if (/filter/.test(literalsEl?.querySelector('u')?.innerText)) {
+    literalsEl?.querySelectorAll('u').forEach((u) => {
       const text = u.innerText.trim();
       if (DIGITS_ONLY.test(text)) {
         u.outerHTML = '<span data-placeholder="resultCount"></span>';
@@ -284,8 +287,8 @@ export default async function init(el) {
       }
     });
     let index = 0;
-    while (literalsEl.firstElementChild) {
-      const literalEl = literalsEl.firstElementChild;
+    while (literalsEl?.firstElementChild) {
+      const literalEl = literalsEl?.firstElementChild;
       let slot;
       if (literalEl.tagName === 'P') {
         slot = literalEl;

diff --git a/test/blocks/merch-card-collection/merch-card-collection.test.js b/test/blocks/merch-card-collection/merch-card-collection.test.js
@@ -159,6 +159,12 @@ describe('Merch Cards', async () => {
     expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
   });
 
+  it('should parse fragmented literals', async () => {
+    const merchCards = await init(document.getElementById('fragmented-literals'));
+    await delay(500);
+    expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
+  });
+
   it('should override cards when asked to', async () => {
     const el = document.getElementById('multipleFilters');
     setConfig({

diff --git a/test/blocks/merch-card-collection/mocks/merch-card-collection.html b/test/blocks/merch-card-collection/mocks/merch-card-collection.html
@@ -192,6 +192,42 @@
             <li>Make sure all words are spelled correctly</li>
             <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
           </ul></div><p slot="showMoreText">Show more</p></merch-card-collection>
+
+    <div id="fragmented-literals" class="merch-card-collection catalog">
+      <div>
+        <a href="https://main--milo--adobecom.hlx.live/query-index-cards.json?sheet=catalog">query index</a>
+        <p>all, 18</p>
+      </div>
+      <div>
+          <p data-path="foo/bar">Search all products</p>
+          <p data-path="foo/bar">Filters</p>
+          <p>Sort</p>
+          <p>Popularity</p>
+          <p>Alphabetical</p>
+          <p>0 results</p>
+          <p>1 result in <strong><u>filter</u></strong></p>
+          <p><u>10</u> results in <strong><u>filter</u></strong></p>
+          <p>1 result for <strong><u>search</u></strong></p>
+          <p><u>10</u> results for <strong><u>search</u></strong></p>
+          <p>1 result for: <strong><u>search</u></strong></p>
+          <p><u>10</u> results for: <strong><u>search</u></strong></p>
+          <p>Your search for <strong><u>search</u></strong> did not yield any results</p>
+          <hr>
+          <p>Your search for <strong><u>search</u></strong> did not yield any results. Try a different search term.</p>
+          <p>Suggestions:</p>
+          <ul>
+            <li>Make sure all words are spelled correctly</li>
+            <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
+          </ul>
+          <hr>
+          <p>Show more</p>
+      </div>
+    </div>
+    <!--this the expected merch-cards element -->
+    <merch-card-collection filter="all" class="merch-card-collection catalog" limit="18" types="" search="" page="1"><p data-path="foo/bar" slot="searchText">Search all products</p><p data-path="foo/bar" slot="filtersText">Filters</p><p slot="sortText">Sort</p><p slot="popularityText">Popularity</p><p slot="alphabeticallyText">Alphabetical</p><p slot="noResultText" aria-live="polite">0 results</p><p slot="resultText" aria-live="polite">1 result in <strong><span data-placeholder="filter"></span></strong></p><p slot="resultsText" aria-live="polite"><span data-placeholder="resultCount"></span> results in <strong><span data-placeholder="filter"></span></strong></p><p slot="searchResultText" aria-live="polite">1 result for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsText" aria-live="polite"><span data-placeholder="resultCount"></span> results for <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultMobileText" aria-live="polite">1 result for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="searchResultsMobileText" aria-live="polite"><span data-placeholder="resultCount"></span> results for: <strong><span data-placeholder="searchTerm"></span></strong></p><p slot="noSearchResultsText" aria-live="polite">Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results</p><div slot="noSearchResultsMobileText" aria-live="polite"><p>Your search for <strong><span data-placeholder="searchTerm"></span></strong> did not yield any results. Try a different search term.</p><p>Suggestions:</p><ul>
+            <li>Make sure all words are spelled correctly</li>
+            <li>Use quotes to search for an entire phrase, such as "crop an image"</li>
+          </ul></div><p slot="showMoreText">Show more</p></merch-card-collection>
   </div>
 
   <div id="cards">