Інтеграція корзини

Spefix підтримує два режими роботи з корзиною: базовий і з лічильником кількості. Обидва налаштовуються через один виклик:

window.SpefixSearch.setCartConfig(config)

Актуальність стану

setCartConfig потрібно викликати щоразу при зміні стану корзини — після додавання, видалення або зміни кількості товару. Інакше віджет відображатиме застарілі дані.

---

Базовий режим

Відображає кнопку «Додати в кошик» біля кожного товару у результатах пошуку.

Обов'язкові поля

Поле	Тип	Опис
addToCart	(id: string) => void	Викликається при кліку на кнопку. Отримує id товару
cartItemIds	string[]	Масив id товарів, які зараз у корзині

Поведінка

• При кліку на кнопку викликається addToCart(productId).
• Якщо id товару вже є в cartItemIds — кнопка візуально не змінюється. Логіка відображення стану залишається на стороні вашого сайту.

Приклад

JavaScript

window.SpefixSearch.setCartConfig({
  addToCart(id) {
    console.log("add item", id)
  },
  cartItemIds: ["101", "205"],
})

TypeScript

window.SpefixSearch.setCartConfig({
  addToCart(id: string) {
    console.log("add item", id)
  },
  cartItemIds: ["101", "205"],
})

---

Режим лічильника

Дозволяє користувачу вказати кількість товару прямо у віджеті пошуку — через кнопки + / − або ручний ввід.

Обов'язкові поля

Поле	Тип	Опис
quantityItems	Array<{ id: string; quantity: number }>	Поточна кількість кожного товару в корзині
onQuantityChange	(item: { id: string; quantity: number }) => void | Promise<void>	Викликається при підтвердженні кількості через кнопку Apply

Поведінка

1. Спочатку відображається звичайна кнопка «Додати в кошик».
2. При кліку кнопка розгортається у лічильник — поля +, − і ручний ввід.
3. Після натискання Apply викликається onQuantityChange з об'єктом поточного товару. Лічильник згортається назад у кнопку.
4. Якщо кількість більша за 0 — на кнопці відображається вибрана кількість.
5. Якщо кількість 0 — кнопка повертається до початкового вигляду. Подія onQuantityChange все одно спрацьовує з quantity: 0, щоб ви могли видалити товар на стороні бекенду.

Приклад

JavaScript

window.SpefixSearch.setCartConfig({
  quantityItems: [
    { id: "101", quantity: 2 },
    { id: "205", quantity: 1 },
  ],
  onQuantityChange: (item) => {console.log(item)}
  // приклад item:
  // { id: "101", quantity: 3 }
})

TypeScript

window.SpefixSearch.setCartConfig({
  quantityItems: [
    { id: "101", quantity: 2 },
    { id: "205", quantity: 1 },
  ],
  onQuantityChange: (item: { id: string, quantity: number }) => {console.log(item)}
  // приклад item:
  // { id: "101", quantity: 3 }
})

tip

onQuantityChange може бути асинхронною — віджет коректно обробляє Promise.

---

Як віджет обирає режим

Віджет перевіряє конфіг у такому порядку:

1. Якщо передано quantityItems і onQuantityChange → вмикається режим лічильника.
2. Якщо передано addToCart і cartItemIds → вмикається базовий режим.

---

Довідка по полях

Поле	Режим	Тип
addToCart	базовий	(id: string) => void
cartItemIds	базовий	string[]
quantityItems	лічильник	Array<{ id: string; quantity: number }>
onQuantityChange	лічильник	(item: { id: string; quantity: number }) => void | Promise<void>