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

Оформить доступ с промокодом
100
Как добавить форму в карточку товара в Tilda

Как добавить форму в карточку товара в Tilda

1
Создали форму BF204N и задали ей класс uc-product-form
2
Добавили в неё:
  • поле с именем
  • поле с телефоном
  • скрытое поле с именем product
3
Вставили код в блок Другое - Т123 на страницу и в продуктовый footer
Библиотека примера

<script>
document.addEventListener("DOMContentLoaded", function(){
    
(function () { 
    
    let snippetSearchRepeat = 0;
    let tistore = setInterval(function() {
            const productListNum = document.querySelector('.t-store__product-snippet');
            if(productListNum) {
                if(productListNum.hasAttribute("data-product-url")){
                    clearInterval(tistore);
                    showPartPaymentLabel(true);
                };
            };
            snippetSearchRepeat++;
            if(snippetSearchRepeat>50) clearInterval(tistore);
    }, 100);   
    

    function showPartPaymentLabel(em){
        setTimeout(function(){
            
            let productCard = '';
            if(em){
                productCard = document.querySelector('.t-store__product-snippet .t-store__prod-popup__info');
            }else{
                productCard = document.querySelector('.t-store .t-popup_show .t-store__prod-popup__info');
            };
            
            if(productCard!=null){
                const prName =  productCard.querySelector('.js-store-prod-name').innerText;
                const formBlock = document.querySelector('.uc-product-form');
                productCard.append(formBlock);
                formBlock.querySelector('input[name="product"]').value = prName;
                formBlock.style.display = 'block';
            };
            
        }, 300); 
           
    };
    
    document.addEventListener('click', function(event) { 
        if(event.target.closest('a[href*="/tproduct/"]')){
            setTimeout(function () {  showPartPaymentLabel(false) }, 300);
        };
    });

})();

});
</script>



<style>
.uc-product-form{
    display: none;
}

.uc-product-form .t-container {
    max-width: 100%;
}

.uc-product-form .t-col {
    padding-left: 0;
    margin: 0;
    max-width: 100%;
}

.uc-product-form {
    margin-top: 20px;
}

.uc-product-form .t-form__submit {
    text-align: left;
}    

.uc-product-form {
    width: 80%;
}

.uc-product-form button.t-submit {
    height: 45px;
    font-size: 14px;
}

.uc-product-form .t-input {
    height: 45px;
}

.uc-product-form .t-input-group {
    margin-bottom: 10px;
}

.uc-product-form .t678 .t-form__submit {
    margin-top: 14px;
}

.uc-product-form .t-input-title {
    font-size: 16px;
}

@media screen and (max-width:500px){
.uc-product-form {
    width: 100%;
}
}



</style>
Made on
Tilda