Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать сообщение о необходимой сумме до бесплатной доставки в Тильда

Как сделать сообщение о необходимой сумме до бесплатной доставки в Тильда

1
Создали корзину с полем доставка
2
Задали сумму для бесплатной доставки в этом поле
3
Вставили код на страницу в блок Т123
В коде можно заменить ключевые фразы

  • Купите ещё на <strong>$$$</strong> и будет <strong>бесплатная</strong> доставка
  • У вас бесплатная доставка
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Как сделать сообщение о необходимой сумме до бесплатной доставки в Тильда
Фрагмент видео
Библиотека для примера
<script>
(function () {
    let messageText = `Купите ещё на <strong>$$$</strong> и будет <strong>бесплатная</strong> доставка`;
    let freeMessageText = `У вас бесплатная доставка`;
    
    t_onReady(function() {
        setTimeout(function() {
            t_onFuncLoad('tcart__init',function() {
                const openCartOriginal = window.tcart__openCart;
                let firstCartOpen = true;
                
                window.tcart__openCart = function(...args) {
                    if(firstCartOpen) {
                        checkDelivery();
                        firstCartOpen = false;
                    }
                    return openCartOriginal.apply(this, args);
                };
            });
            
            let cart = null;
            
            function formatNumber(number) {
                return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
            }
            
            const freeDeliveryInfo = document.createElement("div");
            freeDeliveryInfo.className = "free-delivery-info-wrapper t-text";
            freeDeliveryInfo.innerHTML = `
                <div class="free-delivery-info-icon"></div>
                <div class="free-delivery-info-text">ИНФО</div>
            `;
            
            function checkDelivery() {
                cart = document.querySelector('.t706');
                if (!cart) return;
                
                const deliveryGroup = cart.querySelector('.t-input-group_dl');
                if (!deliveryGroup) return;
                
                const deliveryWrapper = cart.querySelector('.t-radio__wrapper-delivery');
                if (!deliveryWrapper) return;
                
                addDeliveryInfoElements();
                
                if (deliveryWrapper.id === 'customdelivery') {
                    setupCustomDeliveryObserver(deliveryWrapper);
                } else {
                    setupBaseDeliveryObserver(deliveryWrapper);
                }
            }
            
            function addDeliveryInfoElements() {
                const sidebarBottom = cart.querySelector('.t706__sidebar-bottom');
                if (sidebarBottom) {
                    sidebarBottom.prepend(freeDeliveryInfo.cloneNode(true));
                }
                
                const deliveryWrapper = cart.querySelector('.t-radio__wrapper-delivery');
                const clonedInfo = freeDeliveryInfo.cloneNode(true);
                deliveryWrapper.closest('.t-input-group_dl').prepend(clonedInfo);
                
                const cartPageOpenFormWrap = cart.querySelector('.t706__cartpage-open-form-wrap');
                if (cartPageOpenFormWrap) {
                    cartPageOpenFormWrap.prepend(freeDeliveryInfo.cloneNode(true));
                }
            }
            
            function setFreeModeClass(enable) {
                const deliveryBlocks = cart.querySelectorAll('.free-delivery-info-wrapper');
                deliveryBlocks.forEach(function(block) {
                    if (enable) {
                        block.classList.add('free-mode-action');
                    } else {
                        block.classList.remove('free-mode-action');
                    }
                });
            }
            
            function setDeliveryBlocksVisibility(show) {
                const deliveryBlocks = cart.querySelectorAll('.free-delivery-info-wrapper');
                deliveryBlocks.forEach(function(block) {
                    if (show) {
                        block.style.display = '';
                    } else {
                        block.style.display = 'none';
                    }
                });
            }
            
            function setupBaseDeliveryObserver(wrp) {
                function checkSelectedBaseDelivery() {
                    const deliveryChecked = wrp.querySelector('.t-radio_delivery:checked');
                    const freeDeliverySumm = wrp.getAttribute('data-delivery-free');
                    
                    if (!deliveryChecked) {
                        setFreeModeClass(false);
                        setDeliveryBlocksVisibility(false);
                        return;
                    }
                    
                    const deliveryPrice = deliveryChecked.getAttribute('data-delivery-price');
                    const isPaidDelivery = deliveryPrice !== null && deliveryPrice !== '';
                    
                    if (isPaidDelivery && freeDeliverySumm) {
                        updateDeliveryMessage(parseFloat(freeDeliverySumm), true);
                    } else {
                        setFreeModeClass(false);
                        setDeliveryBlocksVisibility(false);
                    }
                }
                
                function debounce(func, delay) {
                    let timeoutId;
                    return function() {
                        clearTimeout(timeoutId);
                        timeoutId = setTimeout(func, delay);
                    };
                }
                
                const deliveryObserver = new MutationObserver(debounce(function() {
                    checkSelectedBaseDelivery();
                }, 300));
                
                deliveryObserver.observe(wrp, { 
                    childList: true, 
                    subtree: true,
                    attributes: true,
                    attributeFilter: ['class', 'checked']
                });
                
                const amountObserver = new MutationObserver(debounce(function() {
                    checkSelectedBaseDelivery();
                }, 100));
                
                const elem = cart.querySelector('.t706__cartwin-prodamount');
                if (elem) {
                    amountObserver.observe(elem, {
                        childList: true, 
                        subtree: true, 
                        characterDataOldValue: true
                    });
                }
                
                setTimeout(checkSelectedBaseDelivery, 500);
            }
            
            function setupCustomDeliveryObserver(wrp) {
                if (typeof tcart__initDelivery === 'function') {
                    tcart__initDelivery();
                }
                
                function checkSelectedDelivery() {
                    const deliveryChecked = wrp.querySelector('.t-radio_delivery:checked');
                    
                    if (!deliveryChecked || !deliveryChecked.hasAttribute('data-free-delivery-threshold')) {
                        setFreeModeClass(false);
                        setDeliveryBlocksVisibility(false);
                        return;
                    }
                    
                    const freeDeliverySumm = deliveryChecked.getAttribute('data-free-delivery-threshold');
                    if (freeDeliverySumm) {
                        updateDeliveryMessage(parseFloat(freeDeliverySumm), false);
                    } else {
                        setFreeModeClass(false);
                        setDeliveryBlocksVisibility(false);
                    }
                }
                
                function debounce(func, delay) {
                    let timeoutId;
                    return function() {
                        clearTimeout(timeoutId);
                        timeoutId = setTimeout(func, delay);
                    };
                }
                
                const observer = new MutationObserver(debounce(function() {
                    checkSelectedDelivery();
                }, 300));
                
                observer.observe(wrp, { 
                    childList: true, 
                    subtree: true,
                    attributes: true,
                    attributeFilter: ['class', 'checked']
                });
                
                const amountObserver = new MutationObserver(debounce(function() {
                    checkSelectedDelivery();
                }, 100));
                
                const elem = cart.querySelector('.t706__cartwin-prodamount');
                if (elem) {
                    amountObserver.observe(elem, {
                        childList: true, 
                        subtree: true, 
                        characterDataOldValue: true
                    });
                }
                
                setTimeout(checkSelectedDelivery, 500);
            }
            
            function updateDeliveryMessage(freeDeliverySumm, isBaseDelivery) {
                setDeliveryBlocksVisibility(true);
                
                let prodAmount = tcart.prodamount;
                const discount = tcart.prodamount_withdiscount;
                if (discount !== undefined) prodAmount = discount;
                
                const remainingSum = freeDeliverySumm - prodAmount;
                const freeInfoTextEls = cart.querySelectorAll(".free-delivery-info-text");
                
                if (remainingSum > 0) {
                    setFreeModeClass(false);
                    
                    const formattedRemaining = formatNumber(remainingSum);
                    let messageTextReplace = messageText.split('$$$');
                    messageTextReplace = `${messageTextReplace[0]}${formattedRemaining} ${tcart.currency}${messageTextReplace[1]}`;
                    
                    freeInfoTextEls.forEach(function(el) {
                        el.innerHTML = messageTextReplace;
                    });
                } else {
                    setFreeModeClass(true);
                    
                    freeInfoTextEls.forEach(function(el) {
                        el.innerHTML = freeMessageText;
                    });
                }
            }
            
        }, 200);
    });
})();
</script>



<style>
.free-delivery-info-wrapper {
    margin: 30px 0;
    align-items: center;
    column-gap: 12px;
    font-size: 16px;
    display: flex;
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 12px;
}


.free-delivery-info-wrapper.free-mode-action {
    background-color: #ddffe7;
}


.free-delivery-info-wrapper {
    background-color: #f1f1f1;
    border-radius: 5px;
    padding: 12px;
}

.free-delivery-info-wrapper.free-mode-action {
    background-color: #ddffe7;
}

.show-free-delivery-info .free-delivery-info-wrapper{
    display: flex;
}

.free-delivery-info-icon {
    background-image: url(https://static.tildacdn.com/tild3838-3038-4337-b436-653063633763/mbridelivery_99588.svg);
    background-position: center;
    width: 40px;
    min-width: 40px;
    aspect-ratio: 1;
    background-size: contain;
    background-repeat: no-repeat;
}

.t706 .t706__sidebar-prodamount-wrap {
    padding-bottom: 0px;
}

#customdelivery {
    margin-top: 20px;
}

.show-free-delivery-info .t706__sidebar-prodamount-wrap {
    padding-bottom: 0px;
}

.show-free-delivery-info .free-delivery-info-wrapper {
    margin: 15px 0;
}

.t706 .t706__sidebar-content {
    max-width: 600px;
}

</style>
Made on
Tilda