Как создать карточку Zero для товара ручной работы в Tilda
Кепка ручной работы с плоским краем с крокодиловым узором из искусственной кожи
Магазин: Fox Brand
  • Тип товара:Хип-Хоп Шапки
  • Тип лямки:Регулируемый
  • Пол:MEN
  • Материал:Искусственная кожа
  • Тип рисунка:Геометрический
  • Номер модели:45277300482
Размер:
M
L
X
XL
Кепка ручной работы
1200
Размер

Как создать карточку Zero для товара ручной работы в Tilda

1
Создали ZeroBlock и добавили в него контент
2
Создали в Zero элементы управления:

- 4 text для размера, задали им класс sizeicon
- 1 text для цены, задали ему ссылку #percost
- 1 button для отправки в корзину, задали ему ссылку #sendtocart
3
Создали блок ST200, добавили в него фото, название, цену и 2 параметра
4
Добавили код на страницу в блок Другое - Т123
В коде прописали
ID нашего Zero
#rec166458609
Библиотека для примера

<script>
$( document ).ready(function() {
$('#rec565120350').addClass('custCard');
var urlprodimg=0;var Ncolor=0;Scolor=0;
//Присваиваем классы нашим элементам  

$('a[href = "#percost"]').addClass('percost');
$('a[href="#sendtocart"]').addClass('sendtocart')
$('.sizeicon:first .tn-atom').addClass('activesize');

$('.t744 .t-slds__bgimg').each(function( index, element ) {
$(this).attr('src', $(this).attr('data-original')); });
var btnCaption=$('.sendtocart').text();



setTimeout(function() { changeSldPh(); }, 2000);



$( ".sizeicon .tn-atom" ).click(function(e)  {e.preventDefault();
   $( ".sizeicon .tn-atom " ).removeClass('activesize');
   $(this).addClass('activesize'); 
});  


//При клике на нашу кнопку
  $('a[href="#sendtocart"]').click(function(event) {
  event.preventDefault();
//Присваиваем значения из калькулятора для блока ST200
  $('.t744 select:eq(0) option:selected').val($('.activesize').text());//размер
  setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);  return false;
});
});    
</script>


<style>
/*Стиль для иконки*/
.hovercolor , .sizeicon{
    cursor: pointer;
   transition: .3s linear;    
   } 
   .activecolor{
    transform: scale(1.4);
}
.activesize{
    font-weight: 800 !important;
   }
.percost{pointer-events:none}
div[data-record-type="744"]{ display:none;}
.t706__product-imgdiv {
    background-repeat: no-repeat;
    background-size: contain !important;
    background-color: #ffffff !important;
}
.tn-atom.activesize {
    background-color: #000  !important;
    color: #fff !important;
}


.blksenddtn{
    opacity:0.5;
    pointer-events:none;   
}
.prodimg{
    transition: all 0.9s ease;   
   }
.notshow{
    transform: scale(0) rotate(0deg);
   }
.show{
    transform: scale(1) rotate(1440deg);   
   }
</style>
Made on
Tilda