Как сделать карточку товара в Zero и связать её с каталогом товаров?

1. Добавь на страницу блок st205 (не st200!), укажи в нём productid нужного тебе товара (productid находится в карточке товара в каталоге внизу)

2. Напиши любой текст в поле "текст кнопки", нажми "сохранить" чтобы блок st205 переоткрылся и потом нажми "заполнить поля данными товара"

3. Создай зеро в котором будешь делать свою карточку товара над st205 и в нём создай:
а) Шейпы с классами v-img1, v-img2 и тд, где цифра в конце класса это номер нужной тебе в этом шейпе фотографии из галереи блока st205. Также обязательно загрузи в эти шейпы любые картинки и выключи в них lazyload, иначе фотографии не загрузятся



б) Текст с классом name для синхронизации названия товара



в) Текст с классом price для цены и текст с классом price-old для старой цены



г) Кнопку с классом v-order для добавления в корзину \ заказа



д) Кнопки с классами ver1, ver2 и тд. для переключения вариантов товара, где цифра это на какую кнопку st205 будет происходить клик



е) Текст с классом text для описания товара



ж) Тексты с классами vtitle1, vtitle2 и тд. для подгрузки названий переключателей характеристик



Опционально:
з) Если хочешь оставить галерею как в st205, то создай галерею в зеро с классом v-gal, и убери у неё все слайды и выбери нужные настройки



и) Если тебе нужно включить для такой галереи zoom on click, то включи его и в настройках галереи и выбери нужный пункт в генераторе
к) Если тебе нужно сделать для галереи кликабельные миниатюры прямо как в st205, то выбери соответствующий пункт в генераторе
л) Если тебе также нужно подгружать информацию о товаре из раздела "табы", то
создай соответствующие текстовые блоки с классами tabname-1, tabname-2 и тд для названий табов и tabtxt1, tabtxt2 для текста табов. Цифра в этих классах - номер нужного тебе таба для синхронизации



м) Если тебе нужна кнопка для добавления в избранное, то задай тексту, который будет меняться на "в избранном" класс fav-text. Чтобы сделать разные состояния кнопки в зависимости от того есть товар в избранном или нет, сделай любую активную кнопку\шейп и полностью перекрой её любой неактивной кнопкой, для которой задай класс fav. Неактивная кнопка будет скрываться при добавлении в избранное

Инструкция

Важно!

- Обязательно загружай в каталоге товаров для товара фотографию, даже она тебе не нужна, иначе мод просто не будет инициализироваться. Фото можно просто не использовать не задавая для него класс
- Так как подгрузка данных происходит динамически, то в некоторых случаях возможно проявление исходного вида зеро на доли секунды при загрузке страницы. Если это тебе мешает, то можно написать в текстовых полях для цены, описания и тд что-то по типу "загрузка...", в шейпы с фотками залить гиф с анимацией загрузки и тд, либо отличным вариантом будет добавить стандартный прелоадер Т228
- Ты можешь сделать как подчеркивание активной кнопки варианта товара так и обводку. Условно если нам нужно сделать обводку толщиной в 1px то просто укажи в поле толщина обводки "1px 1px 1px 1px". Если нужно сделать подчеркивание, то 0px 0px 1px 0px. Эти значения задают толщину для левого верхнего правого и нижнего краев кнопки соответственно
- Пока что данная модификация может быть только одна на странице
- Не забудь в карточке товара указать ссылку на страницу с описанием товара, чтобы у тебя не открывалась стандартная карточка по клику на товар в корзине
- Кнопка "Заполнить поля данным из каталога" в st205 появляется только когда в блок уже вбит productid. Если у тебя её нет, вбей productid и переоткрой блок st205

(Развернуть)

н) Если тебе нужно выводить артикул, то создай текстовый элемент и задай ему класс

о) Если тебе нужно выводить вес товара, то создай текстовый элемент и задай ему класс

4. Все нужные тебе варианты товара сделай в каталоге в карточке товара при помощи кнопок, т.е. радиокнопок быть не должно

5. Если тебе нужно сделать чтобы какие-либо из вариантов товара переключались выпадающим списком, то на каждый выпадающий список создай по форме в зероблоке и задай этим формам класс

В этих формах выбери тип ввода - dropdown и задай там значения так, чтобы они 1 в 1 повторяли значения выпадающего списка стандартной карточки st205 (значения должны быть уникальными)

6. Укажи recid блока st205 и productid в генераторе кода и выбери все необходимые тебе дополнительные настройки

7. Скопируй код и вставь в блок т123 после st205

8. После всех этих действий перейди в Настройки сайта => Ещё => Выбери пункт "Подключить jQuery на страницах сайта"

п) Если тебе нужно выводить количество товара в наличии, то создай текстовый элемент и задай ему класс

р) Если тебе нужно выводить информацию из раздела "характеристики" для товара, то создай текстовые элементы для названий характеристик и задай им классы charname-1, charname-2 и тд

Также создай текстовые элементы для описаний характеристик и задай им классы chartxt1, chartxt2 и тд

с) Если тебе нужно чтобы при отсутствии товара в наличии показывалась кнопка "Сообщить о поступлении" и открывался поп-ап, то добавь на страницу блок Тильды ST600 из раздела "Другое"

Пример работы модифиакации, который я делал на видео из инструкции.

Пример работы модификации