Сейчас узнаем, какой подарок выпадет именно Вам

Крутите колесо

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

Оформить доступ с промокодом

100

#2470a1

Как сделать переключение полей для физического и юридического лица в корзине в 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.

Buy product

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

Создали корзину ST100

Добавили в неё переключатель физ/юр лица (скрин ниже)
Поле - Вопрос с вариантами ответа. Задали ему имя entity

Добавили в неё нужные поля. Общие поля называем как угодно, а связанные поля подписываем через окончание
для физ. лиц _person
для юр. лиц _legal
(скрин ниже)

Добавили код в блок Другое - Т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>