Product List

The vviinn-results component displays search results on the page. It works in two modes:

Event-based (default)

Place vviinn-results on the same page as vviinn-text-search or vviinn-vps-button. The components communicate via events (vviinnTextSearchStarted, vviinnImageUploadFinished) and a shared store — no additional configuration needed.

You can also trigger a search directly by setting text-search-query or search-id props on vviinn-results.

Automatic redirect with URL parameters

When search components (vviinn-text-search, vviinn-vps-button) have results-page-url set, they redirect the user to a dedicated results page with URL parameters:

• Text search: /results?query=shoes
• Image search: /results?searchId=abc-123

The vviinn-results component with results-page-url set automatically parses these parameters on page load and triggers the corresponding search.

If text-search-query or search-id props are set explicitly, they take priority over URL parameters.

Examples

Text search

Results triggered by a text search query via the text-search-query prop.

Preview

Code

<vviinn-results
  token="YOUR_READ_ONLY_TOKEN"
  image-resolution-width="500"
  locale="en-US"
  results-count="9"
  text-search-query="YOUR_SEARCH_QUERY"
  product-details-new-tab="true"
  one-click-discovery-mode="append-grid"
></vviinn-results>

Filter column

Results filtered by the product_type column for “Möbel > Schränke & Regale” using the filter-value prop.

Preview

Code

<vviinn-results
  token="YOUR_READ_ONLY_TOKEN"
  image-resolution-width="500"
  locale="en-US"
  results-count="9"
  text-search-query="YOUR_SEARCH_QUERY"
  product-details-new-tab="true"
  one-click-discovery-mode="modal"
  filter-value="Möbel > Schränke &amp; Regale"
  use-inner-state="true"
></vviinn-results>