Сладкий стол
Click to order
Cart
Total: 
Payment method

Как создать карточку товара в ZeroBlock и отправить данные в корзину Tilda

Как выполнили данный пример:
1. Создали ZeroBlock
2. Добавили в ней элемент Form
3. Добавили в форму следующие поля и назвали их вот так:
>1-ое ползунок - sweetsphere
>2-ое выпадающий список - sweetform
>3-е ползунок - sweetassap
>4-ое калькулятор - sweetsum
4. Удалили штатную кнопку у формы
5. Добавили элемент Button и задали ему ссылку

#order:Сладкий стол- **Гирлянда из шаров-0м** **Шары-'Арбуз'** **Гирлянда Тассап-0м**= '+itogo+':::image=https://static.tildacdn.com/tild3231-3364-4637-b633-633534616163/CHxctovkOy0.jpg

6. Добавили скрипт на страницу

Скрипт вставляется в блок ДРУГОЕ►Т123
В скрипте прописали:

ID ZeroBlock с карточкой -
productcard1 = '#rec72322161';
Класс кнопки - tn-elem__723221611540539672882

Ссылку с переменными-
#order:Сладкий стол- **Гирлянда из шаров-'+sphere+'м** **Шары-"'+formobj+'"** **Гирлянда "Тассап"-'+tassap+'м**= '+itogo+':::image=https://static.tildacdn.com/tild3231-3364-4637-b633-633534616163/CHxctovkOy0.jpg



<style>
/*Задаём стили для параметров товара*/
 .t706__product-title div {
    font-size: 12px;
    font-weight: 300;
    opacity: 0.8;
}
</style>
<script>
$( document ).ready(function() {
//Функция форматирования параметров 
 function rewritecarttitle(){
     setTimeout(function() { 
$('.t706__product-title').each(function() {
  var $this = $(this);
  var newText = $this.text().replace(/\*\*([^*]+)\*\*/g, '<div>$1</div>').replace(/\*\*/g, '');
  $this.html(newText);
}); 
   }, 50);
};
 //При открытии корзины запускаем функцию форматирования параметров 
   $( "[href = #order] , .t706__carticon-wrapper"  ).click(function() {rewritecarttitle();}); 
 
//При удалении товара запускаем функцию форматирования параметров  
 $(document).on('click','.t706__product-del',function(e){ rewritecarttitle();});
 
 
//Функция формирования состава продукта
  function createproduct(){
  var itogo = $(productcard1+' input[name="sweetsum"]').val();//Получаем сумму
  var sphere = $(productcard1+' .t-range__value-txt:eq(0)').text();//Получаем длину гирлянды с шарами
  var formobj = $('[name="sweetform"]').val();//Получаем вид шара
  var tassap = $(productcard1+' .t-range__value-txt:eq(1)').text();//Получаем длину гирлянды Тассап
//Изменяем ссылку у кнопки  
  $('.tn-elem__723221611540539672882 .tn-atom').attr('href' , '#order:Сладкий стол- **Гирлянда из шаров-'+sphere+'м** **Шары-"'+formobj+'"** **Гирлянда "Тассап"-'+tassap+'м**= '+itogo+':::image=https://static.tildacdn.com/tild3231-3364-4637-b633-633534616163/CHxctovkOy0.jpg');
  rewritecarttitle(); //Вызываем функцию форматирования параметров
};
//Задаём ID нашего Zero    
  var productcard1 = '#rec72322161';
//При клике в нашем Zero  
  $(document).on('mouseup', productcard1  ,function(e){
 createproduct();
});
});
</script>
Made on
Tilda