Интеграция событий поиска

Общая информация

У поиска есть два основных компонента:

• previewComponent — компонент превью
• resultPageComponent — страница результатов поиска

Внутри этих компонентов генерируются события при взаимодействии пользователя с кнопками:

• добавление в корзину
• удаление из корзины
• добавление в избранное
• удаление из избранного

Для того чтобы синхронизировать состояние сайта вне компонентов поиска, необходимо подписываться на соответствующие события и обновлять компонент настроек (settingsComponent).

---

Добавление товара в корзину

При добавлении товара в корзину из компонентов поиска вызывается событие addToCart.

Реализация обработчика

На стороне сайта необходимо реализовать функцию onAddToCart, принимающую id товара из события:

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

Подписка на событие

Функция вызывается в момент добавления товара в корзину:

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

Обновление компонента настроек

Обработчик обязан обновлять settingsComponent, передавая актуальное состояние корзины:

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

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

Полный пример

const onAddToCart = ({ detail: productId }) => {
  // Магазин должен добавить товар в корзину на своей стороне

  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);

---

Удаление товара из корзины

Внутри компонентов поиска вызывается событие removeFromCart.

Реализация обработчика

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

Подписка на событие

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

Обновление компонента настроек

После удаления товара необходимо обновить состояние корзины:

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

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

Полный пример

const onRemoveFromCart = ({ detail: productId }) => {
  // Магазин должен удалить товар из корзины текущего пользователя

  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);

---

Добавление товара в избранное (Wishlist)

Внутри компонентов поиска вызывается событие addToWishlist.

Реализация обработчика

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

Подписка на событие

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

Обновление компонента настроек

Обработчик должен обновлять состояние избранного:

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

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

Полный пример

const onAddToWishlist = ({ detail: productId }) => {
  // Магазин должен добавить товар в избранное текущего пользователя

  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);

---

Удаление товара из избранного (Wishlist)

Внутри компонентов поиска вызывается событие removeFromWishlist.

Реализация обработчика

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

Подписка на событие

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

Обновление компонента настроек

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

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

Полный пример

const onRemoveFromWishlist = ({ detail: productId }) => {
  // Магазин должен удалить товар из избранного текущего пользователя

  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);