MWPW-160811 [coll] allow search & results & total digit token with /

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

@@ -5,7 +5,9 @@ import {
 } from '../../utils/utils.js';
 import { replaceText } from '../../features/placeholders.js';
 
-const DIGITS_ONLY = /^\d+$/;
+const DIGITS_ONLY = /^\/?\d+\/?$/;
+const FILTER_REGEX = /(filter|\/filter\/)/;
+const SEARCH_REGEX = /search|\/search\//;
 export const OVERRIDE_PATHS = 'overrides';
 
 const LITERAL_SLOTS = [
@@ -275,14 +277,14 @@ export default async function init(el) {
     ? el.lastElementChild : el.lastElementChild?.firstElementChild;
   // parse literals
   const literalSlots = [];
-  if (/filter/.test(literalsEl?.querySelector('u')?.innerText)) {
-    literalsEl?.querySelectorAll('u').forEach((u) => {
+  if (literalsEl && FILTER_REGEX.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>';
-      } else if (text === 'search') {
+      } else if (SEARCH_REGEX.test(text)) {
         u.outerHTML = '<span data-placeholder="searchTerm"></span>';
-      } else if (text === 'filter') {
+      } else if (FILTER_REGEX.test(text)) {
         u.outerHTML = '<span data-placeholder="filter"></span>';
       }
     });

libs/features/mas/src/utils.js

@@ -9,7 +9,7 @@ export function debounce(func, delay) {
 }
 
 export const getSlotText = (element, name) =>
-    element.querySelector(`[slot="${name}"]`).textContent.trim();
+    element.querySelector(`[slot="${name}"]`)?.textContent?.trim();
 
 /**
  * Helper function to create an element with attributes

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

@@ -165,6 +165,12 @@ describe('Merch Cards', async () => {
     expect(merchCards.outerHTML).to.equal(merchCards.nextElementSibling.outerHTML);
   });
 
+  it('should parse literals 4 translation too', async () => {
+    const merchCards = await init(document.getElementById('literals-4-translation'));
+    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({

test/blocks/merch-card-collection/mocks/merch-card-collection.html

@@ -85,8 +85,8 @@
           <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 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>
@@ -228,8 +228,46 @@
             <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="literals-4-translation" 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>
+        <div>
+          <p>Search all products</p>
+          <p>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>
+    </div>        
+    <!--this the expected merch-cards element -->
+    <merch-card-collection filter="all" class="merch-card-collection catalog" limit="18"><p slot="searchText">Search all products</p><p 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">
     <div class="merch-card catalog">
       <div>