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

Оформить доступ с промокодом
100
Как сформировать услугу с произвольной ценой в корзине в Tilda
ООО Интерьеры и дизайн
Оплата
Вы можете выбрать услугу, номер договора и дату, затем оплатить через удобную Вам платёжную систему

Как сформировать услугу с произвольной ценой в корзине в Tilda

1
Создали кнопку или текст со ссылкой #order:Выберите тип услуги
2
Создали корзину ST100 и в настройках активировали опции
  • Не сохранять товар в корзине
  • Запретить изменение количества товара
  • Не показывать кнопку открытия виджета
3
Создали в корзине поля с именами, которые участвуют в названии услуги
  • выпадающий список - services
  • поле для ввода в одну строку - summ
  • Имя - fio
  • поле для ввода в одну строку - number
  • дата - contract-date
4
Добавили блок Т123 и вставили в него код
Библиотека для примера

<script>
document.addEventListener('DOMContentLoaded', function(){

//Функция смены названия продукта
function changeProductName(){

    let serv = document.querySelector("select[name='services']").value;
    let num = document.querySelector("input[name='number']").value;
    let date = document.querySelector("input[name='contract-date']").value;
    let fio = document.querySelector("input[name='fio']").value;
    
    serv = `${serv} по договору №${num} от ${date}, ${fio}`;
    
    let summ = document.querySelector("input[name='summ']").value;

    if( num!='' && date!='' && fio!=''  ){
        
        tcart.products[0].name = serv;
        tcart.products[0].price = summ;
        tcart.products[0].amount = summ;
        tcart.amount =  summ;
        tcart.prodamount =  summ;
        tcart__reDrawProducts();
        tcart__reDrawTotal();
    
    }
};


//При изменении в поле ввода Суммы
document.querySelector("input[name='summ']").addEventListener('input', function(event) {
    //Ввод только цифр
    if(this.value.match(/[^0-9]/g)){
        this.value = this.value.replace(/[^0-9]/g, "");
    };
    changeProductName();
});


document.querySelector("input[name='number']").addEventListener('input', function(event) { changeProductName() });

document.querySelector("input[name='contract-date']").addEventListener('blur', function(event) {
    changeProductName();
});

document.querySelector("input[name='fio']").addEventListener('input', function(event) { changeProductName() });

document.addEventListener('click', function(event) { 
    if(event.target.closest('.t_datepicker__day-cell')) changeProductName();
});

//При изменении в выпадающем списке услуг
document.querySelector("select[name='services']").addEventListener('change', function(event) {
    changeProductName();
});

//Отслеживаем добавление товара в корзину по клику
let orderBtn = document.querySelectorAll("a[href^='#order:']");
orderBtn.forEach(el => {
  el.addEventListener('click', function(event) {
    setTimeout(function(){
        changeProductName();
    }, 250);
  });
});


//Запрет отправки по Enter
let form = document.querySelectorAll("form");
form.forEach(function (el, index) {
    el.addEventListener('keydown',function(e) {
        if (event.keyCode === 13 && e.target.type !== 'textarea') {
            e.preventDefault();
        };
    });    
});


});
</script>


<style>
.t706__cartwin-products {
    pointer-events: none;
}

.t706__product-del-wrapper {
    display: none !important;
}

.t706__cartwin-bottom {
    display: none;
}

   
</style>
Made on
Tilda