Search event integration

General information

Search has two main components:

• previewComponent — preview component
• resultPageComponent — search results page

Inside these components, events are generated when the user interacts with buttons:

• add to cart
• remove from cart
• add to wishlist
• remove from wishlist

In order to synchronize the state of the site outside of the search components, it is necessary to subscribe to the corresponding events and update the settings component (settingsComponent).

---

Adding an item to the cart

When an item is added to the cart from the search components, the addToCart event is triggered.

Handler implementation

On the website side, you need to implement the onAddToCart function, which accepts the productId from the event:

const onAddToCart = ({ detail: productId }) => {}

Event subscription

The function is called when an item is added to the cart:

previewComponent.addEventListener("addToCart", onAddToCart);
resultPageComponent.addEventListener("addToCart", onAddToCart);

Updating the settings component

The handler must update settingsComponent, passing the actual state of the cart:

const cartProducts = {
  10320617: 5,
  13082044: 3,
  80293500: 2,
  // productId: quantity
};

settingsComponent.setAttribute("cart", JSON.stringify(cartProducts));

Full example

const onAddToCart = ({ detail: productId }) => {
  // The store must add the product to the cart on its side

  const cartProducts = {
    10320617: 5,
    13082044: 3,
    80293500: 2,
  };

  settingsComponent.setAttribute("cart", JSON.stringify(cartProducts));
  console.log(`Product added to cart: ${productId}`);
};

previewComponent.addEventListener("addToCart", onAddToCart);
resultPageComponent.addEventListener("addToCart", onAddToCart);

---

Removing an item from the cart

Inside the search components, the removeFromCart event is triggered.

Handler implementation

const onRemoveFromCart = ({ detail: productId }) => {}

Event subscription

previewComponent.addEventListener("removeFromCart", onRemoveFromCart);
resultPageComponent.addEventListener("removeFromCart", onRemoveFromCart);

Updating the settings component

After removing the item, you need to update the cart state:

const cartProducts = {
  10320617: 5,
  13082044: 3,
  80293500: 2,
};

settingsComponent.setAttribute("cart", JSON.stringify(cartProducts));

Full example

const onRemoveFromCart = ({ detail: productId }) => {
  // The store must remove the product from the current user's cart

  const cartProducts = {
    10320617: 5,
    13082044: 3,
    80293500: 2,
  };

  settingsComponent.setAttribute("cart", JSON.stringify(cartProducts));
  console.log(`Product removed from cart: ${productId}`);
};

previewComponent.addEventListener("removeFromCart", onRemoveFromCart);
resultPageComponent.addEventListener("removeFromCart", onRemoveFromCart);

---

Adding an item to the Wishlist

Inside the search components, the addToWishlist event is triggered.

Handler implementation

const onAddToWishlist = ({ detail: productId }) => {}

Event subscription

previewComponent.addEventListener("addToWishlist", onAddToWishlist);
resultPageComponent.addEventListener("addToWishlist", onAddToWishlist);

Updating the settings component

The handler must update the wishlist state:

const wishlistProducts = {
  10320617: true,
  13082044: true,
  80293500: true,
  // productId: true
};

settingsComponent.setAttribute("wishlist", JSON.stringify(wishlistProducts));

Full example

const onAddToWishlist = ({ detail: productId }) => {
  // The store must add the product to the current user's wishlist

  const wishlistProducts = {
    10320617: true,
    13082044: true,
  };

  settingsComponent.setAttribute("wishlist", JSON.stringify(wishlistProducts));
  console.log(`Product added to wishlist: ${productId}`);
};

previewComponent.addEventListener("addToWishlist", onAddToWishlist);
resultPageComponent.addEventListener("addToWishlist", onAddToWishlist);

---

Removing an item from the Wishlist

Inside the search components, the removeFromWishlist event is triggered.

Handler implementation

const onRemoveFromWishlist = ({ detail: productId }) => {}

Event subscription

previewComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);
resultPageComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);

Updating the settings component

const wishlistProducts = {
  10320617: true,
  13082044: true,
  80293500: true,
};

settingsComponent.setAttribute("wishlist", JSON.stringify(wishlistProducts));

Full example

const onRemoveFromWishlist = ({ detail: productId }) => {
  // The store must remove the product from the current user's wishlist

  const wishlistProducts = {
    10320617: true,
    13082044: true,
  };

  settingsComponent.setAttribute("wishlist", JSON.stringify(wishlistProducts));
  console.log(`Product removed from wishlist: ${productId}`);
};

previewComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);
resultPageComponent.addEventListener("removeFromWishlist", onRemoveFromWishlist);