Search Modal (vviinn-vps-button)

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-style

Add style to the button

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"

mode

Show the onboarding step, start the camera on opening, or skip the onboarding and move to the direct image upload.

Type: "camera" | "modal" | "upload" · Default: "modal"

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
vviinnProductClick	Click on the product's link
vviinnProductLoad	The recommendation renders on the page
vviinnProductView	The recommendation appears in the viewport
vviinnResultLoad	The search result renders on the page
vviinnResultView	The search result appears in the viewport
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-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-drag-drop-icon	Icon of the drag & drop zone.
vviinn-drag-drop-text	Hint text of the drag & drop zone.
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-suggestions-icon	Custom icon to replace default sparkle emoji.
vviinn-suggestions-title	Custom title text to replace default "AI Suggestions".
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-button::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.
button	Clickable button element.
close-button	Close Button in the modal's header.
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.
drop-zone	Drag & drop container (when useDragAndDrop is enabled).
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-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.
suggestion-filter-button	Toggle button for filter suggestions.
suggestion-item	Individual suggestion item.
suggestion-link	Clickable suggestion text/link.
suggestions-container	The main suggestions container element.
suggestions-description	The description text element.
suggestions-header	The header section containing icon and title.
suggestions-icon	The sparkle icon wrapper.
suggestions-list	The list container for all suggestions.
suggestions-title	The title text element.
suggestions-wrapper	The wrapper around the suggestions list.
text-search-input	Text search input.
title	Title inside Product Card.
upload-photo_button	Upload Photo Button.
vviinn-button	Button element container.

CSS Custom Properties

Set them on vviinn-vps-button 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.