Worldwide network
Coffee market
Sed sagittis sodales lobortis. Curabitur in eleifend turpis, id vehicula odio. Donec pulvinar tellus eget
magna aliquet ultricies. Praesent gravida hendrerit ex, nec eleifend sem convallis vitae.
FUEGO Original (90% арабика, 10% робуста)
100
р.
Обжарка
Упаковка, кг
Количество

Как сделать прайс с выбором параметров в таблице CL46 и передать данные в корзину в Tilda

Как выполнили данный пример:

1. Создали таблицу CL46
2. Добавили в неё 7 колонок
Название;Цена, руб;Обжарка;Упаковка, кг;Количество;Сумма, руб;В корзину
3. Заполнили своими данными поля:
Название, Цена, Сумма(=Цена)
4. Заполнили следующие поля техническими данными:
Обжарка - roasting
Упаковка - packaging
Количество - quant
В корзину - В корзину button=#addtocart
5. Добавили блок ST200 на страницу
Прописали в нём 3 параметра
Обжарка - Светлая
Упаковка - 1
Количество - 1
6. Добавили блок с корзиной ST100

7. Добавили скрипты на страницу
Скрипты вставляется в блок ДРУГОЕ►Т123

<!-- Добавляем список Обжарка  -->
      <select class="objarka newspisok">
         <option>Светлая</option>
         <option>Тёмная</option>
      </select>

<!-- Добавляем список Упаковка  -->
      <select class="upakovka newspisok">
         <option>1</option>
         <option>0.15</option>
         <option>0.25</option>
         <option>0.5</option>
      </select>      

<!-- Добавляем поле для Надписи  -->
<div class="quantedit">
    <input type="text" name="quantity" class="t-input quanttxt" value="1"> 
</div>

<script>
$( document ).ready(function() {
  //Перемещаем списки в таблицу
    setTimeout(function(){
     $("td:contains('roasting')").html($(".objarka"));
     $("td:contains('packaging')").html($(".upakovka"));
     $("td:contains('quant')").html($(".quantedit"));
    }, 1000);
  //Прописываем переменные
     var price=0;var objarka=0;var upakovka=0;var colvo=0;var summa=0;  
 
  //Получаем все элементы из одной строки   
    function getelem(){
      price = $(".selectstr .t431__td:eq(1)").html(); //Цена
      objarka = $(".selectstr select.objarka").val(); //Обжарка
      upakovka = $(".selectstr select.upakovka").val(); //Упаковка
      colvo = $(".selectstr input.quanttxt").val(); //Кол-во
      summa = price*upakovka*colvo; //Рассчёт суммы
      $(".selectstr .t431__td:eq(5)").html(summa); //Выводим сумму
      $('.t744__title').html($(".selectstr .t431__td:eq(0)").html());//Выводим название
    
  //Удаляем класс-метку со строки
      $("tr").removeClass("selectstr");     
}; 
     
  //При клике на кнопку в таблице
  
   $(document).on('click','a[href="#addtocart"]',function(event){ 
   //Ищем родительский элемент выбранной строки и добавляем класс-метку к нему
      $(this).parents("tr").addClass("selectstr");  getelem();//Вызываем функцию получения значений
     
     
      //ПРисваиваем значения из калькулятора для блока ST200
      $('.t744__price-value').html(summa);//Сумма
      $('.t744 select:eq(0) option:selected').val(objarka);//Обжарка
      $('.t744 select:eq(1) option:selected').val(upakovka);//Упаковка
      $('.t744 select:eq(2) option:selected').val(colvo);//Количество
 
     //Отправляем заказ
         setTimeout(function() {  $(".t744__btn")[0].click(); }, 100);
     event.preventDefault;
  });
  
  //При изменении в списках или поле ввода
    $( ".newspisok , .quanttxt" ).change(function() {
  //Ищем родительский элемент выбранной строки и добавляем класс-метку к нему      
       $(this).parents("tr").addClass("selectstr"); getelem();//Вызываем функцию получения значений

});

 
});    
</script>

<script>
       //Разрешаем ввод только цифр в 1 и 2 поле ввода
  $(".quanttxt").keydown(function(event) {
      
    // Разрешаем: backspace, delete, tab и escape
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 ||
      // Разрешаем: Ctrl+A
      (event.keyCode == 65 && event.ctrlKey === true) ||
      // Разрешаем: home, end, влево, вправо
      (event.keyCode >= 35 && event.keyCode <= 39)) {
      // Ничего не делаем
      return;
    } else {
      // Запрещаем все, кроме цифр на основной клавиатуре, а так же Num-клавиатуре
      if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
        event.preventDefault();
      }
    }
  });
//Ограничиваем кол-во ввода цифр до 2-х  
 $('.quanttxt').keyup( function() {
        var $this = $(this);
        if($this.val().length > 2)
            $this.val($this.val().substr(0, 2));           
    });
  
    
    
    
</script>

<style>
/*Скрываем ST200*/
   div[data-record-type="744"]{
        display:none;
   }


/*Размер текста в таблице*/
.t-text_sm {
    font-size: 16px !important;
}
/*Стили для выпадающих списков*/
select.newspisok {
    display: table-cell;
    border: 1px solid #c9a169;
    width: 80px;
    height: 30px;
    padding: 2px 6px;
    border-radius: 15px;
    outline: none;
    color: #8c8c8c;
    text-align: center;
    text-align-last: center;
}
select.upakovka{
     width: 50px;
}
/*Стили для поля ввода*/
input.t-input.quanttxt {
    height: 35px;
    width: 80px;
    border: 1px solid #c9a169;
    text-align: center;
    border-radius: 15px;
    outline: none;
    color: #8c8c8c !important;
}
/*Центровка в ячейках*/
td.t431__td {
    vertical-align: middle  !important;
}
</style>
Made on
Tilda