Делаем кнопку «Быстрый заказ» в карточке товара Тильда

<!-- Делаем кнопку «Быстрый заказ» в карточке товара Тильда | youx.agency -->
<!-- https://youx.agency/bystryj-zakaz-v-kartochke-tovara-tilda -->

<a href="#popup:fastorder" class="fastform" style="display:none !important;"></a>

<script>
(function() {
    function injectFastOrderBtn() {
        const btnWrapper = document.querySelector('.t-store__prod-popup__btn-wrapper');
        if (!btnWrapper || btnWrapper.querySelector('.custom-fast-order-btn')) return;

        const fastBtn = document.createElement('div');
        fastBtn.className = 'custom-fast-order-btn';
        fastBtn.innerText = 'КУПИТЬ В 1 КЛИК';
        
        if (!document.getElementById('fast-order-styles')) {
            const style = document.createElement('style');
            style.id = 'fast-order-styles';
            style.innerHTML = `
                /* Твое изменение для отступов в форме */
                .t702 .t-form__inputsbox_vertical-form .t-input-group {
                    margin-bottom: 10px !important;
                }

                .t-store__prod-popup__btn-wrapper {
                    display: flex !important;
                    flex-wrap: wrap !important;
                    align-items: center !important;
                }
                
                .t-store__prod-popup__btn-wrapper .t-store__prod__quantity {
                    height: 50px !important;
                    display: flex !important;
                    align-items: center !important;
                    box-sizing: border-box !important;
                }

                .t-store__prod-popup__btn-wrapper .t-btn {
                    height: 50px !important;
                    line-height: 50px !important;
                }

                .custom-fast-order-btn {
                    display: inline-block !important;
                    height: 50px !important;
                    line-height: 48px !important;
                    margin-left: 4px !important;
                    padding: 0 20px !important;
                    background-color: transparent !important;
                    color: #ff3347 !important;
                    border: 1px solid #ff3347 !important;
                    border-radius: 5px !important;
                    font-family: Arial, sans-serif !important;
                    font-weight: 700 !important;
                    font-size: 14px !important;
                    text-transform: uppercase !important;
                    text-align: center !important;
                    cursor: pointer !important;
                    box-sizing: border-box !important;
                    white-space: nowrap !important;
                }

                @media screen and (max-width: 640px) {
                    .custom-fast-order-btn {
                        flex: 1 1 100% !important;
                        height: 42px !important;
                        line-height: 40px !important;
                        margin-left: 0 !important;
                        margin-top: 4px !important;
                    }
                }

                .fast-order-card {
                    display: block !important;
                    background-color: #f9f9f9 !important;
                    padding: 15px !important;
                    border-radius: 8px !important;
                    margin-bottom: 10px !important;
                    border: 1px solid #eee !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                    text-align: left !important;
                }
                .fast-order-card-info { font-family: Arial, sans-serif !important; }
                .fast-order-card-info b { 
                    display: block !important; 
                    margin-bottom: 5px !important; 
                    font-size: 15px !important; 
                    color: #000 !important; 
                }
                .fast-order-card-info span { 
                    display: inline !important; 
                    font-size: 13px !important; 
                    color: #777 !important; 
                }
                .fast-order-card-info .highlight { 
                    color: #ff3347 !important; 
                    font-weight: 700 !important; 
                }
                .fast-order-card-info .total-row {
                    display: block !important;
                    margin-top: 5px !important;
                    color: #000 !important;
                    font-weight: 700 !important;
                }
            `;
            document.head.appendChild(style);
        }

        btnWrapper.appendChild(fastBtn);

        fastBtn.addEventListener('click', function() {
            const card = btnWrapper.closest('.js-product');
            if (!card) return;

            const name = card.querySelector('.js-store-prod-name')?.innerText || '';
            const sku = card.querySelector('.js-store-prod-sku')?.innerText || '';
            const priceText = card.querySelector('.js-store-prod-price')?.innerText || '0';
            const priceNum = parseFloat(priceText.replace(/\s+/g, '').replace(',', '.'));
            const qtyInput = card.querySelector('.js-store-prod-quantity, .t-store__prod__quantity-input');
            const quantity = qtyInput ? parseInt(qtyInput.value) : 1;
            
            const totalSum = (priceNum * quantity).toLocaleString('ru-RU');

            const formBlock = document.querySelector('.uc-fast-order');
            if (formBlock) {
                const inputsBox = formBlock.querySelector('.t-form__inputsbox');
                if (inputsBox) {
                    const oldCard = formBlock.querySelector('.fast-order-card');
                    if (oldCard) oldCard.remove();

                    const orderCard = document.createElement('div');
                    orderCard.className = 'fast-order-card';
                    orderCard.innerHTML = `
                        <div class="fast-order-card-info">
                            <b>${name}</b>
                            <span>Кол-во: <span class="highlight">${quantity} шт.</span></span>
                            ${sku ? `<span style="color:#777;"> (${sku})</span>` : ''}
                            <div class="total-row">Итого: <span class="highlight">${totalSum} р.</span></div>
                        </div>
                    `;
                    inputsBox.prepend(orderCard);
                }
                
                const input = formBlock.querySelector('input[name="COMMENTS"]');
                if (input) {
                    input.value = `${name} [x${quantity}] — ${totalSum} р. ${sku ? 'Арт: '+sku : ''}`;
                }
                document.querySelector('.fastform').click();
            }
        });
    }

    setInterval(injectFastOrderBtn, 1000);
})();
</script>