Карточки избранного ST110 в Tilda: фотографии, варианты, удаление и сердечки

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

Этот мод меняет оформление штатного ST110 и сердечек магазинных карточек. Добавлением и удалением товаров продолжает управлять Tilda. Начнём с реального списка товаров, затем настроим сетку, содержимое карточки и состояния кнопок.

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

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

Пустая область «Где применять» охватывает нужные элементы страницы. Чтобы ограничить оформление, задайте общий uc-класс ST110 и магазинным блокам.

Сердечки находятся в магазине, а не внутри окна ST110. Поэтому ID одного избранного не охватывает кнопки в соседнем каталоге. Если карточки окна изменились, а сердечки нет, проверьте сначала область и переключатель их оформления. Не добавляйте второй случайный код поверх первого: это затруднит понимание того, какие настройки сейчас отвечают за результат.

Фото можно расположить слева или сверху. В варианте «Фото сверху» оно растягивается на ширину карточки. Подберите колонки и промежутки под количество товаров и длину текста.

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

Настройте текстовые элементы отдельно. Для вариантов товара предусмотрены свои плашки и подписи, для артикула — отдельная настройка скрытия.

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

Выберите вид штатной кнопки удаления. Убедитесь, что она не перекрывает название и остаётся понятной на телефоне. Затем настройте сердечко каталога, включая активное состояние и наведение.

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

В адаптивах задайте нужные ширины и изменяемые параметры. Вставьте CSS в T123 после магазина и ST110, заменив предыдущую версию этого мода, затем опубликуйте страницу.

• Фото, названия и варианты читаются.
• Удаление не закрывает содержимое карточки.
• Сердечки меняются в правильных магазинных блоках.
• Добавление и удаление работают на телефоне.

Не подключайте одновременно другое оформление тех же карточек ST110. Если результат отличается от настроек, сначала исключите конфликт прежнего CSS и неверную область применения.

Читайте также: Иконка корзины в Zero Block: счётчик и сумма заказа · Сравнение товаров в Tilda: как сделать удобную таблицу.