Как создать ингредиентный калькулятор в ZeroBlock по таблице CL46 в Tilda
Собери свой напиток
Основа из 3х ингредиентов
0
0
0
0
Купить
0

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

1
Создали ZeroBlock и добавили в него форму с 3-мя полями DropDown
Задали им имена structure_elem1 , structure_elem2, structure_elem3.
Задали стоимость каждому пункту
2
Добавили в него форму с 1-им полем Question with answers
Задали ему имя additionally_elem4.
Задали стоимость каждому пункту
3
Добавили в него форму с 1-им полем Calculations field
Задали ему имя result и прописали формулу
structure_elem1+structure_elem2+structure_elem3+additionally_elem4
4
Создали 5-ть элементов Text и задали им классы
proteins , fats , carbohydrate , kilocalories , result
5
Создали элемент Button с классом sendtocart
6
Создали блок CL46 на 6 колонок
Название ищем в первой колонке, данные получаем из 3,4,5,6 колонок.
Разделитель для десятых - точка
7
Создали блок ST200. Добавили фото товара, цену, параметр Состав со значением 0
8
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём калькулятор КБЖУ в ZeroBlock.
Берём данные для расчёта из таблицы CL46
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
div[data-record-type="744"],
div[data-record-type="431"]{
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}
.sendtocart_dis{
    pointer-events:none;
    opacity:0.3;
}
.result {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 40px 0 0 0 #fff;
}
.sendtocart{cursor:pointer}
.proteins .tn-atom:after,
.fats .tn-atom:after,
.carbohydrate .tn-atom:after,
.kilocalories .tn-atom:after,
.result .tn-atom:after
{
    position: absolute;
    font-size: 14px;
    bottom: 5px;
    margin-left: 4px;
    opacity: 0.5;
}
.result .tn-atom:after
{
    font-size: 16px;
    bottom: 8px;
    margin-left: 5px;
    opacity: 0.5;
}
.proteins .tn-atom:after     { content: "Белки"}
.fats .tn-atom:after         { content: "Жиры"}
.carbohydrate .tn-atom:after { content: "Углеводы"}
.kilocalories .tn-atom:after { content: "ККал"}
.result .tn-atom:after       {content: "Руб"}

</style>

<script>
$(document).ready(function(){
let calkBlock = $('.sendtocart').closest('.t-rec');
let calcBtn = $('.sendtocart');
calcBtn.addClass('sendtocart_dis');
let arrStructure = [0,0,0,0];

function summPrice(){
    let elemArr = [];let req = true;drinking='';
    for( let i=0; i<4;i++ ){elemArr[i] = $(calkBlock).find('[name$="_elem'+(i+1)+'"]').val()};
    for( let i=0; i<3;i++ ){
        if(elemArr[i]=="")req=false;
        drinking += elemArr[i]+' - ';
    };
    elemArr = elemArr.filter(Boolean);
    if(req){calcBtn.removeClass('sendtocart_dis')
    }else{  calcBtn.addClass('sendtocart_dis')};
    let arrStructure = [0,0,0,0];
    for(let i=0;i<elemArr.length;i++){
        $('.t431__tbody tr').each(function(){
          let nameTr = $(this).find('td:first').text();

          if(elemArr[i].includes(nameTr) ){
            for(let j=2;j<=5;j++){
                arrStructure[j-2] += +(+$(this).find('td:eq('+j+')').text()).toFixed(1);
                arrStructure[j-2] = +arrStructure[j-2].toFixed(1);
            };                
          }; 
        });
    };
    writeStruct(arrStructure[0],arrStructure[1],arrStructure[2],arrStructure[3]);
};


$(calkBlock).on('change', 'input,select' , function(){  summPrice()});
function writeStruct(em,en,eb,ev){
    $('.proteins .tn-atom').html(em);
    $('.fats .tn-atom').html(en);
    $('.carbohydrate .tn-atom').html(eb);
    $('.kilocalories .tn-atom').html(ev);
    setTimeout(function(){
        $('.result .tn-atom , .t744__price-value').html( $('input[name="result"]').val());
        let dopSgm = $('input[name="additionally_elem4"').val();
        if(dopSgm==''){ dopSgm = ' - Без допов'
        }else{ dopSgm = '/ Допы: '+dopSgm };
        let prodText = `${drinking} ${dopSgm}`;
        $('.t744 select option:selected').val(prodText);
    }, 100);
};
$('.sendtocart ').click(function(e) {$('.t744__btn').click()});     
$(window).resize(function() {clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){  
    summPrice()}, 1000);calcBtn.addClass('sendtocart_dis')});
});
</script>
Полезный напиток
100
р.
Состав:
BUY NOW
Made on
Tilda