Как добавить дополнительные товары в карточку товара на Tilda

Иногда есть потребность в карточку товара интернет-магазина добавить дополнительные позиции. У Тильды есть своё стандартное решение — в любом блоке каталога можно включить секцию «Смотрите также». Эту секцию можно переименовать по-своему и выбрать категории товаров, которые будут показываться в данной секции.

У этого решения несколько минусов:

• Нельзя добавить конкретные товары, а только категории
• Располагается такой блок в низу карточки товара, можно и не долистать, если описание большое
• Надо добавлять в корзину каждый товар отдельно

Чтобы решить эти проблемы я сделал небольшой скрипт дополнительных товаров. Он добавляет в карточку товара отдельный блок с чекбоксами. Покупатель отмечает нужные позиции, нажимает обычную кнопку покупки, и основной товар вместе с дополнениями
попадает в корзину.

В этой статье я покажу, как подключить скрипт и какие значения нужно заменить.
Специальные знания JavaScript не понадобятся: мы будем менять только небольшой
блок настроек в начале файла.

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

Когда покупатель открывает карточку, скрипт:

1. Находит характеристику Допы.
2. Читает из нее UID товаров.
3. Получает из каталога их названия, цены, изображения и остатки.
4. Показывает товары в карточке с чекбоксами.
5. Добавляет отмеченные позиции в корзину вместе с основным товаром.

Связи хранятся в самих товарах, поэтому для изменения комплекта не нужно каждый
раз редактировать код. Достаточно изменить значение характеристики Допы в
каталоге Tilda.

Что понадобится

Перед началом подготовьте:

• опубликованный сайт на Tilda
• каталог Tilda Store
• стандартную корзину Tilda
• файл tilda-product-addons-PUBLIC-t123.html
• доступ к настройкам сайта и товаров

Шаг 1. Подключаем скрипт к сайту

Если товары открываются в popup

Это основной и самый распространенный вариант.

1. Создайте в Tilda отдельную страницу для общего подвала сайта
2. Добавьте на нее HTML-блок T123
3. Откройте файл tilda-product-addons-PUBLIC-t123.html
4. Скопируйте его содержимое целиком и вставьте в T123
5. Откройте Настройки сайта → Шапка и подвал
6. Назначьте созданную страницу подвалом сайта
7. Проверьте, что общий подвал не отключен в настройках страниц каталога
8. Опубликуйте страницу подвала
9. Заново опубликуйте все страницы, на которых находится каталог.

Если каждый товар открывается отдельной страницей

В этом случае принцип тот же, но подвал должен подключаться именно к товарным страницам:

1. Включите в настройках магазина открытие карточки товара как страницы
2. Создайте или выберите страницу подвала для товарных страниц
3. Добавьте в этот подвал блок T123 со скриптом
4. Назначьте подвал товарным страницам в настройках магазина
5. Опубликуйте подвал и товарные страницы.

Шаг 2. Находим блок настроек в коде

В самом начале файла находится объект:

window.TILDA_PRODUCT_ADDONS_CONFIG = {
  // остальные настройки...

  catalogSources: [
    { recId: "ВАШ_REC_ID", storePartUid: "UID_КАТЕГОРИИ" }
  ],

  // остальные настройки...
};

Это конфигурация скрипта. Рабочую логику ниже менять не нужно.
Обязательное поле фактически одно:

catalogSources: []

В него нужно записать каталоги, из которых скрипт будет брать данные
дополнительных товаров.

Для каждой категории нужны два значения:

{
  recId: "1234567890",
  storePartUid: "111111111111"
}

recId — это id блока каталога товаров
storePartUid — UID категории каталога

Это уникальный номер раздела или категории Tilda Store.

Например:

Если аксессуары лежат в нескольких категориях, у каждой может быть свой
storePartUid.

Шаг 3. Находим recId и storePartUid

Самый простой способ, открыть редактор Тильды и скопировать id блока с каталогом оттуда, вставлять в скрипт нужно без rec

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

Если категорий несколько

Повторите эту процедуру для каждой категории, в которой лежат дополнительные товары. Например, чехлы находятся в одной категории, а кабели — в другой. Тогда конфигурация будет выглядеть так:

catalogSources: [
  { recId: "1234567890", storePartUid: "111111111111" },
  { recId: "1234567890", storePartUid: "222222222222" }
]

Шаг 4. Находим ID товара и заполняем характеристику

Там же в редакторе каталога, открываем товар, прокручиваем вниз и копируем Product ID

В настройках товара создаём характеристику «Допы», а в её значении добавляем через запятую UID дополнительных товаров

PROFIT! Вы великолепны!

Собственно на этом всё. Ниже в файле прикреплю максимально подробную инструкцию, в которой затронуты прочие и необязательные настройки скрипта.

А если возникнут трудности, пишите в телегу :)