Опции товара в каталоге Тильды: как вывести выбор

Опции товара в каталоге Тильды по умолчанию скрыты от глаз покупателя на странице списка: в сетке видна только фотография, цена и кнопка «в корзину», а выбор размера, цвета или комплектации открывается уже в карточке товара, попапом поверх каталога или на отдельной странице. Ко мне регулярно приходят с одной и той же просьбой: сделать так, чтобы человек мог выбрать размер прямо в каталоге, не переходя на карточку товара. Расскажу, что для этого есть в самой Тильде из коробки, а что придется собирать скриптом.

Что такое опции товара в интернет-магазине на Тильде

Термины у Тильды разведены жёстко, и путаница в них потом стоит времени. То, что обычно называют опциями размера и цвета, в каталоге Тильды называется вариантами товара: вариант это отдельная товарная позиция с набором свойств, и у каждого варианта может быть собственный артикул, изображение, цена и количество. Размер и цвет при этом не варианты, а свойства, из которых варианты собираются. Дополнительные опции это третья сущность: параметры, общие для всех вариантов товара, вроде упаковки или дополнительной услуги, они тоже влияют на итоговую цену, и в карточку их можно добавить не больше пяти. Ещё есть характеристики: они общие для товара и его вариантов и на цену не влияют.

Дальше в статье под словом «опции» я имею в виду то, что покупатель выбирает в карточке перед покупкой. В каталоге это варианты товара, собранные из свойств. У товара, заведённого прямо в блоке без каталога, это параметры: их не больше трёх, и режим выбора там всегда одиночный, обычным выпадающим меню.

На практике опции чаще всего встречаются в трех сценариях: одежда и обувь с размерной сеткой, товары с выбором цвета или материала, и комплекты, где к базовому товару можно добавить чехол, кабель или расширенную комплектацию с доплатой. Логика везде одна, отличается только тип отображения и количество значений в группе.

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

Где в Тильде настраивать опции и как их выводит каталог по умолчанию

Свойства задаются в разделе «Товары»: в карточке товара кнопка «Управление свойствами», затем «Добавить свойство». У свойства указывается название и вид отображения в карточке товара, и видов ровно три: выпадающий список, радио-кнопки или кнопки. Цвет и картинка это не отдельные виды отображения, а галочки «Свойство имеет цвет» и «Связать с изображением варианта». Отдельная цена, артикул, изображение и количество задаются не значению свойства, а варианту товара, кнопкой «Добавить вариант товара».

Таблицу комбинаций Тильда сама не строит. Даже когда свойств два, размер и цвет, каждый вариант добавляется руками: «Для того, чтобы добавить вариант, например, «Черные брюки размера M», нажмите на кнопку «Добавить вариант товара». Для каждого варианта товара можно задать свой набор свойств, отдельную цену и количество, доступное для продажи». На странице товара покупатель видит переключатели опций сразу под фотографией, цена и доступность обновляются при выборе. А вот в самом каталоге, на странице списка товаров, эти переключатели по умолчанию не отображаются: карточка в сетке показывает только базовую цену и кнопку «в корзину» или «подробнее».

Остатки по опциям при обмене с 1С

Если магазин синхронизируется с 1С через CommerceML, остатки и цены по каждой модификации можно подтягивать из учетной системы вместе с самим товаром. На практике этот обмен работает без сюрпризов только если названия значений опций в Тильде совпадают дословно с характеристиками в 1С: даже разница в регистре или лишний пробел в значении «42 (RU)» против «42(RU)» приводит к тому, что остаток не привязывается к нужному варианту и подтягивается в общий остаток по товару, а не по конкретному размеру. Перед первой синхронизацией я всегда сверяю справочник характеристик в 1С с опциями в Тильде вручную.

Как опции выглядят на мобильном

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

Попап карточки: штатный способ показать выбор варианта, не уходя из каталога

Никакого «быстрого просмотра» в настройках магазина нет, и включать его не нужно: попап карточки это штатное поведение блока с товарами. В справке про подробное описание товара сказано, что оно «будет отображаться в попапе товара или на странице», а у товара, заведённого в блоке, действие по клику выбирается полем «Ссылка для кнопки и карточки товара» из трёх вариантов: «Ссылка на страницу - откроется другая страница, Подробнее о товаре - откроется pop-up с детальной информацией, Добавить в корзину - товар будет сразу добавлен в корзину». В попапе покупатель видит фотографию, цену и те же переключатели свойств, что и на странице товара, и кладёт товар в корзину со страницы списка.

Для большинства каталогов этого достаточно: человек долистывает сетку, у понравившихся моделей открывает карточку попапом, проверяет наличие своего размера и кладет товар в корзину. Ограничение одно: это все равно попап поверх каталога, а не элемент, встроенный прямо в саму карточку списка. Если задача именно показать переключатель под фото без всплывающего окна, штатных настроек для этого нет, и придется дорабатывать шаблон скриптом.

Есть и обратная настройка: если попап не нужен и покупателя надо вести на отдельную страницу, в карточке товара заполняется поле «Ссылка на страницу с описанием товара», и тогда, дословно, «когда покупатель нажмет на изображение продукта в плитке товаров, он перейдет именно на эту страницу».

На одном из проектов с обувью именно попап карточки снял поток обращений в поддержку с вопросом «а есть ли нужный размер»: покупатель видел ответ сразу в каталоге, не дожидаясь ответа менеджера.

Как вывести выбор опции прямо в карточке каталога без попапа

Инлайн-селектор внутри карточки списка (кружки с цветом или кнопки с размерами прямо под фотографией, без перехода и без попапа) собирается кастомным скриптом поверх стандартной верстки каталога. Логика такая:

• Каждой карточке в сетке через Zero Block или через код блока присваивается свой класс и атрибут с данными по опциям товара: значения, артикулы, доступность.
• Скрипт после загрузки страницы находит все карточки и строит под фото компактный набор кнопок или кружков по значениям опции.
• При клике на значение скрипт помечает его активным и обновляет артикул, который уйдет в корзину при нажатии «в корзину» у этой карточки.

Вот упрощенный каркас такого скрипта, который показывает саму механику переключения без привязки к конкретной верстке. Реальные классы карточек различаются от шаблона к шаблону, их нужно смотреть через инструменты разработчика в браузере на конкретном сайте:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.js-product-options').forEach(function (wrap) {
    wrap.addEventListener('click', function (event) {
      var button = event.target.closest('.js-option-value');
      if (!button) return;

      wrap.querySelectorAll('.js-option-value').forEach(function (item) {
        item.classList.remove('is-active');
      });
      button.classList.add('is-active');

      var sku = button.getAttribute('data-sku');
      var card = wrap.closest('.js-product-card');
      var addButton = card.querySelector('.js-add-to-cart');
      addButton.setAttribute('data-product-sku', sku);
    });
  });
});

Перед тем как выкатывать инлайн-селектор на боевой каталог, я всегда прогоняю его на нескольких карточках с разным количеством значений опции и разным соотношением сторон фото: сетка легко разъезжается, если у одной карточки два значения опции, а у соседней шесть, и высота карточек в ряду перестает совпадать.

Дальше идет самое трудоемкое: связать выбранный артикул с тем, что Тильда реально отправляет в корзину при клике на «в корзину» у этой карточки. Здесь без вариантов, нужно смотреть, как оформлена конкретная карточка в конкретном шаблоне, и подставлять код под нее, универсального решения на все шаблоны и все версии блоков не существует. Такие доработки я оформляю как кастомную доработку Тильды: простой инлайн-селектор под одну группу опций на одном шаблоне карточки обычно укладывается в от 3 000 ₽, а если нужно завести несколько групп опций сразу (размер плюс цвет) и синхронизировать остатки по каждой комбинации с учетной системой, это уже комплексная интеграция, от 40 000 ₽.

Особенности вывода опций для размера, цвета и комплектации

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

• Размер одежды и обуви лучше сопровождать таблицей соответствия (RU/EU/US) рядом с переключателем, иначе часть возвратов будет из-за путаницы в сетках размеров, а не из-за качества товара.
• Цвет нагляднее показывать миниатюрами реального оттенка, а не текстовыми подписями вроде «синий» или «мокрый асфальт»: человек сверяет цвет визуально, а не читает название.
• Комплектация и объем обычно решаются обычным выпадающим списком: вариантов немного, и наглядность здесь не так критична.
• Если значений опции больше пяти-шести, например вся сетка размеров одежды от XS до XXL плюс полуразмеры, кнопки в карточке каталога быстро становятся тесными: в таких случаях лучше оставить выпадающий список даже там, где для товаров с двумя-тремя значениями используются кнопки или кружки.

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

Если в настройках магазина включен учет остатков по опциям, Тильда сама делает недоступное значение неактивным (например, серым и некликабельным), когда конкретный размер или цвет закончился. Это штатное поведение, а не то, что нужно программировать отдельно.

Сравнение способов показать опции в каталоге

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

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

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Можно ли задать разную цену для каждого размера или цвета опции?

Да, но цена и артикул задаются не значению свойства, а варианту товара: «Для каждого варианта товара можно задать свой набор свойств, отдельную цену и количество, доступное для продажи», плюс у варианта могут быть свои артикул и изображение. Делается это в самой Тильде без кода, в карточке товара. Дополнительные опции вроде упаковки работают иначе: они общие для всех вариантов и прибавляются к цене.

Как сделать так, чтобы недоступный размер нельзя было выбрать?

Включите учет остатков по опциям в настройках магазина и укажите остаток для каждого значения при заведении товара. Тильда автоматически заблокирует значение, если остаток по нему нулевой, дополнительный код для этого не нужен. Обратите внимание: остаток считается по конкретному значению опции, а не по товару в целом, поэтому размер S может быть недоступен, даже если по товару есть остаток на складе за счет других размеров.

Почему в каталоге видна только цена, а размер выбирается только на странице товара?

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

Нужно ли программировать, чтобы вывести опции прямо в сетке каталога?

Если устраивает попап карточки товара, программировать не нужно, это штатное поведение блока с товарами. Если же нужен именно селектор внутри карточки списка, без всплывающего окна, это кастомная доработка под конкретный шаблон карточки, простой вариант с одной группой опций обычно от 3 000 ₽.