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

Оформить доступ с промокодом
100
Как сделать переключение полей для физического и юридического лица в корзине в Tilda
Welcome to law firm
INTRODUCE
PRACTICE &
SERVICES
Renowned for the quality of work of the lawyers, our team provide best legal advices. Renowned for the quality of work of the lawyers, our team provide best legal possible advices.

Как сделать переключение полей для физического и юридического лица в корзине ST100 в Tilda

1
Создали корзину ST100
2
Добавили в неё переключатель физ/юр лица (скрин ниже)
Поле - Вопрос с вариантами ответа. Задали ему имя entity
3
Добавили в неё нужные поля. Общие поля называем как угодно, а связанные поля подписываем через окончание
для физ. лиц _person
для юр. лиц _legal
(скрин ниже)
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём кнопки для переключения состава полей в корзине и в стандартном блоке
Фрагмент видео
Библиотека для примера
Корзина

<style>
.hidestyle{ display:none}    
.t706 .t-input-group_rd .t-radio__wrapper { display: flex}
.t706 .t-input-group_rd .t-radio__wrapper label.t-radio__control {
    margin-top: 0;
    margin-right: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    z-index: 1;
}
.t706 .t-input-group_rd .t-radio__wrapper label.t-radio__control.textcolor{ color:#fff}
.t706 .t-input-group_rd .t-radio__indicator {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: none;
}
.t706 .t-input-group_rd .t-radio__indicator:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: -1;
    opacity: 0.4;
}
.t706 .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.t706 .t-form__submit { width: 100%}
.t706 .t-input-group.t-input-group_rd { width: 100%}
.t706 .t-input-group { width: 49%}
.t706 .t-form__errorbox-middle {width: 100%}
.t706 .t-input-title ,  .t706 .t-input-subtitle {  height: auto}
.t706 .t-input-group.t-input-group_pm { width: 100%}
.t706__cartwin-content {max-width: 760px}
@media screen and (max-width:600px){
.t706 .t-form__inputsbox {
    display: block;
}
.t706 .t-input-group{
    width:100%;
}  
}
</style>

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

    let entity = document.getElementsByName('entity');
    let person = document.querySelectorAll('[name$="_person"]');
    let legal = document.querySelectorAll('[name$="_legal"]');
    
    person.forEach(i => i.closest('.t-input-group').classList.add('person-form'));
    legal.forEach(i => i.closest('.t-input-group').classList.add('legal-form' , 'hidestyle'));
    
    let personForm = document.querySelectorAll('.person-form');
    let legalForm = document.querySelectorAll('.legal-form');
    
    let personReq = document.querySelectorAll('[name$="_person"][data-tilda-req="1"]');
    let legalReq = document.querySelectorAll('[name$="_legal"][data-tilda-req="1"]');
    
    legalReq.forEach(i => i.classList.remove('js-tilda-rule'));
    legal.forEach(i => i.disabled = true);
    
    entity[0].closest('label').classList.add('textcolor');
    
    for (let i = 0; i < entity.length; i++) {
        entity[i].addEventListener('change', function() {
            
            entity.forEach(i => i.closest('label').classList.remove('textcolor'));
            entity[i].closest('label').classList.add('textcolor');
            
            if(i==0){
            
                personForm.forEach(i => i.classList.remove('hidestyle'));
                legalForm.forEach(i => i.classList.add('hidestyle'));
                
                person.forEach(i => i.disabled = false);
                legal.forEach(i => i.disabled = true);
                
                personReq.forEach(i => i.classList.add('js-tilda-rule'));
                legalReq.forEach(i => i.classList.remove('js-tilda-rule'));
                
                
            }else{
                
                personForm.forEach(i => i.classList.add('hidestyle'));
                legalForm.forEach(i => i.classList.remove('hidestyle'));
                
                person.forEach(i => i.disabled = true);
                legal.forEach(i => i.disabled = false);
                
                personReq.forEach(i => i.classList.remove('js-tilda-rule'));
                legalReq.forEach(i => i.classList.add('js-tilda-rule'));
                

            };
        });
    };

});
</script>
Библиотека для примера
Стандартный блок
Важно! Задать блоку класс uc-legalform

<style>
.hidestyle{ display:none}    
.uc-legalform .t-input-group_rd .t-radio__wrapper { display: flex}
.uc-legalform .t-input-group_rd .t-radio__wrapper label.t-radio__control {
    margin-top: 0;
    margin-right: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 15px;
    z-index: 1;
}
.uc-legalform .t-input-group_rd .t-radio__wrapper label.t-radio__control.textcolor{color:#fff}
.uc-legalform .t-input-group_rd .t-radio__indicator {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border: none;
}
.uc-legalform .t-input-group_rd .t-radio__indicator:after {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 5px;
    z-index: -1;
    opacity: 0.4;
}
.uc-legalform .t-form__inputsbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.uc-legalform .t-form__submit {width: 100%}
.uc-legalform .t-input-group.t-input-group_rd { width: 100%}
.uc-legalform .t-input-group { width: 49%}
.uc-legalform .t-form__errorbox-middle {width: 100%}
.uc-legalform .t-input-title ,  .uc-legalform .t-input-subtitle { height: auto}
.uc-legalform .t-input-group.t-input-group_pm { width: 100%}
@media screen and (max-width:600px){
.uc-legalform .t-form__inputsbox {
    display: block;
}
.uc-legalform .t-input-group{
    width:100%;
}  
}
</style>


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

    let entity = document.getElementsByName('entity');
    let person = document.querySelectorAll('[name$="_person"]');
    let legal = document.querySelectorAll('[name$="_legal"]');
    
    person.forEach(i => i.closest('.t-input-group').classList.add('person-form'));
    legal.forEach(i => i.closest('.t-input-group').classList.add('legal-form' , 'hidestyle'));
    
    let personForm = document.querySelectorAll('.person-form');
    let legalForm = document.querySelectorAll('.legal-form');
    
    let personReq = document.querySelectorAll('[name$="_person"][data-tilda-req="1"]');
    let legalReq = document.querySelectorAll('[name$="_legal"][data-tilda-req="1"]');
    
    legalReq.forEach(i => i.classList.remove('js-tilda-rule'));
    legal.forEach(i => i.disabled = true);
    
    entity[0].closest('label').classList.add('textcolor');
    
    for (let i = 0; i < entity.length; i++) {
        entity[i].addEventListener('change', function() {
            
            entity.forEach(i => i.closest('label').classList.remove('textcolor'));
            entity[i].closest('label').classList.add('textcolor');
            
            if(i==0){
            
                personForm.forEach(i => i.classList.remove('hidestyle'));
                legalForm.forEach(i => i.classList.add('hidestyle'));
                
                person.forEach(i => i.disabled = false);
                legal.forEach(i => i.disabled = true);
                
                personReq.forEach(i => i.classList.add('js-tilda-rule'));
                legalReq.forEach(i => i.classList.remove('js-tilda-rule'));
                
                
            }else{
                
                personForm.forEach(i => i.classList.add('hidestyle'));
                legalForm.forEach(i => i.classList.remove('hidestyle'));
                
                person.forEach(i => i.disabled = true);
                legal.forEach(i => i.disabled = false);
                
                personReq.forEach(i => i.classList.remove('js-tilda-rule'));
                legalReq.forEach(i => i.classList.add('js-tilda-rule'));
                

            };
        });
    };

});
</script>
Made on
Tilda