Home > widget-integration > FilterHandler > handleClickProductItem

FilterHandler.handleClickProductItem() method

Handles click events on product items in the product list.

This method processes product item clicks, handling special cases like banner links, embedded bundles, volume bundles, and wishlist buttons. For standard product clicks, it constructs the product detail URL with variant information and navigates to it, while also tracking the selected product page for analytics. Override this method to customize product click behavior or add shop-specific tracking.

Signature:

handleClickProductItem(target: any): void;

Parameters

Returns:

void

Remarks

Special handling includes: - Banner links: Opens URL directly (respects target="_blank") - Embedded/volume bundles: Prevents default navigation - Wishlist buttons: Prevents redirect to allow wishlist interaction - Elements with data-no-redirect="true": Prevents navigation

Example 1

Basic usage (called internally by handleCoreClick):

this.handleClickProductItem(event.target);

Example 2

Extend to add custom product click tracking:

window.boostWidgetIntegration.extend('FilterHandler', (FilterHandler) => {
  return class CustomFilterHandler extends FilterHandler {
    handleClickProductItem(target) {
      const productItem = target.closest('.boost-sd__product-item');
      if (productItem) {
        // Send custom analytics before navigation
        const productId = productItem.getAttribute('data-product-id');
        gtag('event', 'product_click', { product_id: productId });
      }
      return super.handleClickProductItem(target);
    }
  };
});