Шкала бесплатной доставки в корзине

Прогресс-бар доставки внутри корзины. Показывает, сколько осталось докупить до бесплатной отправки. Гибкая настройка цветов, текстов и расположения через генератор кода.

Инструкция

Подготовка

Убедитесь, что на вашем сайте используется блок T706 (Виджет корзины). Обычно его размещают в «шапке» (Header) сайта, чтобы он работал на всех страницах.

Настройка дизайна

В генераторе выше укажите целевую сумму (например, 5000), выберите валюту и расположение шкалы внутри корзины. Настройте цвета и тексты под свой стиль.

Вставка кода

Нажмите кнопку «Скопировать код». Создайте на странице (лучше в Footer, где лежит корзина) блок T123 (HTML-код) и вставьте туда полученный скрипт.

Публикация

Опубликуйте страницу. Откройте сайт, добавьте любой товар в корзину — шкала автоматически появится и начнет считать сумму до бесплатной доставки.

Генератор кода

 
// Конфигурация стилей и поведения
const copySuccessMessage = 'Промокод скопирован!';
const doneClass = 'done';
const textSelector = '.text-copy .tn-atom';
const buttonSelector = '.btn-copy .tn-atom';
function createCSS() {
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
.text-copy .tn-atom {
cursor: pointer;
transition: all 0s !important;
}
.btn-copy {
cursor: pointer;
}
.done {
background-color: var(--done-bg-color) !important;
color: var(--done-txt-color) !important;
font-weight: var(--done-txt-weight) !important;
width: 100% !important;
}
:root {
--done-bg-color: transparent; /* цвет фона уведомления после копирования */
--done-txt-color: #000000; /* цвет текста уведомления после копирования */
--done-txt-weight: 600; /* жирность текста уведомления после копирования */
}
`;
document.head.appendChild(style);
}
function copyText(el) {
const tempTextarea = document.createElement('textarea');
document.body.appendChild(tempTextarea);
tempTextarea.value = el.textContent;
tempTextarea.select();
document.execCommand('copy');
document.body.removeChild(tempTextarea);
el.textContent = copySuccessMessage;
el.classList.add(doneClass);
}
document.addEventListener('DOMContentLoaded', () => {
createCSS();
const textElement = document.querySelector(textSelector);
const buttonElement = document.querySelector(buttonSelector);
buttonElement.addEventListener('click', () => {
copyText(textElement);
});
});

1. Логика

Сумма (Цель)

Валюта

Тип корзины

Расположение

2. Тексты

В процессе

Сообщение

Используйте {rem} там, где нужно вывести сумму. Не удаляйте этот тег.

Цель достигнута

Сообщение

3. Дизайн

Цвета

Фон плашки

Основной текст

Цена (Число+Валюта)

Трек (линия)

Заполнение (Fill)

Размеры и шрифты

Шрифт

Размер текста (px)

Жирность

Высота линии (px)

Радиус (px)

.mel-ship-bar.visible { display: flex !important; }

.mel-ship-bar.pos-top { margin: 20px 0 0 0; }
.mel-ship-bar.pos-middle { margin: 0 0 20px 0; }
.mel-ship-bar.pos-bottom { margin: 0 0 20px 0; }

.mel-ship-bar.mode-twostep { 
    margin: 20px 0 20px 0 !important; 
    width: 100%;
}

.mel-ship-text {
    font-size: {{c_fz}}px;
    font-weight: {{c_fw}};
    color: {{c_txt}};
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}

.mel-ship-price {
    color: {{c_price}};
    font-weight: 700;
}

.mel-ship-track {
    width: 100%;
    height: {{b_h}}px;
    background: {{b_bg}};
    border-radius: {{b_rad}}px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.mel-ship-fill {
    height: 100%;
    width: 0%;
    background: {{b_fill}}; 
    border-radius: {{b_rad}}px;
    transition: width 0.3s ease;
}
</style> <script>
document.addEventListener('DOMContentLoaded', function() {
    const GOAL = {{s_goal}}; 
    const CURRENCY = '{{s_curr}}';
    const POSITION = '{{s_pos}}';
    const CART_TYPE = '{{s_type}}'; 
    const MSG_PROCESS = '{{t_proc}}';
    const MSG_SUCCESS = '{{t_succ}}';

function getBarHTML() {
        return `
            <div class="mel-ship-text mel-ship-msg"></div> <div class="mel-ship-track"> <div class="mel-ship-fill mel-ship-prog"></div> </div>
        `;
    }

function checkAndInject() {
        if (CART_TYPE === 'twostep') {
            
            const sideTotals = document.querySelectorAll('.t706__cartwin-totalamount-wrap');
            sideTotals.forEach(el => {
                if (el.closest('.t706__cartpage')) return; 
                
                if (el.parentElement.querySelector('.mel-ship-bar')) return;

const bar = document.createElement('div');
                bar.className = 'mel-ship-bar mode-twostep';
                bar.innerHTML = getBarHTML();
                el.insertAdjacentElement('beforebegin', bar);
            });

const checkoutTotals = document.querySelectorAll('.t706__cartpage-totals');
            checkoutTotals.forEach(el => {
                if (el.parentElement.querySelector('.mel-ship-bar')) return;

const bar = document.createElement('div');
                bar.className = 'mel-ship-bar mode-twostep';
                bar.innerHTML = getBarHTML();
                el.insertAdjacentElement('beforebegin', bar);
            });

} 
        else {
            const popup = document.querySelector('.t706__cartwin-content');
            
            if (popup && popup.querySelector('.mel-ship-bar')) {
                updateData();
                return; 
            }

if (popup && popup.style.display !== 'none' && popup.style.opacity !== '0') {
                let anchor = null;
                let method = 'afterend';
                let mode = 'pos-' + POSITION;

if (POSITION === 'top') {
                    anchor = document.querySelector('.t706__cartwin-heading') || document.querySelector('.t706__cartwin-top');
                } else if (POSITION === 'middle') {
                    anchor = document.querySelector('.t706__cartwin-prodamount-wrap');
                    method = 'beforebegin';
                } else if (POSITION === 'bottom') {
                    anchor = document.querySelector('.t706__cartwin-totalamount-wrap');
                    method = 'beforebegin';
                }
                
                if (anchor) {
                    const bar = document.createElement('div');
                    bar.className = 'mel-ship-bar ' + mode;
                    bar.innerHTML = getBarHTML();
                    
                    if (method === 'afterend') anchor.insertAdjacentElement('afterend', bar);
                    else anchor.insertAdjacentElement('beforebegin', bar);
                }
            }
        }

updateData();
    }

const bars = document.querySelectorAll('.mel-ship-bar');
        bars.forEach(bar => {
            const msg = bar.querySelector('.mel-ship-msg');
            const fill = bar.querySelector('.mel-ship-prog');

if (total <= 0 || isNaN(total)) {
                bar.classList.remove('visible');
                return;
            }
            bar.classList.add('visible');

const remaining = GOAL - total;
            let percent = (total / GOAL) * 100;
            if (percent > 100) percent = 100;

if (remaining > 0) {
                let priceHtml = '<span class="mel-ship-price">' + remaining.toLocaleString() + ' ' + CURRENCY + '</span>';
                msg.innerHTML = MSG_PROCESS.replace('{rem}', priceHtml);
                fill.style.width = percent + '%';
            } else {
                msg.innerHTML = MSG_SUCCESS;
                fill.style.width = '100%';
            }
        });
    }

setInterval(checkAndInject, 500);
});
</script>

Пример работы модификации

SALE

Dining Chair by esteban+moreno

With a new design approach for flexible use: from a dinner for two to a big celebration.

Underwater wearable watches

An accessory for any occasion, from a nice dinner to an underwater swim.

Marinetmarine store backpack. The Sac Marin can be worn as a backpack or as a bag over one shoulder.

3400

р.

В корзину

Помогаем делать модификации лучше

Написать в Telegram

Ваша обратная связь помогает мне развивать инструменты для Тильды. Если что-то пошло не так или у вас есть крутое предложение по улучшению функционала — буду рад обсудить.

Отвечаю лично, читаю всё.

Разработано meloddy.design

Заполните форму ниже что бы задать вопрос или сообщить о баге