Оформление

Примеры товарных рекомендаций

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

Сначала создайте товарную рекомендацию. Пока её нет, размещение и отображение в кабинете недоступны.

Карточка товара: дополните образ ​

Задача — показать совместимые товары после описания.

  1. Рекомендация «Основной каталог — покупки»
    • источник: основной товарный фид;
    • метрика: Выручка;
    • цель: Покупка;
    • моделируемая конверсия: вероятность покупки.
  2. Отображение «Карусель карточки товара»
    • раскладка: карусель;
    • карточка: изображение, название, цена, кнопка;
    • на мобильном видна часть следующей карточки.
  3. Размещение «Дополните образ — карточка товара»
    • сценарий: Дополнение к товару;
    • максимум: 8 товаров;
    • фильтр: товар доступен к покупке;
    • заголовок: «Дополните образ»;
    • доставка: готовый блок Sales Ninja;
    • селектор: стабильный контейнер после описания товара;
    • условия: только страницы карточек товара.

Эту же рекомендацию можно подключить ко второму размещению в корзине.

Карточка товара: похожие товары ​

Задача — дать альтернативы открытому товару, а не аксессуары к нему.

  • рекомендация та же, что в примере выше;
  • отображение: сетка из четырёх компактных карточек;
  • размещение со сценарием Альтернативы товару;
  • заголовок: «Похожие товары»;
  • условия: карточка товара, при необходимости — только когда основной товар недоступен.

Корзина: дополните заказ ​

Задача — предложить товары, которыми логично дополнить уже выбранный состав.

  • рекомендация: тот же каталог и сигнал покупки;
  • отображение: горизонтальный список или карусель;
  • размещение со сценарием Дополнения к корзине;
  • заголовок: «Дополните заказ»;
  • селектор: контейнер под составом корзины;
  • условия: страницы корзины и оформления заказа.

Главная: популярное без истории ​

Задача — заполнить блок, когда у посетителя ещё нет просмотров и покупок.

  • рекомендация: обычные рекомендации по основному каталогу;
  • отображение: сетка из четырёх карточек;
  • размещение со сценарием Популярное без истории;
  • заголовок: «Популярное сейчас»;
  • условия: главная или посадочные без товарного контекста.

Своя витрина через JavaScript ​

Задача — показать рекомендации в компоненте дизайн-системы сайта.

  1. Создайте рекомендацию и размещение как в примере карточки товара.
  2. В размещении выберите способ Передавать данные через JavaScript.
  3. Отображение можно не выбирать: сайт рисует карточки сам.
  4. После сохранения скопируйте пример из редактора размещения или возьмите полный контракт в JavaScript API.

В ответе приходят товары с названием, ссылкой, изображением, ценой, старой ценой, валютой, наличием и идентификаторами. Sales Ninja не вставляет HTML и не пишет показы и клики за витрину сайта.

Минимальный обработчик строит карточки из этих полей:

js
const unsubscribe = await ninja('onProductRecommendations', {
  placementId: '11111111-1111-1111-1111-111111111111',
  handler: ({ status, items }) => {
    const root = document.querySelector('#recommendations')
    if (!root) return

    if (status === 'cleared') {
      root.replaceChildren()
      return
    }

    root.replaceChildren(
      ...items.map((item) => {
        const card = document.createElement('a')
        card.href = item.linkUrl || '#'
        card.className = 'rec-card'

        if (item.imageUrl) {
          const image = document.createElement('img')
          image.src = item.imageUrl
          image.alt = item.title || ''
          card.append(image)
        }

        const title = document.createElement('span')
        title.textContent = item.title || ''
        card.append(title)

        if (item.priceAmount != null) {
          const price = document.createElement('span')
          price.textContent = `${item.priceAmount} ${item.priceCurrency || ''}`
          card.append(price)
        }

        return card
      })
    )
  }
})

Полный пример ответа с несколькими товарами и настройками внешнего вида — в JavaScript API.

См. также ​