Kanken Classic
Выберите цвет:
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-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём блок из примера
2. Добавляем ещё несколько фото в набор
3. Добавляем дополнительное изменение текста

Создаём карточку товара с изменением фото и отправкой в корзину в ZeroBlock
Длительность видео: 26 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<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>
Click to order
Cart
Total: 
Payment method
Made on
Tilda