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

Оформить доступ с промокодом
100
We're proud to design great products for life
We create beautiful and magnetic projects. We develop services to help people run their businesses and improve their management systems.
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