Lists & search

storesynk-list

• Purpose: renders the products of a collection, or of the whole store with all-products. Shared engine (ProductListBase): captures first element child as the item template, clones per product, feeds each via provideProduct() (no N+1 fetch).
• Attributes:
  • collection : string = "" - collection handle.
  • all-products : boolean = false - render every product in the store (explicit opt-in; collection wins when both are set).
  • limit : number = 12 - max products fetched.
• Required ancestor / context: storesynk-store (consumes storeContext).
• Children / template rule: TEMPLATE-CLONE - first element child is the template and must be, or contain, a storesynk-product. Missing → renders nothing (SSK-107).
• Events: none.
• State it sets: [ss-loading] (during fetch), [ss-empty] (no results).

search-result-list

• Purpose: renders product search results. Same ProductListBase engine as storesynk-list. Drive search live via <search-input for="…">.
• Attributes:
  • search : string = "" - the query string (usually set by search-input, not authored).
  • limit : number = 12 - max results.
• Required ancestor / context: storesynk-store (consumes storeContext).
• Children / template rule: TEMPLATE-CLONE - first element child is the template, must be/contain a storesynk-product (commonly wrapped in search-result-item). SSK-107.
• Events: none.
• State it sets: [ss-loading], [ss-empty].

predictive-search

• Purpose: type-ahead search using Shopify’s predictiveSearch. Owns an <input> and a results dropdown; clones the first item template per suggestion. The template’s parent element is used as the dropdown container. Closes on outside-click / Escape.
• Attributes:
  • limit : number = 6 - max suggestions.
  • debounce : number = 200 - input debounce in ms.
• Required ancestor / context: storesynk-store (consumes storeContext).
• Children / template rule: TEMPLATE-CLONE - must contain both an <input> and a template that is a search-result-item (preferred) or a storesynk-product. Missing either → renders nothing (SSK-107).
• Events: none (listens to its own input).
• State it sets: [ss-open] (dropdown visible), [ss-loading] (during fetch).

search-input

• Purpose: a debounced search box that drives another list/result element by id. Renders its own <input type="search"> (or wires one you provide) and sets the target’s .search.
• Attributes:
  • for : string = "" - id of the target storesynk-list / search-result-list.
  • debounce : number = 250 - debounce in ms.
  • placeholder : string = "" - placeholder for the generated input.
  • label : string = "Search" - the accessible name written onto the input as aria-label when the input has neither an aria-label of its own nor a <label> (a placeholder is not a name). Set it to match your UI language.
• Required ancestor / context: none - it does not consume any context. It needs a store + a target list to exist on the page, but not as an ancestor.
• Children: optionally one <input> (else it creates one).
• Events: none emitted (listens to the input’s input event).
• State it sets: none.

search-result-item

• Purpose: styleable wrapper around the storesynk-product inside a search-result-list or predictive-search (gives you a block to style/space the result). Pure markup wrapper (a logic-free styleable element) - no logic, no context.
• Attributes: none.
• Required ancestor / context: search-result-list or predictive-search.
• Children: a storesynk-product subtree (the result card).
• Events / state: none.

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.