ГИРОСКУТЕР XIAOMI NINEBOT MINI PRO 10,5 ДЮЙМОВ
SKU: 700.932.98
28999
р.
34000
р.
Гироскутер XIAOMI NINEBOT MINI PRO – отличный выбор для любителей драйва и необычных способов передвижения.
ГИРОСКУТЕР XIAOMI NINEBOT MINI PRO 10,5 ДЮЙМОВ
SKU: 700.932.98
28999
р.
34000
р.
Гироскутер XIAOMI NINEBOT MINI PRO – отличный выбор для любителей драйва и необычных способов передвижения.

Как сделать в корзине Доставку выпадающим списком и организовать её платно при наличном расчёте в Tilda

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

1. Создали блок с корзиной
2. Создали и заполнили поле Выпадающий список (см рис.1):
Имя переменной newdelivery
Номер варианта по умолчанию: 1

Выберите город
абакан
ярославль
.....

3. Создали и заполнили поле Доставка (см рис.2):
Имя переменной freedelivery
Номер варианта по умолчанию: 1

Выберите город
абакан
ярославль

4. Создали и заполнили ещё одно поле Доставка (см рис.3):
Имя переменной cashdelivery
Номер варианта по умолчанию: Не указываем

Выберите город
Доставка Абакан = 350
Доставка Ярославль = 400

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

<style>
/*Итоговая сумма видна всё время*/
.t706__cartwin-totalamount-wrap {
        display:block !important;
    }
 /*Стиль для блокировки */  
       .elem_blk{
       opacity: 0.3;
       pointer-events: none; 
       }
    
</style>

<script>
$( document ).ready(function() {
//Переменная позиции в списке  
  var place = 0;  

//Блокируем виды оплаты и кнопку Заказать
	$('.t-radio__wrapper-payment , .t-submit').addClass('elem_blk');



//БЛОК СИНХРОНИЗАЦИИ СО СПИСКОМ 
//Скрываем радио-кнопки с доставкой по городам    
   $(".t-input-group_dl").css("display" , "none");
//Добавляем новый класс к нашему полю со списком   
   $("[name='newdelivery']").addClass("mynewdelivery");
//Когда выбрали город в списке, то
   $(".mynewdelivery").change(function() {
   // Получаем номер элемента в списке       
   place = $(".mynewdelivery")[0].selectedIndex;
   // Активируюм нужный нам город по номеру
   $(".t-input-group_dl label:eq("+place+")")[0].click();
  
  //Если город не выбран, то блокируем всё, если выбран разблокируем
   if (place == 0) {
    	$('.t-radio__wrapper-payment , .t-submit').addClass('elem_blk');   
   }else{
        $('.t-radio__wrapper-payment , .t-submit').removeClass('elem_blk');
   };
   
  
  
});  

//Функция обновления списка    
function pereCLC(){ 
    setTimeout(function() { 
    $(".t-input-group_dl label:eq(0)")[0].click();
    $(".t-input-group_dl label:eq("+place+")")[0].click();
}, 300);}; 

//БЛОК ПЕРЕКЛЮЧЕНИЯ БЕСПЛАТНОЙ И ПЛАТНОЙ ДОСТАВКИ   
//Оборачиваем поле с бесплатной доставкой и добавляем к нему класс
$(".t-input-group_dl:eq(0)").wrap("<div class='firstdelivery'></div>").addClass("freeD");
//Оборачиваем поле с платной доставкой
$(".t-input-group_dl:eq(1)").wrap("<div class='seconddelivery'></div>");

//При клике на Оплата картой    
    $( ".t-radio__wrapper-payment .t-radio__control:eq(0)" ).click(function() {
//Перемещаем блок с бесплатной доставкой в конец
   $(".freeD").appendTo('.firstdelivery');
   //Обновляем списки
      pereCLC(); });

//При клике на Оплата наличными
 $( ".t-radio__wrapper-payment .t-radio__control:eq(1)" ).click(function() {
//Перемещаем блок с бесплатной доставкой в начало
      $(".freeD").appendTo('.seconddelivery');
      //Обновляем списки
      pereCLC(); });
 

});    
    
</script>
Made on
Tilda