Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как создать изменение коэффициента от кол-ва в калькуляторе Tilda
Калькулятор заказа визиток
Готовность от 15 минут
100
3000
Вид визитки
Кол-во сторон
Тип бумаги
Плотностью 300 гр
0 руб.

Как создать изменение коэффициента от кол-ва в калькуляторе Tilda

1
Создали блок BF402N, задали ему класс uc-calc-form и добавили в него поля:
  • Кол-во с именем quant
  • Поле ввода в 1 строку с именем st
  • Вопрос с вариантами ответа (1 вариант) с именем view
Значения поля:
Односторонние=1
Двухсторонние=1.5

  • Вопрос с вариантами ответа (1 вариант) с именем type
Значения поля:
Мелованная =1
Soft touch (бархатистая) =1.5

  • Вопрос с вариантами ответа (несколько вариантов) с именем design
Значение поля:
Без макета = 300

  • Поле калькулятор с именем cardcalc
Формула st*quant*view*type+design
Название в корзине:
Визитки - quant шт - view - type - design

2
Добавили код в блок Другое - Т123
В коде сопоставили диапазоны и коэффициенты
"100" : "2",
"500" : "1.6",
"1000" : "1.2"
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const priceCard = {
                "100": "2",
                "500": "1.6",
                "1000": "1.2"
        };
        
        const calcForm = document.querySelector('.uc-calc-form');
        
        if (calcForm) {
            const st = calcForm.querySelector('input[name="st"]');
            const quantInput = calcForm.querySelector('input[name="quant"]');
            const cardcalcInput = calcForm.querySelector('input[name="cardcalc"]');
            
            if (st) {
                const stGroup = st.closest('.t-input-group');
                if (stGroup) {
                    stGroup.style.display = 'none';
                }
            }

            if (cardcalcInput) {
                const cardcalcGroup = cardcalcInput.closest('.t-input-group');
                if (cardcalcGroup) {
                    cardcalcGroup.classList.add('cardcalc');
                }
            }
            
            function getCardPrice() {
                if (!quantInput || !st) return;
                let quant = +quantInput.value;
                let fnPrice = 0;
                
                Object.entries(priceCard).forEach(([key, value]) => {
                    let line = +key;
                    if (quant >= line) fnPrice = +value;
                });
                
                st.value = fnPrice.toString();
                st.dispatchEvent(new Event('input', { bubbles: true }));
                
            }
            
            const targetElem = calcForm.querySelector('.t700 .t-calc');
            if (targetElem) {
                const observer = new MutationObserver(mutationRecords => {
                    getCardPrice();
                });
                
                observer.observe(targetElem, {
                    childList: true,
                    subtree: true,
                    characterDataOldValue: true
                });
            }
            
            if (quantInput) {
                quantInput.addEventListener('input', getCardPrice);
                quantInput.addEventListener('change', getCardPrice);
            }
        }
 
    })();    
});    
</script>

<style>
.t706__product-title {
    font-weight: 300;
    font-size: 14px;
}    
</style>
Made on
Tilda