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

<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));
                }
            }
            
            // Функция для управления классом free-mode-action на всех блоках
            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');
                    }
                });
            }
            
            // Функция для показа/скрытия всех блоков free-delivery-info-wrapper
            function setDeliveryBlocksVisibility(show) {
                const deliveryBlocks = cart.querySelectorAll('.free-delivery-info-wrapper');
                deliveryBlocks.forEach(function(block) {
                    if (show) {
                        block.style.display = ''; // Возвращаем стандартное отображение (обычно block/flex)
                    } else {
                        block.style.display = 'none'; // Прячем блок
                    }
                });
            }
            
            // Настройка наблюдателя для базовой доставки
            function setupBaseDeliveryObserver(wrp) {
                const observer = new MutationObserver(function() {
                    const freeDeliverySumm = wrp.getAttribute('data-delivery-free');
                    if (freeDeliverySumm) {
                        updateDeliveryMessage(parseFloat(freeDeliverySumm), true);
                    } else {
                        setFreeModeClass(false); // Удаляем класс
                        setDeliveryBlocksVisibility(false); // Прячем блоки, если нет порога
                    }
                });
                
                const elem = cart.querySelector('.t706__cartwin-prodamount');
                if (elem) {
                    observer.observe(elem, {
                        childList: true, 
                        subtree: true, 
                        characterDataOldValue: true
                    });
                }
                
                // Первоначальная проверка
                const freeDeliverySumm = wrp.getAttribute('data-delivery-free');
                if (freeDeliverySumm) {
                    updateDeliveryMessage(parseFloat(freeDeliverySumm), true);
                } else {
                    setFreeModeClass(false);
                    setDeliveryBlocksVisibility(false);
                }
            }
            
            // Настройка наблюдателя для кастомной доставки
            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);
                    }
                }
                
                // Функция debounce для оптимизации
                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) {
                    // Доставка еще не бесплатная - показываем сколько нужно докупить
                    // Удаляем класс free-mode-action, так как это обычный режим
                    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 {
                    // Доставка бесплатна - показываем сообщение об этом
                    // Добавляем класс free-mode-action для специального оформления
                    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>