Product Events

Every vviinn widget emits events that you can listen to with document.addEventListener().

All these events are available on Discovery (Button, Widget) and Search (Button, Widget), and the following props are available for each event:

• campaignTypeId
• campaignTypeName
• widgetId (if exists)
• widgetVersion

Some events have additional props, summarized in the table below.

Name	Description	Props
vviinnProductLoad	The event is valid for all products that are received by the component after a successful search request.	productId productName productType productRank
vviinnProductView	Triggered once for each product within one session when the product card’s image appears in the browser’s viewport.	productId productName productType productRank
vviinnProductClick	Triggered when the user clicks on the product link.	productId productName productType productRank clickEvent
vviinnResultLoad	Triggered after at least one result is loaded.	–
vviinnResultView	The event is related to vviinnProductView. It is triggered only once per each Product AI request. Also, vviinnResultView is triggered when the user changes any filter, changes crop area, or clicks on objects while using Product AI Search.	–
vviinnAddToBasket	Triggered when the user clicks on the “Add to Basket” button. The button can be shown by passing the add-to-basket-show property.	productId productName productType productRank
vviinnAddToFavorite	Triggered when the user clicks on the “Favorite” button. The button can be shown by passing the favorite-show property.	productId productName productType productRank

Examples

document.addEventListener("vviinnProductLoad", ({ detail }) => {
  console.log(detail);
});

// Output:
{
  "productId": "123456",
  "productRank": 0,
  "productName": "Couchtisch Rolf Benz 8770",
  "productType": "Table",
  "campaignTypeId": "VPR",
  "campaignTypeName": "Similar Products",
  "widgetId": "my-recommendation-widget",
  "widgetVersion": "2.1.0"
}
// ... and other loaded products