Выбор подарков от суммы заказа в корзине на Tilda

<!-- Добавить выбор подарка в корзине от определенной суммы
Веб-студия Александры Шеиной – https://sheina-studio.ru/ -->



<!-- ===== ИНФРМАЦИЯ =====
❗️   ВАЖНО:   Чтобы код работал на вашем сайте проверьте, что у вас включен jQuery в настройках сайта.

Настройки сайта   ⟶ Вкладка   Вставка кода   ⟶ Ставим галочку у «  Подключить jQuery на страницах сайта  »

1️⃣  ДОБАВЛЯЕМ БЛОК КОРЗИНЫ (ST100)
В корзине добавляем поле «  Вопрос с вариантами ответа в виде картинок  ».
В поле «  Имя переменной  » впишите   podarok  
В «Изображения: варианты ответа» добавьте свои подарки — количество любое
«Обязательное поле» не включаем

2️⃣  НИЖЕ ВСТАВЛЯЕМ КОД
В коде найдите:
  const GIFT_STEP = 9000;  
и замените 9000 на сумму, за которую покупателю доступен 1 подарок.

❗️   ВАЖНО:   количество доступных подарков зависит от суммы корзины. Например, если указано 9000:
9 300 ₽ → можно выбрать 1 подарок
18 500 ₽ → можно выбрать 2 подарка
27 000 ₽ → можно выбрать 3 подарка
Если сумма меньше 9 000 ₽, поле выбора подарка скрыто. -->



<script>
(function () {

    /* =====================================================
       НАСТРОЙКИ
    ===================================================== */

    // ❗️ МЕНЯТЬ СУММУ ЗДЕСЬ
    // Один подарок за каждые 9 000 ₽
    const GIFT_STEP = 9000;

    // Переменная поля в корзине
    const GIFT_FIELD_NAME = 'podarok';


    function parsePrice(text) {
        if (!text) return 0;

        const normalized = text
            .replace(/\s|\u00A0/g, '')
            .replace(',', '.')
            .replace(/[^\d.-]/g, '');

        return parseFloat(normalized) || 0;
    }


    function getCart() {
        return document.querySelector('.t706');
    }


    function getGiftField(cart) {
        if (!cart) return null;

        return Array.from(
            cart.querySelectorAll('.t-input-group')
        ).find(function (field) {
            return field.getAttribute('data-field-name') === GIFT_FIELD_NAME;
        }) || null;
    }


    function getCartTotal(cart) {
        if (!cart) return 0;

        const totalPrice = cart.querySelector(
            '.t706__cartwin-totalamount-wrap ' +
            '.t706__cartwin-prodamount-price'
        );

        if (totalPrice) {
            return parsePrice(totalPrice.textContent);
        }

        const subtotalPrice = cart.querySelector(
            '.t706__cartwin-bottom ' +
            '.t706__cartwin-prodamount-price'
        );

        if (subtotalPrice) {
            return parsePrice(subtotalPrice.textContent);
        }

        return 0;
    }


    function syncHiddenInput(giftField) {
        const hidden = giftField.querySelector(
            '.t-img-select__hiddeninput'
        );

        if (!hidden) return;

        const selected = Array.from(
            giftField.querySelectorAll('.t-img-select:checked')
        ).map(function (checkbox) {
            return checkbox.value;
        });

        hidden.value = selected.join(', ');

        hidden.dispatchEvent(
            new Event('input', {
                bubbles: true
            })
        );

        hidden.dispatchEvent(
            new Event('change', {
                bubbles: true
            })
        );
    }


    function clearGifts(giftField) {
        giftField
            .querySelectorAll('.t-img-select')
            .forEach(function (checkbox) {
                if (!checkbox.checked) return;

                checkbox.checked = false;

                checkbox.dispatchEvent(
                    new Event('change', {
                        bubbles: true
                    })
                );
            });

        syncHiddenInput(giftField);
    }


    function updateDisabledState(giftField, maxGifts) {
        const checkboxes = Array.from(
            giftField.querySelectorAll('.t-img-select')
        );

        const checkedCount = checkboxes.filter(function (checkbox) {
            return checkbox.checked;
        }).length;

        checkboxes.forEach(function (checkbox) {
            checkbox.disabled =
                !checkbox.checked &&
                checkedCount >= maxGifts;

            const item = checkbox.closest(
                '.t-img-select__item'
            );

            if (item) {
                item.style.opacity =
                    checkbox.disabled
                        ? '0.45'
                        : '';

                item.style.pointerEvents =
                    checkbox.disabled
                        ? 'none'
                        : '';
            }
        });
    }


    function updateGiftField() {
        const cart = getCart();

        if (!cart) return;

        const giftField = getGiftField(cart);

        if (!giftField) return;

        const total = getCartTotal(cart);

        let maxGifts = Math.floor(
            total / GIFT_STEP
        );

        const checkboxes = Array.from(
            giftField.querySelectorAll('.t-img-select')
        );

        maxGifts = Math.min(
            maxGifts,
            checkboxes.length
        );

        if (maxGifts < 1) {
            giftField.style.display = 'none';

            clearGifts(giftField);

            return;
        }

        giftField.style.display = '';

        const checked = checkboxes.filter(function (checkbox) {
            return checkbox.checked;
        });

        if (checked.length > maxGifts) {
            checked
                .slice(maxGifts)
                .forEach(function (checkbox) {
                    checkbox.checked = false;

                    checkbox.dispatchEvent(
                        new Event('change', {
                            bubbles: true
                        })
                    );
                });
        }

        syncHiddenInput(giftField);

        updateDisabledState(
            giftField,
            maxGifts
        );
    }


    document.addEventListener(
        'change',
        function (event) {

            if (
                !event.target.classList.contains('t-img-select')
            ) {
                return;
            }

            const giftField = event.target.closest(
                '.t-input-group'
            );

            if (
                !giftField ||
                giftField.getAttribute('data-field-name') !== GIFT_FIELD_NAME
            ) {
                return;
            }

            const cart = getCart();

            if (!cart) return;

            const total = getCartTotal(cart);

            const maxGifts = Math.floor(
                total / GIFT_STEP
            );

            const checked = Array.from(
                giftField.querySelectorAll('.t-img-select:checked')
            );

            if (checked.length > maxGifts) {
                event.target.checked = false;
            }

            syncHiddenInput(giftField);

            updateDisabledState(
                giftField,
                maxGifts
            );
        }
    );


    function init() {
        const cart = getCart();

        if (!cart) {
            setTimeout(init, 300);
            return;
        }

        updateGiftField();

        let timer;

        const observer = new MutationObserver(function () {
            clearTimeout(timer);

            timer = setTimeout(
                updateGiftField,
                50
            );
        });

        observer.observe(
            cart,
            {
                childList: true,
                subtree: true,
                characterData: true
            }
        );

        setTimeout(
            updateGiftField,
            500
        );
    }


    if (document.readyState === 'loading') {
        document.addEventListener(
            'DOMContentLoaded',
            init
        );
    } else {
        init();
    }

})();
</script>