# Действия в виджетах: добавить в корзину и другое

Если вы используете рекомендательные виджеты с действиями (например, добавление в корзину или в избранное), необходимо реализовать соответствующие методы в window. Это часть стандартной фронтенд-интеграции: платформа Gravity Field вызывает эти методы внутри шаблона кампании, а поведение реализуется на стороне сайта.

Gravity Field не реализует эти методы — они должны быть определены клиентской стороной заранее.

# Как это работает

Gravity Field вставляет HTML-шаблон виджета в слот на странице. Если в этом шаблоне есть кнопки действий (например, "Добавить в корзину"), вы можете навесить на них обработчики и вызывать нужные методы через window.

Ниже — пример подключения логики к кнопкам добавления в корзину. Скрипт ищет все кнопки с классом .gf-recs__add-to-cart, получает SKU из data-атрибута и вызывает window.addToCart(sku)

function initWidgetActions(container) {
  container.querySelectorAll('.gf-recs__add-to-cart').forEach((button) => {
    button.addEventListener('click', async (e) => {
      e.preventDefault();
      const sku = button.dataset.sku;
      if (!sku || typeof window.addToCart !== 'function') return;

      button.disabled = true;
      try {
        await window.addToCart(sku);
        button.classList.add('_added');
        button.textContent = 'В корзине';
      } finally {
        button.disabled = false;
      }
    });
  });
}

Такой код обычно размещается в JS-блоке шаблона вариации

# Ожидаемые методы

Gravity Field ожидает, что следующие методы будут определены в window:

Назначение	Метод в `window`	Аргументы	Возвращаемое значение
Добавление товара в корзину	`addToCart(sku: string)`	SKU товара	`Promise` или `void`
Удаление товара из корзины	`removeFromCart(sku: string)`	SKU товара	`Promise` или `void`
Получение состава корзины	`getCart()`	—	`Array<{ sku, qty }>`
Добавление в избранное	`addToWishlist(sku: string)`	SKU товара	`Promise` или `void`
Удаление из избранного	`removeFromWishlist(sku: string)`	SKU товара	`Promise` или `void`
Получение состава избранного	`getWishlist()`	—	`Array<string>`

Методы могут быть асинхронными, главное — чтобы они были определены до запуска кампаний Gravity Field.

# Пример реализации

window.addToCart = function (sku) {
  return fetch('/api/cart/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ sku })
  }).then(() => {
    console.log('Добавлен в корзину:', sku);
  });
};

window.getCart = async function () {
  const res = await fetch('/api/cart');
  const data = await res.json();
  return data.items.map(item => ({ sku: item.sku, qty: item.quantity }));
};

# Рекомендации для frontend-интеграции

# Когда методы должны быть доступны

Кампании Gravity Field запускаются автоматически после загрузки скрипта платформы. Все методы должны быть определены в window заранее — до загрузки платформы или гарантированно доступны к моменту показа виджетов.

# Возвращаемые данные

getCart() → [{ sku: 'sku_1', qty: 2 }, { sku: 'sku_2', qty: 1 }]
getWishlist() → ['sku_1', 'sku_3']

Это используется, например, для отображения текущего состояния товаров (уже в корзине или нет).

# Как протестировать

Вызовите window.addToCart('sku_test') в консоли;
Добавьте лог внутри метода для отладки;
Проверьте работу кнопок в режиме предпросмотра кампании.

# Если элементы появляются динамически

Если кнопки или карточки товаров рендерятся после загрузки страницы:

GF.waitForElement('.gf-recs__add-to-cart', (buttons) => {
  initWidgetActions(document);
});

Или используйте MutationObserver для отслеживания DOM-изменений.

# FAQ

# Нужно ли отправлять события в Gravity Field?

Нет. Эти методы — часть клиентской логики. Трекинг действий через SSAPI обсуждается отдельно и настраивается при необходимости.

# Что если метод не определён?

Ничего не произойдёт. Рекомендуется логировать ошибки в шаблоне кампании (console.warn(...)).

# Можно ли использовать другие имена методов?

Да, если вы контролируете шаблон. Главное — синхронизировать имена с логикой, используемой в шаблоне.