Product List (vviinn-results)

Generated from vviinn-widgets 2.228.0, the latest release when these docs were built. If you pin an older version, some of these may not be in it yet — check the Changelog.

Try the properties live in the Playground.

Properties

Set them as HTML attributes.

add-price-container

Wrap the Product Card's price values in the container.

Type: boolean · Default: false

add-to-basket-show

Show or hide Add to Basket buttons

Type: boolean · Default: false

api-path

API endpoint URL (optional, defaults to production)

Type: string

campaign-id-text-search

Campaign ID used for Text Search

Type: string · Default: ""

campaign-id-visual-search

Campaign ID used for Visual Search

Type: string · Default: ""

css-url

URL to external CSS file for custom styling

Type: string · Default: null

currency-sign

The currency sign is displayed after the price

Type: string

favorite-show

Show or hide Favorite button

Type: boolean · Default: false

filter-column

Column for performing Product Listing Page request

Type: string · Default: "product_type"

filter-value

Value for performing Product Listing Page request

Type: string

image-resolution-width

Resolution width of an image in the product card

Type: number · Default: RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH

locale

Locale for text localization

Type: Locale

number-locale

Locale for number formatting. Falls back to locale

Type: string

one-click-discovery-campaigns

Comma-separated list of campaign IDs

Type: string · Default: ""

one-click-discovery-mode

One-Click Discovery Mode

Type: "append-grid" | "append-slider" | "modal" | "unset" · Default: "append-grid"

price-prefix

Prefix is displayed before the price

Type: string

product-details-new-tab

Toggle for opening product link in new tab or not

Type: boolean · Default: false

product-details-redirect

Toggle for redirection to PDP on product's click

Type: boolean · Default: true

results-count

Number of results displayed for text search and product listing page (less or equal to the value, set in the campaign)

Type: number

results-page-params

Custom URL param names parsed from results page URL. Default: "query=query&searchId=searchId".

Type: string

results-page-url

URL of the results page. When set, the component parses URL parameters (query, searchId) on load.

Type: string

search-id

Search ID for results request

Type: string

show-multiple-images

Show multiple images: swiper on mobile, hover on desktop in product cards

Type: boolean · Default: false

text-search-query

Query to perform a text search. It is recommended to use the search-query prop for vviinn-text-search instead, when using the Search Bar on the same page.

Type: string

token

Vviinn customer's token (required)

Type: string

Events

Listen with document.addEventListener(). The pages under Events describe the data each event carries.

Event	Description
vviinnNoResult	Triggered when a text search request fails
vviinnProductClick	Click on the product's link
vviinnProductLoad	Recommended product renders on the page
vviinnProductView	Recommended product appears in the viewport
vviinnResultLoad	The search result renders on the page
vviinnResultView	The search result appears in the viewport

Slots

Replace texts and icons with your own content: Replace Widget Content.

Slot	Description
vviinn-basket-button-icon	Text of Add to Basket icon.
vviinn-basket-button-icon-pressed	Icon of pressed Add to Basket button.
vviinn-basket-button-text	Text of Add to Basket button.
vviinn-basket-button-text-pressed	Text of pressed Add to Basket button.
vviinn-custom-label-0	Custom label with index 0.
vviinn-custom-label-1	Custom label with index 1.
vviinn-custom-label-2	Custom label with index 2.
vviinn-custom-label-3	Custom label with index 3.
vviinn-custom-label-4	Custom label with index 4.
vviinn-favorite-icon	Icon of Favorite button.
vviinn-favorite-icon-pressed	Icon of pressed Favorite button.
vviinn-image-placeholder-icon	Icon or content for the image placeholder.
vviinn-results-vpr-icon	One-Click Discovery icon.

Shadow Parts

Style these elements with vviinn-results::part(name): Styling Specific Elements.

Part	Description
basket-button	Add to Basket button.
basket-button-container	Product Card's basket button container.
brand	Brand inside Product Card.
content-card	Content card container (for entity-type="content").
content-card-content-container	Content card's content container.
content-card-image	Content card's image element.
content-card-image-container	Content card's image container.
content-card-image-picture	Content card's image picture element.
content-container	Product Card's content container.
content-label	Content card's label.
content-link	Content card's link.
content-title	Content card's title.
currency	Currency related to price.
custom-label-0	Custom label with index 0.
custom-label-1	Custom label with index 1.
custom-label-2	Custom label with index 2.
custom-label-3	Custom label with index 3.
custom-label-4	Custom label with index 4.
deeplink	Anchor element around product title. Rendered only if "deeplink" property is filled.
energy-label-container	Energy label container.
energy-label-data-sheet-link	Data sheet link.
energy-label-icon	Icon with an energy class.
energy-label-product-type	Product type.
favorite-button	Favorite button.
image	Product Card image.
image-container	Product Card's image container.
image-link	Anchor element around product image. Rendered only if "deeplink" property is filled.
image-picture	Picture element for image.
image-placeholder	Placeholder shown when no image is available.
list-card	List card container (for entity-type="list").
list-card-content-container	List card's content container.
list-card-image	List card's image element.
list-card-image-container	List card's image container.
list-card-image-picture	List card's image picture element.
list-label	List card's label (e.g., "Category").
list-title	List card's title.
price-amount-base-outdated	Numeric part of the base price.
price-amount-base-regular	Numeric part of the base price.
price-amount-base-sale	Numeric part of the base price.
price-amount-outdated	Numeric part of the price.
price-amount-regular	Numeric part of the price.
price-amount-sale	Numeric part of the price.
price-outdated	Block for outdated price. Rendered when the product contains the sale price.
price-prefix	Block rendered before each price element (for ex. "from").
price-regular	Block for a price if no sale price is presented.
price-sale	Block for sale price. Rendered only if the sale price is presented.
product-card	Product Card itself.
product-card-actions	Product Card actions wrapper.
product-card-actions-top	Product Card top actions wrapper.
product-images-pagination	Container for product images pagination dots (mobile only).
product-images-pagination-bullet	Individual pagination dot.
product-images-pagination-bullet-active	Active pagination dot.
product-type	Product Type inside Product Card.
products	Products container.
title	Title inside Product Card.

CSS Custom Properties

Set them on vviinn-results or a parent element: CSS Variables.

Property	Description
--basket-button-bg-color-pressed	The background color of the pressed Basket Button.
--font-family	The font family of the widget.
--product-card-content-align	The alignment of the content inside the product card's flex container.
--product-card-image-aspect-ratio	The aspect ratio of the product card image (e.g., "1 / 1", "3 / 4").
--product-card-image-bg-color	The background color of the product card image.
--product-card-image-border	The border of the product card image.
--product-card-text-align	The alignment of the text inside the product card.
--product-card-width	Minimum width of product card inside the grid.
--vviinn-results-row-gap	Vertical gap between rows of product cards.