1-5 мин
Zeroblock
Light
5
Этот скрипт позволит тебе сделать совершенно любую карточку товара в зероблоке и связать её с каталогом на Tilda, чтобы потом не нужно было менять все параметры вручную в зеро. Модификация совместима с Autoscale.
Как сделать карточку товара в Zero и связать её с каталогом товаров?
(cвернуть)
Инструкция
ВАЖНО – c момента выхода видео Тильда вносила изменения в код, которые изменили некоторые шаги в инструкции поэтому обязательно смотри текстовую инструкцию ниже
v-img1
name
price
v-order
ver1
text
vtitle1
v-gal
tabname-1
fav-text
sku
weight
length
width
height
Если тебе нужно выводить длину\ширину\высоту товара, то создай текстовые элемент и задай им классы
stock
charname-1
chartxt-1
cust
fav
tabtxt1
price-old
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. Неактивная кнопка будет скрываться при добавлении в избранное
н) Если тебе нужно выводить артикул, то создай текстовый элемент и задай ему класс
о) Если тебе нужно выводить вес товара, то создай текстовый элемент и задай ему класс
п) Если тебе нужно выводить количество товара в наличии, то создай текстовый элемент и задай ему класс
р) Если тебе нужно выводить информацию из раздела "характеристики" для товара, то создай текстовые элементы для названий характеристик и задай им классы charname-1, charname-2 и тд и для значений chartxt-1, chartxt-2 и тд
с) Если тебе нужно чтобы при отсутствии товара в наличии показывалась кнопка "Сообщить о поступлении" и открывался поп-ап, то добавь на страницу блок Тильды ST600 из раздела "Другое"
4. Все нужные тебе варианты товара сделай в каталоге в карточке товара при помощи кнопок, т.е. радиокнопок быть не должно
5. Если тебе нужно сделать чтобы какие-либо из вариантов товара переключались выпадающим списком, то на каждый выпадающий список создай по форме в зероблоке и задай этим формам класс
В этих формах выбери тип ввода - dropdown и задай там значения так, чтобы они 1 в 1 повторяли значения выпадающего списка стандартной карточки st205 (значения должны быть уникальными)
6. Укажи recid блока st205 и productid в генераторе кода и выбери все необходимые тебе дополнительные настройки
7. Скопируй код и вставь в блок т123 после st205
8. После всех этих действий перейди в Настройки сайта => Ещё => Выбери пункт "Подключить jQuery на страницах сайта"
- Обязательно загружай в каталоге товаров для товара фотографию, даже она тебе не нужна, иначе мод просто не будет инициализироваться. Фото можно просто не использовать не задавая для него класс
- Так как подгрузка данных происходит динамически, то в некоторых случаях возможно проявление исходного вида зеро на доли секунды при загрузке страницы. Если это тебе мешает, то можно написать в текстовых полях для цены, описания и тд что-то по типу "загрузка...", в шейпы с фотками залить гиф с анимацией загрузки и тд, либо отличным вариантом будет добавить стандартный прелоадер Т228
- Ты можешь сделать как подчеркивание активной кнопки варианта товара так и обводку. Условно если нам нужно сделать обводку толщиной в 1px то просто укажи в поле толщина обводки "1px 1px 1px 1px". Если нужно сделать подчеркивание, то 0px 0px 1px 0px. Эти значения задают толщину для левого верхнего правого и нижнего краев кнопки соответственно
- Пока что данная модификация может быть только одна на странице
- Не забудь в карточке товара указать ссылку на страницу с описанием товара, чтобы у тебя не открывалась стандартная карточка по клику на товар в корзине
- Кнопка "Заполнить поля данным из каталога" в st205 появляется только когда в блок уже вбит productid. Если у тебя её нет, вбей productid и переоткрой блок st205
Важно!
undefined
undefined
undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Скопировать код
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