Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как направить из формы в платёжную систему через блок ST100 в Tilda
Product
  • Home page
  • Tour
Education
  • Workshops
  • How to make a website
  • Design course
Help
  • Knowledge base
  • Video tutorials
Additional
  • Blog
  • Facebook
Ceramics Pottery Art
$ 210

Как направить из формы в платёжную систему через блок ST100 в Tilda

1
Создали форму в ZeroBlock и задали ей класс product-form
2
Добавили в форму поля Имя и E-mail с именами name и mail (обязательные для заполнения)
3
Добавили в форму поле с калькулятором и включили передачу товара в корзину.
Добавили в поле цену товара, название и картинку.
4
Создали корзину ST100, добавили поля Имя и E-mail с именами name и mail
Включили опцию
  • Не сохранять товар в корзине
  • Запретить изменение количества
5
Добавили код в блок T123
Библиотека для примера
<script>
(function() {
    const CONFIG = {
        TEST_MODE: false,
        FIELD_MAP: {
            "name": "name",
            "mail": "mail"
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('click', function(e) {
            const btn = e.target.closest('.product-form .t-submit');
            if (!btn) return;

            const sourceForm = e.target.closest('.product-form');
            const cartBlock = document.querySelector('div[data-record-type="706"]');

            if (cartBlock && !CONFIG.TEST_MODE) {
                cartBlock.style.opacity = '0';
            }

            setTimeout(() => {
                const cartWin = document.querySelector('.t706__cartwin');
                if (!cartWin || !cartWin.classList.contains('t706__cartwin_showed')) {
                    if (cartBlock && !CONFIG.TEST_MODE) cartBlock.style.opacity = '1';
                    return;
                }

                const cartForm = cartWin.querySelector('form');
                if (!cartForm) return;

                for (const [srcName, dstName] of Object.entries(CONFIG.FIELD_MAP)) {
                    const src = sourceForm.querySelector(`[name="${srcName}"]`);
                    const dst = cartForm.querySelector(`[name="${dstName}"]`);
                    
  
                    
                    if (src && dst) {
                        dst.value = src.value;
                        ['input', 'change', 'blur'].forEach(evt => {
                            dst.dispatchEvent(new Event(evt, { bubbles: true, cancelable: true }));
                        });
                    }
                }

                if (!CONFIG.TEST_MODE) {
                    setTimeout(() => {
                        const cartSubmit = cartWin.querySelector('.t-submit');
                        if (cartSubmit) cartSubmit.click();
                    }, 300);
                }

                setTimeout(() => {
                    const currentForm = document.querySelector('.t706__cartwin form');
                    if (!currentForm) return;
                    const hasError = currentForm.querySelector('.js-error-control-box') || 
                                     currentForm.classList.contains('js-send-form-error');
                    if (hasError && cartBlock) {
                        cartBlock.style.opacity = '1';
                    }
                }, 1000);

            }, 500);
        }, { capture: true });
    });
})();
</script>


<style>
.product-form .t-input-group_fr {
    display: none;
}    
</style>
Made on
Tilda