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

Этот скрипт позволит тебе сделать совершенно любую карточку товара в зеро и связать её с каталогом на Tilda, чтобы потом не нужно было менять все параметры вручную в зеро. Работает с Autoscale. Пример работы модификации внизу cтраницы

Видео-инструкция

1-5 мин.
JavaScript
Zeroblock

Обновление от 30.10.23 - Обрати внимание что этот мод, как и расширение были переведены с #recid на blockid, то есть приставку #rec при внесении id блоков в генератор писать НЕ НУЖНО

!

1. Добавь на страницу блок st205, укажи в нём 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. Неактивная кнопка будет скрываться при добавлении в избранное



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

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



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

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

7. Скопируй код и вставь в блок т123 после st205
Инструкция
Важно!
- Так как подгрузка данных происходит динамически, то в некоторых случаях возможно проявление исходного вида зеро на доли секунды при загрузке страницы. Если это тебе мешает, то можно написать в текстовых полях для цены, описания и тд что-то по типу "загрузка...", в шейпы с фотками залить гиф с анимацией загрузки и тд, либо отличным вариантом будет добавить стандартный прелоадер Т228
- Ты можешь сделать как подчеркивание активной кнопки варианта товара так и обводку. Условно если нам нужно сделать обводку толщиной в 1px то просто укажи в поле толщина обводки "1px 1px 1px 1px". Если нужно сделать подчеркивание, то 0px 0px 1px 0px. Эти значения задают толщину для левого верхнего правого и нижнего краев кнопки соответственно
- Пока что данная модификация может быть только одна на странице
- Не забудь в карточке товара указать ссылку на страницу с описанием товара, чтобы у тебя не открывалась стандартная карточка по клику на товар в корзине
- Кнопка "Заполнить поля данным из каталога" в st205 появляется только когда в блок уже вбит productid. Если у тебя её нет, вбей productid и переоткрой блок st205
(Развернуть)
undefined
undefined
undefined
undefined
undefined
undefined
undefined
Скопировать
v-img1
Скопировать
name
Скопировать
price
Скопировать
price-old
Скопировать
v-order
Скопировать
ver1
Скопировать
text
Скопировать
vtitle1
Скопировать
v-gal
Скопировать
tabname-1
Скопировать
tabtxt1
Скопировать
fav-text
Скопировать
fav
Скопировать
undefined
cust
Скопировать код
Отчистить поля


123
Пример работы модифиакации, который я делал на видео из инструкции.
Пример работы модификации
Загрузка...
0 000 р.
В корзину!
Красная
Синяя
S
M
L
Everything should be made as simple as possible, but not simpler.
Creativity
Creativity
Таб из карточки товара 1
Таб из карточки товара 1
Таб из карточки товара 1
Текст таба из карточки товара 1 Текст таба из карточки товара 1 Текст таба из карточки товара 1 Текст таба из карточки товара 1 Текст таба из карточки товара 1
Текст таба из карточки товара 2 Текст таба из карточки товара 2 Текст таба из карточки товара 2 Текст таба из карточки товара 2 Текст таба из карточки товара 2
Текст таба из карточки товара 3 Текст таба из карточки товара 3 Текст таба из карточки товара 3 Текст таба из карточки товара 3 Текст таба из карточки товара 3
0 000 р.
Пример товара из каталога
SKU: 700.954.29
399
р.
200
р.
When we first checked out our new headphones, we noticed the box said 'improved bass by cool. We had to wonder, is this marketing jargon, or the real thing? But it only took a moment to realize that bass was not kidding.

Опиши нужный функционал через эту форму и он будет добавлен!

Нажимая "Отправить", вы даете согласие на обработку персональных данных в соответствии с Политикой конфиденциальности
Не хватает какой-то функции?