Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как cделать кнопку быстрого заказа в корзине ST100 через BF502N в Tilda

Как cделать кнопку быстрого заказа в корзине ST100 через BF502N в Tilda

1
Создали блок ST100
2
Создали блок BF502N и задали ему ссылку для вызова #popup:forder
Добавили в эту форму поле для ввода в несколько строк с именем productlist
3
Добавляем код в блок Другое - Т123
Код должен присутствовать на страницах каталога в том числе
Библиотека для примера
<style>
.continue-btn {
    border: 1px solid #fcb42f;
    background-color: #fff;
    color: #fcb42f;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Roboto',Arial,sans-serif;
    border-radius: 3px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    transition: background 0.3s;
}
.continue-btn:hover {
    background-color: #fff;
}
</style>


<script>
(function() {
    
    const popupLink = "#popup:forder";
    const btnCaption = 'Купить в один клик';
    
    
    const waitForCart = (callback) => {
        if (typeof t_onReady === 'function') {
            t_onReady(callback);
        } else {
            document.addEventListener('DOMContentLoaded', callback);
        }
    };

    const waitForCartInit = (callback) => {
        if (typeof t_onFuncLoad === 'function') {
            t_onFuncLoad('tcart__init', callback);
        } else {
            setTimeout(callback, 300);
        }
    };

    const init = () => {
        setTimeout(() => {
            waitForCartInit(() => {
                setupCartFunctionality();
            });
        }, 200);
    };

    const setupCartFunctionality = () => {
        
        const recElement = document.querySelector(`div[data-tooltip-hook="${popupLink}"]`);
        
        if (!recElement) {
            return;
        }
        
        const recParent = recElement.closest('.t-rec');
        if (!recParent) {
            return;
        }
        
        const recID = recParent.id.replace(/[^0-9]/g, '');

        const submitButton = document.querySelector('.t706 .t-form__submit');
        if (submitButton) {
            const continueBtn = document.createElement('div');
            continueBtn.className = 'continue-btn';
            continueBtn.textContent = btnCaption;
            continueBtn.onclick = () => {
                if (typeof tcart__closeCart === 'function') {
                    tcart__closeCart();
                }
                if (typeof t702_showPopup === 'function') {
                    t702_showPopup(recID);
                }
            };
            submitButton.parentNode.insertBefore(continueBtn, submitButton.nextSibling);
        }

        const productlist = document.querySelector('textarea[name="productlist"]');
        if (productlist) {
            const inputGroup = productlist.closest('.t-input-group');
            if (inputGroup) {
                inputGroup.style.display = 'none';
            }
        }

        const t706Container = document.querySelector('.t706');
        if (t706Container) {
            t706Container.addEventListener('click', (e) => {
                const target = e.target;
                if (target.classList.contains('continue-btn') || target.closest('.continue-btn')) {
                    updateProductList(productlist);
                }
            });
        }
    };

    const updateProductList = (productlist) => {
        let productListElement = productlist;
        if (!productListElement) {
            productListElement = document.querySelector('textarea[name="productlist"]');
            if (!productListElement) return;
        }

        let prList = "";
        const products = document.querySelectorAll('.t706__product');
        
        products.forEach((product, index) => {
            const titleElement = product.querySelector('.t706__product-title a');
            const skuElement = product.querySelector('.t706__product-title__option');
            const quantElement = product.querySelector('.t706__product-quantity');
            const amountElement = product.querySelector('.t706__product-amount');
            
            const title = titleElement ? titleElement.textContent : '';
            const sku = skuElement ? skuElement.textContent : '';
            const quant = quantElement ? quantElement.textContent : '';
            const amount = amountElement ? amountElement.textContent : '';
            
            prList += `${index + 1}. ${title} -- Артикул: ${sku} -- Кол-во: ${quant} шт  -- Стоимость: ${amount}\n`;
        });
        
        productListElement.value = prList;
    };

    waitForCart(init);
})();
</script>
Made on
Tilda