Discovery Slider and Set (vviinn-vpr-widget)

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

block-subtitle

Widget's subtitle

Type: string

block-title

Widget's title

Type: string

campaign-type

Campaign type

Type: "VCS" | "VPR" · Default: this.mode === "set" ? "VCS" : "VPR"

campaigns

Comma-separated list of campaign IDs

Type: string · Default: ""

color

Accepts any hex color code

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

excluded

Excluded filter. Example: "brand:Nike,Vans;custom_label_0:summer"

Type: string · Default: ""

favorite-show

Show or hide Favorite button

Type: boolean · Default: false

grid-arrows-dynamic

Hiding disabled arrows in the carousel if true

Type: boolean · Default: false

image-resolution-width

Resolution width of an image in the product card

Type: number · Default: DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH

image-width

Width of each recommended product image in Continuity mode

Type: number · Default: PRODUCT_CARD_IMAGE_WIDTH

locale

Locale for text localization

Type: "de-DE" | "en-US"

mode

Switch between carousel modes

Type: "continuity" | "grid" | "pure-grid" | "set" · Default: "continuity"

no-result-show

Showing a message (when true) or hiding the whole widget, when no results

Type: boolean · Default: true

no-result-text

A custom message is displayed when no results

Type: string · Default: ""

number-locale

Locale for number formatting. Falls back to locale

Type: string

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

product-id

ID of product you need recommendations for (required)

Type: string

set-items-amount

Items amount in set mode grid

Type: number · Default: 4

set-mode-discounts

List of discounts for Set mode. Example: "5, 10, 15, 20" (could be less than 4 numbers)

Type: string · Default: this.mode === "set" ? "5, 10, 15" : ""

show-extended-filters

Show extended filters on top

Type: boolean · Default: false

show-filters

Show filters on top

Type: boolean · Default: false

show-multiple-images

Show multiple images on hover (desktop only)

Type: boolean · Default: false

show-scroll

Show or hide the widget's scrollbar

Type: boolean · Default: true

token

Vviinn customer's token (required)

Type: string

update-button-location

Location of Update button for Set mode

Type: "onItem" | "onTop" | "topAndItem" · Default: "topAndItem"

Events

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

Event	Description
`vviinnAddToBasket`	Add to Basket button clicked
`vviinnFiltersChanged`	The filter's state changes
`vviinnNoResult`	Recommendation request failed
`vviinnProductClick`	Click on the product's link
`vviinnProductLoad`	Recommended product renders on the page
`vviinnProductView`	Recommended product appears in the viewport
`vviinnResultLoad`	The recommendation result renders on the page
`vviinnResultView`	The recommendation result appears in the viewport
`vviinnWidgetLoad`	Event emitted on widget load

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-energy-label-data-sheet-text`	Text of the data sheet link for the energy label.
`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-recommendations-subtitle`	Recommendations subtitle text.
`vviinn-recommendations-title`	Recommendations title text.
`vviinn-update-button-icon`	Icon of Update Button (Set mode).
`vviinn-update-button-text`	Text of Update Button on the top (Set mode).

Shadow Parts

Style these elements with vviinn-vpr-widget::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.
`carousel-button`	Both carousel navigation buttons (generic part).
`carousel-button-next`	The next/forward carousel navigation button.
`carousel-button-prev`	The previous/back carousel navigation button.
`content-container`	Product Card's content container.
`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.
`discount-label`	Discount label in Product Card (Set mode).
`discount-percentage`	Discount percentage inside the Add to Basket button (Set mode).
`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.
`list-card-content-container`	List card's content container.
`list-card-image-container`	List card's image container.
`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.
`recommendations-results`	For internal usage only!
`recommendations-subtitle`	Subtitle of the recommendations grid.
`recommendations-title`	Title of the recommendations grid.
`title`	Title inside Product Card.
`update-button-item`	Update Button inside the Product Card (Set mode).
`update-button-top`	Update Button on the top (Set mode).

CSS Custom Properties

Set them on vviinn-vpr-widget 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.
`--sidebar-animation-duration`	The animation duration of the recommendations sidebar.
`--vviinn-carousel-columns`	A number of items in grid mode.