Как сделать своё избранное в Zero Block
Дизайнер может нарисовать карточку и кнопку-сердце в Zero Block, но одного переключения цвета недостаточно: выбор должен сохраниться после перезагрузки, а одинаковые карточки — показывать одно состояние. MOD-179 решает именно эту локальную задачу без ST110. Он не подменяет родное избранное магазина и не обещает экран списка, счётчик или перенос между устройствами.
Короткий ответ
Сначала выберите один из двух сценариев. Если клиенту нужен родной экран
избранного Тильды, используйте ST110. Если достаточно сердечек на собственных
карточках и локальной памяти браузера, пометьте кнопки data-mk-wishlist и
установите MOD-179. Смешивать эти два списка без отдельной интеграции нельзя.
Что должно произойти после клика
Локальное избранное — это не один класс active. После нажатия:
- Товар добавляется или удаляется из сохранённого списка.
- Все кнопки этого товара меняют состояние.
- Кнопки получают корректное
aria-pressed. - После перезагрузки выбор восстанавливается.
Если скрипт делает только первый визуальный пункт, посетитель получает декорацию, а не функцию.
Два разных механизма
Родное избранное Тильды хранит window.twishlist, использует ST110 и умеет
показывать штатный экран и счётчик. Это подходящий выбор для каталога, когда
нужна именно магазинная функция.
MOD-179 хранит массив id в отдельном ключе mk-wishlist. Он не вызывает
twishlist__addProduct и не притворяется родным избранным. Благодаря этому мод
не зависит от внутреннего рантайма ST110, но у него нет штатного экрана списка.
Оба механизма можно связать отдельным проектным кодом, но готовая версия MOD-179 этого не обещает. Иначе дизайнер увидит активное сердце, а родной список — нет.
Как разметить кнопки
Каждая кнопка получает один и тот же id в data-mk-wishlist, если показывает
один и тот же товар:
<button type="button" data-mk-wishlist="chair-01" aria-label="В избранное">
♡
</button>Выбранной кнопке мод добавит класс is-favorite. В Zero Block остаётся настроить
два внешних вида: обычный и выбранный. Если карточка повторяется в слайдере или
на другой части страницы, используйте тот же id — состояние синхронизируется.
Какие данные нужны карточке
MOD-179 хранит id, а не карточку товара целиком. Минимум — устойчивый уникальный идентификатор без пробелов. Не берите его из текста заголовка: клиент переименует товар, и старая запись перестанет совпадать.
Если карточка связана с каталогом, удобно использовать uid. Для самостоятельной
витрины заведите короткий внутренний код вроде chair-01 и не меняйте его при
редизайне.
Где хранится выбор
localStorage относится к одному домену и браузеру. Избранное не переносится:
- между телефоном и компьютером;
- из обычного окна в приватное;
- после очистки данных сайта;
- между разными доменами проекта.
Если клиенту нужен список внутри личного кабинета, это уже серверная функция с авторизацией, а не модификация кнопки.
MOD-179 готов: он синхронизирует одинаковые кнопки на странице,
сохраняет id и сообщает об изменении событием mk:wishlist-change. ST110, экран
избранного, аккаунт и перенос между устройствами в его контракт не входят.
Проверка перед сдачей
- На странице несколько карточек, и каждая меняется независимо.
- Один товар показан дважды — обе кнопки синхронны.
- У каждой кнопки есть понятная подпись и
aria-pressed. - После перезагрузки выбор восстановился.
- После очистки данных сайта выбор пропал ожидаемо.
- На другой странице того же домена с тем же модом состояние совпадает.
- Если на проекте есть ST110, клиент понимает, что это отдельный список.
Клиенту запишите ограничение одного браузера. Тогда очистка localStorage не будет выглядеть как исчезновение заказов или данных аккаунта.