Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
More products
Надпись на торте:
Надпись
Вес торта, кг:

Добавляем дополнительную вкладку в карточку товара и изменяем формулу суммирования в Tilda?

Добавим доп вкладку в карточку товара, поле с надписью и изменим формулу суммирования на A*B + C*D
Пример выполнен на базе блока ST305N

Приведенные коды можно использовать на своём сайте

Коды вставляются в блок Другое►T123
<!-- Добавляем поле для Надписи  -->
<div class="newselect nadpis">
  <div class="t-product__option-title t-descr t-descr_xxs">Надпись на торте:</div>    
    <input type="text" name="Input" class="t-input polenadpisi t-descr t-descr_xxs" value="Без надписи" style=""> 
</div>

<!-- Добавляем поле Select для Надписи  -->

<div class="t-product__option js-product-option newselect noshowthis">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Надпись</div>
    <div class="t-product__option-variants">
      <select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="1" data-product-variant-price="С днём рождения"></option>
      </select>
  </div>
</div>

<!-- Добавляем поле с Весом  -->

<div class="t-product__option js-product-option newselect">
  <div class="t-product__option-title t-descr t-descr_xxs js-product-option-name">Вес торта, кг:</div>
    <div class="t-product__option-variants">
      <select class="t-product__option-select t-descr t-descr_xxs js-product-option-variants">
         <option value="1" data-product-variant-price="1">1 кг</option>
         <option value="2" data-product-variant-price="2">2 кг</option>
         <option value="3" data-product-variant-price="3">3 кг</option>
      </select>
  </div>
</div>



<style>
/*Скрываем техническое поле Select*/
.noshowthis{
    display:none;
}
/*Стили для поля Select*/
.t776 .t-product__option-select {
    border: 1px #a7a7a7 solid !important;
    background: #ffeca7 !important;
    color: #795752 !important;
}
/*Стили для стрелочки в  Select*/
.t776 .t-product__option-variants:after {
    border-color: #795752 transparent transparent transparent !important;
}
/*Цвет заголовка в корзине*/
.t706__cartwin-heading {
    color: #79534d !important;
}
/*Стиль названия продукта*/
.t706__product-title {
    color: #79534d !important;
}
/*Описание продукта*/
.t706 .t-descr_sm {
    color: #79534d !important;
}
/*Кол-во продукта*/    
.t706__product-quantity {
  color: #79534d !important;
}
/*Обводка у миниатюр*/
.t776 .t-slds__thumbsbullet.t-slds__bullet_active .t-slds__thumbsbullet-border {
    border-color: #F6D55C !important;
}
/*Стиль поля ввода Надписи*/
.polenadpisi {
    width: 200px;
    height: 27px;
    border: 1px #a7a7a7 solid;
    background: #ffeca7;
    color: #795752;
    font-size: 14px;
    padding: 2px 30px 2px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
}
/*Отступ надписи*/
.nadpis {
    margin-top: 15px;
}  
/*Ширина полей Select*/
.t776 .t-product__option-variants {
    min-width: 200px !important;
}
/*Корректировка поля Надписи для других разрешений*/
@media screen and (max-width: 1200px){

.polenadpisi {
    height: 24px;
    font-size: 12px;
}
}
/*Корректировка поля Надписи для других разрешений*/
@media screen and (max-width: 640px){

.polenadpisi {
    height: 30px;
    font-size: 16px;
}
}
</style>


<script>
 $(document).ready(function(){
//При загрузке страницы обновляем все цены в PopUp окнах     
    setTimeout(function() { 
    //Вычисляем кол-во карточек товара 
    var y = $("div.t776__col").length;
    var x = 0;
    //Проходим все карточки
    while (x <= y) {
    $(".t-popup .t776__price-value:eq("+x+")").text($(".t776__price-value:eq("+x+")").text());
    x++;
    };    
    }, 2000);
   
    //Добавляем класс к параметрам
     $(".t-product__option").addClass("spiski");
    //Перемещаем новые поля в карточку товара 
     $(".newselect").appendTo(".t-popup .t776__price-wrapper");
    
    var fullId = 0;
    var textovka = 0;
    var clickId = 0;
    
    //Функция расчёта цены
function summprice(){
      //Составляем полный dataID
       fullId = "[data-product-lid='" +clickId+ "']";
       //Считываем текстовую надпись
       textovka =  $(fullId + " " + 'input').val();
       //Записываем текст  вэлемент Select
       $(fullId + " " + 'select:eq(0) option:selected').data(textovka);
       $(fullId + " " + 'select:eq(0) option:selected').val(textovka);
       $(fullId + " " + 'select:eq(0) option:selected').text(textovka);

       //Считываем вес 
       var ves =  $(fullId + " " + 'select:eq(1) option:selected').data('product-variant-price');
       //Считываем начинку
       var nachinka =  $(fullId + " " + 'select:eq(2) option:selected').data('product-variant-price');
       //Считываем вид свечей
       var vidsvech =  $(fullId + " " + 'select:eq(3) option:selected').data('product-variant-price');
       //Считываем кол-во свечей
       var colsvech =  $(fullId + " " + 'select:eq(4) option:selected').data('product-variant-price');
       //Формируем цену
       var cena = ves*nachinka + vidsvech*colsvech;

        setTimeout(function() { 
       //Выводим сумму
       $(".t776__product-full"+fullId+" .t776__price-value").text(cena)
        }, 100);
};

    //При клике в карточке 
     $('.t776__product-full , .t776__col').click(function(){
       //Получаем её ID     
     clickId = $(this).data("product-lid");
      summprice();
     });
    //При изменении списка 
     $('.t-product__option-select').change(function() {    
      summprice();
      });    
      //При нажатии клавиш в поле надписи сохраняем значение мгновенно
       $('.t776 input').keyup( function() {  
       //Получаем значение из поля ввода
       textovka =  $(fullId + " " + 'input').val();
       //Записываем значение в поле Select
       $(fullId + " " + 'select:eq(0) option:selected').data(textovka);
       $(fullId + " " + 'select:eq(0) option:selected').val(textovka);
       $(fullId + " " + 'select:eq(0) option:selected').text(textovka);
   });
});
</script>
Made on
Tilda