Как создать карточку другого товара

Инструкция для сотрудников «Травоцвета» · Обновлено 5 ноября 2026

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

Что подготовить

Доступ к проекту «Магазин» в Тильде
Товар в каталоге с заполненными вариантами, ценами и наличием
Фотографии, название, описание и характеристики нового товара

Используйте актуальную карточку «Горный Алтай» в редакторе как исходную страницу. Открыть опубликованный образец

Шаг 1 — Дублируйте страницу

Откройте проект «Магазин» и найдите страницу «Горный Алтай»
В меню страницы выберите дублирование или создание копии
Откройте настройки новой страницы и задайте её название и уникальный адрес
Убедитесь, что редактируете копию, а исходная страница осталась без изменений

Копируйте страницу целиком. Так сохранятся элементы Zero Block, штатный товарный блок и блоки T123 с логикой. До замены содержания и проверки макета не публикуйте новую карточку.

Шаг 2 — Подключите товар из каталога

В редакторе страницы найдите штатную карточку товара ST205 / T762. В исходной странице она показывает название товара, цену, выбор размера и кнопку покупки
Откройте «Контент» этого блока
Замените связь с «Горным Алтаем» на нужный товар каталога и сохраните изменения
Проверьте, что блок показывает название нового товара

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

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

Шаг 3 — Проверьте фасовки в каталоге

Откройте сам товар в каталоге и проверьте каждый вариант:

Название фасовки понятно покупателю
Цена соответствует этой фасовке
Наличие и остаток указаны верно
Масса и артикул заполнены, если используются для продажи и доставки

Исправляйте названия, цены и наличие в каталоге. Подписи фасовок и текущая цена в первом экране обновляются автоматически. Их ручная замена в Zero Block будет перезаписана данными товара.

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

Шаг 4 — Замените содержание карточки

В Zero Block обновите название, фотографии, описание, характеристики, документы, отзывы и рекомендации. Проверьте также фотографию и название в нижней панели покупки.

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

Во время редактирования Zero Block показывает сохранённые подписи и число «0». Данные каталога и фактическое количество в корзине подставляются при работе страницы. Кнопки, рамка, число и знаки счётчика остаются обычными редактируемыми слоями.

Шаг 5 — Сохраните служебные классы

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

rh-variant-option — каждая кнопка фасовки
price — текущая цена первого экрана
v-order — кнопка «В корзину»
rh-product-name — заголовок товара первого экрана
rh-qty-shell — рамка счётчика
rh-qty-value — число в счётчике
rh-qty-minus и rh-qty-plus — области нажатия минуса и плюса
rh-qty-icon-minus и rh-qty-icon-plus — знаки минуса и плюса

В нижней панели сохраняйте классы rh-sticky-photo, rh-sticky-price, rh-sticky-name, rh-sticky-variant, rh-sticky-change и класс v-order кнопки покупки.

Класс указан в настройках элемента Zero Block. Не заменяйте его названием товара. Если создаёте новый элемент вместо старого, перенесите на него соответствующий класс.

У плюса и минуса знак и область нажатия — разные слои. При перемещении двигайте их вместе.

Шаг 6 — Проверьте количество кнопок фасовок

В исходном макете четыре кнопки. Если вариантов меньше, лишние кнопки скрываются на работающей странице. Если вариантов больше, последняя кнопка открывает список оставшихся фасовок.

Чтобы показывать каждую фасовку отдельной кнопкой, продублируйте кнопку в Zero Block, сохраните класс rh-variant-option и разместите копии слева направо. Проверьте расположение на компьютере и телефоне.

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

Шаг 7 — Оставьте T123 с логикой

На копии должны сохраниться три универсальных обработчика:

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

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

Универсальность относится к этим трём обработчикам. Галерея, попапы выбора размера, документы и другие дополнительные функции на странице могут иметь отдельные настройки. Их тоже необходимо проверить после дублирования; если функция перестала работать, передайте её специалисту, не публикуйте неисправную карточку.

Шаг 8 — Проверьте страницу перед передачей

Визуальное расположение смотрите в Zero Block на всех настроенных ширинах. Динамическую работу T123 проверяйте на опубликованной странице: в редакторе код может показываться как листинг.

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

Убедитесь, что название, фотографии, тексты и документы относятся к новому товару
Выберите каждую доступную фасовку и сверьте цену с каталогом
Добавьте две упаковки первой фасовки через плюс
Выберите вторую фасовку, добавьте одну упаковку и вернитесь к первой — счётчик должен показать два
Нажмите минус до нуля — из корзины должна удалиться только выбранная фасовка
Нажмите обычную кнопку «В корзину» — количество должно увеличиться на одну упаковку
Откройте корзину и сверьте название товара, фасовки, количество и суммы
Измените количество внутри корзины — счётчик на карточке должен обновиться
Перезагрузите страницу — количество должно сохраниться
Проверьте отсутствующий вариант, если он есть: он не должен добавляться в корзину
Прокрутите страницу и проверьте фасовку, цену и покупку в нижней панели
Повторите основные действия на телефоне; проверьте галерею, попапы, избранное и «Поделиться»

Для этой проверки не требуется оформлять заказ или отправлять форму. Проверяйте в отдельном окне браузера, чтобы не спутать тестовые товары с личной корзиной. Передавайте ссылку сотрудникам и покупателям только после успешной проверки.

Если что-то не работает

Остались старые фасовки или цена — проверьте связь штатного блока с товаром, наличие T123 и повторную публикацию
Счётчик не реагирует — проверьте классы всех слоёв, штатный товарный блок и его загрузку
Добавляется другой товар — проверьте, к какому товару привязан штатный блок; убедитесь, что на странице нет второго основного товарного блока
Цена отличается от ожидаемой — проверьте цену именно выбранного варианта в каталоге
Кнопки перекрываются — поправьте расположение в Zero Block отдельно на мобильной и настольной ширине
Не работает галерея или попап — передайте специалисту ссылку на копию и описание ошибки: у этих функций может быть отдельная привязка

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

Короткая памятка

Копия страницы → связь штатного блока с новым товаром → проверка каталога → замена содержания → сохранение классов и T123 → публикация → проверка фасовок, цены и корзины

В трёх универсальных скриптах не нужно менять ID блоков и названия фасовок. Оформление редактируется в Zero Block, данные о продаже — в каталоге.