Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать карточку товара в ZeroBlock в Tilda
Kanken Classic
Выберите цвет:
Pink
3900
руб.
6500
руб.
Скидка - 40 % до конца месяца
Вы экономите 2 600 руб.
Добавить в корзину!
Fjallraven Kanken Classic - настоящая классика. Компактный и вместительный.
Всегда приятно приобщаться к классике, тем более, когда это практичный, водонепроницаемый нестареющий 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
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём карточку товара с изменением фото и отправкой в корзину в ZeroBlock
Длительность видео: 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>
Made on
Tilda