SearchX Documentation — AI-Powered E-Commerce Search

Handle custom events dispatched by the SearchX SDK for add-to-cart and wishlist actions.

Overview

When the platform setting is set to "custom" or "other", the SearchX SDK dispatches standard DOM events instead of calling platform-specific API routes. This allows you to implement your own add-to-cart and wishlist logic.

Available Events

SearchX:addToCart

Fired when a user clicks the "Add to Cart" button:

window.addEventListener('SearchX:addToCart', (event) => {
  const { product } = event.detail;
  console.log('Add to cart:', product);
});

SearchX:addToWishlist

Fired when a user clicks the "Add to Wishlist" button:

window.addEventListener('SearchX:addToWishlist', (event) => {
  const { product } = event.detail;
  console.log('Add to wishlist:', product);
});

Product Object Fields

Both events provide a product object in event.detail. The table below describes the available fields and where each value originates from in your XML feed.

Field	Type	Feed Origin	Description
`unique_id`	`string`	`g:id` (Google/Facebook) · `UniqueID` (Skroutz)	Your product identifier from the feed. Use this field to match products back to your database.
`object_id`	`string`	—	Internal SearchX document identifier. Not suitable for database lookups.
`title`	`string`	`title` / `g:title` / `Name`	Product title
`price`	`number`	`g:price` / `g:sale_price` / `Price`	Product price (sale price when available)
`image`	`string`	`g:image_link` / `ImageURL`	Main product image URL
`url`	`string`	`link` / `g:link` / `ProductURL`	Product page URL
`brand`	`string`	`g:brand` / `Manufacturer`	Brand name
`barcodes`	`string`	`g:gtin`	Product barcode / GTIN
`categories`	`array`	`g:product_type` / `Category`	Category path(s)
`availability`	`string`	`g:availability` / `Availability`	Stock status
`color`	`string`	`g:color` / `Color`	Product color
`size`	`string`	`g:size` / `Size`	Product size

Important: use unique_id for product identification

The unique_id field maps directly to the product identifier in your XML feed (g:id, UniqueID, etc.). Always use unique_id when you need to match a product back to your own database — for example, when adding items to a cart or wishlist. Do not use object_id, which is an internal SearchX identifier and does not correspond to any value in your feed or database.

Platform Behavior

Platform	Add to Cart	Wishlist
`opencart`	Uses OpenCart API routes directly	Uses OpenCart API routes
`custom`	Dispatches `SearchX:addToCart` event	Dispatches `SearchX:addToWishlist` event
`other`	Dispatches `SearchX:addToCart` event	Dispatches `SearchX:addToWishlist` event

Example: Custom Cart Integration

window.addEventListener('SearchX:addToCart', (event) => {
  const { product } = event.detail;

  fetch('/api/cart/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      productId: product.unique_id,
      title: product.title,
      price: product.price,
      image: product.image,
      quantity: 1,
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      updateCartBadge(data.cartCount);
      showNotification(`${product.title} added to cart!`);
    });
});

Example: Custom Wishlist Integration

window.addEventListener('SearchX:addToWishlist', (event) => {
  const { product } = event.detail;

  fetch(`/api/wishlist/${product.unique_id}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
  }).then((response) => {
    if (response.ok) {
      showNotification(`${product.title} added to wishlist!`);
    }
  });
});

OpenCart Users

If you're using OpenCart, set platform: "opencart" in your SDK settings. The SDK will automatically use OpenCart's native cart API, and you don't need to set up event listeners.