Как сделать карточку товара в ZeroBlock в Tilda
Kanken Classic
Выберите цвет:
3900
руб.
6500
руб.
Скидка - 40 % до конца месяца
Вы экономите 2 600 руб.
Вы экономите 2 600 руб.
Fjallraven Kanken Classic - настоящая классика. Компактный и вместительный.
Всегда приятно приобщаться к классике, тем более, когда это практичный, водонепроницаемый нестареющий Fjallraven Kanken.
Всегда приятно приобщаться к классике, тем более, когда это практичный, водонепроницаемый нестареющий Fjallraven Kanken.
Материал: полиэстер | Вес: 290 гр | Глубина: 13 см | Высота: 38 см | Ширина: 27 см | Объём: 16 л | Карман: 1 спереди, 2 сбоку
Как сделать карточку товара в ZeroBlock в Tilda
1
Создали ZeroBlock
2
Добавили в него Image со ссылкой #prodimg
3
Добавили текстовый элемент с надписью Pink и задали ему ссылку #colortext
4
Добавили иконки цвета элемент Shape и задали им ссылки #coloricon
5
Добавили элемент Button и задали ему ссылку #kankenclassicbutton
6
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Скрипт вставляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём карточку товара с изменением фото и отправкой в корзину в ZeroBlock
Длительность видео: 17 мин
Длительность видео: 17 мин
Фрагмент видео
Библиотека для примера
<style>
/*Стиль для иконки*/
.hovercolor{
transition: .3s linear;
}
.activecolor{
box-shadow: 0px 0px 0px 5px #ffffff !important;
}
.hovercolor:hover{
box-shadow: 0px 0px 2px 4px #b1b1b1;
}
</style>
<script>
$( document ).ready(function() {
//Примваиваем классы нашим элементам
$('[href = "#coloricon"]').addClass('hovercolor');
$('.hovercolor:eq(0)').addClass('activecolor');
$('[href = "#colortext"]').addClass('colortext');
$('[href = "#prodimg"]').addClass('prodimg');
$('[href = "#kankenclassicbutton"]').addClass('classicbutton');
//Задаём нужную ссылку
$('.classicbutton').attr('href' , '#order:Kanken Classic (Pink) = 3900:::image=https://static.tildacdn.com/tild3961-6237-4864-a232-386535633032/bag1.jpg');
$('.prodimg').not('.prodimg:first').hide();
//Функция скрытия изображения и деактивации иконок
function activecolor(){
$('.hovercolor').removeClass('activecolor');
$('.prodimg').fadeOut();
};
var number = 0;
//При клике на цвет
$( ".hovercolor" ).click(function() {
//Вычисляем номер нашего цвета
number = $(".hovercolor").index(this);
activecolor(); $(this).addClass('activecolor');
$('.prodimg:eq('+number+')').fadeIn();
if (number==0){
$('.colortext').text('Pink').css('color' , '#E5AAAC');
$('.classicbutton').attr('href' , '#order:Kanken Classic (Pink) = 3900:::image=https://static.tildacdn.com/tild3961-6237-4864-a232-386535633032/bag1.jpg');
};
if (number==1){
$('.colortext').text('Graphite').css('color' , '#555D68');
$('.classicbutton').attr('href' , '#order:Kanken Classic (Graphite) = 3900 :::image=https://static.tildacdn.com/tild3961-3538-4637-b366-313935386137/bag2.jpg');
};
if (number==2){
$('.colortext').text('Warm Yellow').css('color' , '#E7C01A');
$('.classicbutton').attr('href' , '#order:Kanken Classic (Warm Yellow) = 3900 :::image=https://static.tildacdn.com/tild3733-3238-4634-b939-386438396634/bag3.jpg');
};
if (number==3){
$('.colortext').text('Brick').css('color' , '#9F583A');
$('.classicbutton').attr('href' , '#order:Kanken Classic (Brick) = 3900 :::image=https://static.tildacdn.com/tild3434-3563-4966-a432-666564646336/6.jpg');
};
return false;});
});
</script>
