Search Modal Window (vviinn-vps-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.

Properties

Set them as HTML attributes.

active

Toggle the widget's modal showing

Type: boolean · Default: true

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

ai-suggestions-show

Show the AI Suggestions block in search results

Type: boolean · Default: false

api-path

API endpoint URL (optional, defaults to production)

Type: string

auto-suggest-show

Show auto-suggest dropdown with search completions

Type: boolean · Default: true

campaign-id

Campaign ID used for Visual Search (deprecated)

Type: string · Default: ""

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

example-image-source

Example image source

Type: string · Default: DEFAULT_EXAMPLE_IMAGE

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

image-resolution-width

Resolution width of an image in the product card

Type: number · Default: SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH

locale

Locale for text localization

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

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, restricted to append only (no modal supported for this component)

Type: "append-grid" | "append-slider" | "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: true

product-details-redirect

Toggle for redirection to PDP on product's click

Type: boolean · Default: true

results-page-params

Custom URL param names for results page redirect. Default: "query=query&searchId=searchId".

Type: string

results-page-url

URL of the results page for automatic search redirect.

Type: string

show-interval-inputs

Show editable input fields in interval filters instead of readonly labels

Type: boolean · Default: false

show-multiple-images

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

Type: boolean · Default: false

show-results-in-modal

Render results in modal. Set false to redirect or show results on the page.

Type: boolean · Default: true

text-search-show

Show the text search

Type: boolean · Default: false

token

Vviinn customer's token (required)

Type: string

use-drag-and-drop

Accept image files dropped from the OS onto the upload button (desktop only)

Type: boolean · Default: false

Events

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

Event	Description
`vviinnImageCrop`	Crop area changes
`vviinnImageUploadStarted`	The image upload has started
`vviinnNoResult`	Wrong image format (supported formats depend on the browser), or the request failed
`vviinnRedirect`	Redirect to results page (can be intercepted by client via preventDefault)
`vviinnSelectObject`	User selects the detected object
`vviinnWidgetClose`	Event emitted on modal close
`vviinnWidgetLoad`	Event emitted on widget load
`vviinnWidgetOpen`	Event emitted on modal open

Slots

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

Slot	Description
`vviinn-basket-button-icon`	Icon of Add to Basket button.
`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-camera-button-text-start`	Title of Start Camera button.
`vviinn-camera-button-text-stop`	Title of Stop Camera button (for Desktop).
`vviinn-camera-capture-text`	Text above the Camera Capture button.
`vviinn-camera-icon`	Icon of Camera 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-search-modal-title`	Image search modal title.
`vviinn-image-upload-button-text`	Title of Upload Button.
`vviinn-image-upload-icon`	Icon of Upload Button.
`vviinn-privacy-badge-text`	Text content of privacy notification block.
`vviinn-results-vpr-icon`	One-Click Discovery icon.
`vviinn-teaser-text`	Text on the widget's main screen.
`vviinn-text-search-icon`	Icon of the text search block.

Shadow Parts

Style these elements with vviinn-vps-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.
`close-button`	Close Button in the modal's header.
`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.
`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.
`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.
`results-title`	Title on the results page.
`secondary-action`	Back Button in the modal's header.
`start-camera_button`	Start Camera Button.
`text-search-input`	Text search input.
`title`	Title inside Product Card.
`upload-photo_button`	Upload Photo Button.

CSS Custom Properties

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

Property	Description
`--basket-button-bg-color-pressed`	The background color of the pressed Basket Button.
`--color-primary`	The color of Search Button and bullets in Onboarding Block.
`--color-primary-hover`	The color of Search Button and bullets in Onboarding Block on mouse hover.
`--font-family`	The font family of the widget.
`--modal-border-radius`	The border radius of the modal.
`--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.
`--search-modal-animation-duration`	The animation duration of the modal on desktop devices.
`--search-modal-animation-duration-mobile`	The animation duration of the modal on mobile devices.