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

Оформить доступ с промокодом
100
FUEGO Original (90% арабика, 10% робуста)
100
р.
Количество

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

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

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

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

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


<script>
$( document ).ready(function() {
  //Перемещаем списки в таблицу
    setTimeout(function(){
     $("td:contains('quant')").html($(".quantedit"));
    }, 1000);
  //Прописываем переменные
     var price=0;var colvo=0;var summa=0;  
 
 
  //Получаем все элементы из одной строки   
    function getelem(){
      price = $(".selectstr .t431__td:eq(1)").html(); //Цена
      colvo = $(".selectstr input.quanttxt").val(); //Кол-во
      summa = price*colvo; //Рассчёт суммы
      $(".selectstr .t431__td:eq(3)").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(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;
    background: #fff;
    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