Search page

A dedicated search page: a debounced <search-input> drives a <search-result-list> of product cards. The input targets the list by id, so the two can sit anywhere on the page.

<!-- The input targets the list by id and sets its .search live. -->
<search-input for="results" placeholder="Search products…"></search-input>

<!-- First child = the result TEMPLATE (cloned per result). -->
<search-result-list id="results" limit="12" class="grid">
  <search-result-item class="card">
    <storesynk-product>
      <product-link>
        <a>
          <show-image main class="card-img"><img alt="" /></show-image>
          <span class="card-title"><show-title></show-title></span>
        </a>
      </product-link>
      <show-price class="card-price"></show-price>
    </storesynk-product>
  </search-result-item>
</search-result-list>

• <search-input> renders its own labelled <input type="search"> (override the name with its label attribute), debounces typing, and sets the search property of the element whose id matches for.
• <search-result-list> clones its first element child per result. Wrapping the card in <search-result-item> gives you a plain block for spacing and borders.
• The card’s <storesynk-product> carries no handle or product-id: the list feeds each clone. Prices render through <show-price>.

Options

Tag / attribute	Type / default	Meaning
search-input for	string = ""	id of the target search-result-list (or storesynk-list).
search-input debounce	number = 250	Input debounce in ms.
search-input placeholder	string = ""	Placeholder for the generated input.
search-result-list search	string = ""	The query string, usually set live by search-input.
search-result-list limit	number = 12	Maximum results.

Styling

search-result-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
search-result-list[ss-loading]::before { content: "Searching…"; color: #888; }
search-result-list[ss-empty]::before   { content: "No results."; color: #888; }
search-result-list storesynk-product { display: contents; }  /* let .card own the layout */
.card { display: flex; flex-direction: column; gap: 6px; }

Gotchas

• Typing does nothing when for and the list’s id don’t match. See search and lists troubleshooting.
• The list renders empty when its first child isn’t, or doesn’t contain, a <storesynk-product> (SSK-107).
• Nothing renders outside <storesynk-store> or without the bundle. See nothing renders.

Related

• Lists & search tag reference
• Predictive search
• Product grid