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

Как сделать кнопку восстановления заказа в корзине в Тильда

1
Создаём товары в магазине
2
Добавляем блок корзины ST100
3
Вставляем код на страницу в блок Т123
Код вставляется в обычный и продуктовый footer
Библиотека для примера
<!-- ВОССТАНОВЛЕНИЕ ПОСЛЕДНЕГО ЗАКАЗА -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {

        const BUTTON_CAPTION = 'Восстановить заказ';
        const BUTTON_CAPTION_EMPTY = 'Нет сохранённых заказов';
        const BUTTON_CAPTION_ERROR = 'Ошибка';
        const STORAGE_KEY = 'tcart_backup';

        let emptyCart = true;

        let restoreButtonAdded = false;
        let restoreButtonHidden = false;
        let lastSavedHash = null;

        function hasBackup() {
            try {
                const saved = localStorage.getItem(STORAGE_KEY);
                if (!saved) return false;
                const parsed = JSON.parse(saved);
                if (!parsed) return false;
                if (Array.isArray(parsed.products) && parsed.products.length === 0) return false;
                return true;
            } catch (e) {
                return false;
            }
        }

        function isCartEmpty() {
            try {
                const raw = localStorage.getItem('tcart');
                if (!raw) return true;

                const cart = JSON.parse(raw);
                if (!cart) return true;

                if (typeof cart.total !== 'undefined') {
                    const total = Number(cart.total);
                    if (!isNaN(total) && total > 0) return false;
                }

                if (Array.isArray(cart.products) && cart.products.length > 0) {
                    return false;
                }

                return true;
            } catch (e) {
                return true;
            }
        }

        function saveCartSnapshot() {
            try {
                const current = localStorage.getItem('tcart');
                if (!current) return false;

                const parsed = JSON.parse(current);
                if (!parsed || (Array.isArray(parsed.products) && parsed.products.length === 0)) {
                    return false;
                }

                const hash = JSON.stringify(parsed);
                if (hash === lastSavedHash) return false;
                lastSavedHash = hash;

                localStorage.setItem(STORAGE_KEY, current);

                if (!restoreButtonAdded && !restoreButtonHidden) {
                    addRestoreButton();
                }

                return true;
            } catch (e) {
                return false;
            }
        }

        document.addEventListener('click', function(event) {
            const submitBtn = event.target.closest('.t706 .t-submit');
            if (submitBtn) {
                saveCartSnapshot();
            }
        }, true);

        document.addEventListener('keydown', function(event) {
            if (event.key !== 'Enter') return;
            const cart = document.querySelector('.t706');
            if (!cart) return;

            const target = event.target;
            if (!target) return;

            const isFormField = target.matches('input, textarea, select');
            if (isFormField && cart.contains(target)) {
                saveCartSnapshot();
            }
        }, true);

        document.addEventListener('submit', function(event) {
            const cart = document.querySelector('.t706');
            if (cart && cart.contains(event.target)) {
                saveCartSnapshot();
            }
        }, true);


        function addRestoreButton() {
            if (restoreButtonAdded) return;
            if (restoreButtonHidden) return;

            if (!hasBackup()) return;

            if (emptyCart && !isCartEmpty()) return;

            const cart = document.querySelector('.t706');
            if (!cart) return;

            let target = cart.querySelector('.t706__cartwin-top')
                      || cart.querySelector('.t706__sidebar-top');
            if (!target) return;

            if (cart.querySelector('.restore-cart-wrapper')) {
                restoreButtonAdded = true;
                return;
            }

            const wrapper = document.createElement('div');
            wrapper.className = 'restore-cart-wrapper t-text';
            wrapper.innerHTML = `
                <button class="restore-cart-button" type="button">
                    <span>${BUTTON_CAPTION}</span>
                </button>
            `;

            target.parentNode.insertBefore(wrapper, target);

            restoreButtonAdded = true;
        }

        function restoreCartFromBackup() {
            try {
                const saved = localStorage.getItem(STORAGE_KEY);
                if (!saved) {
                    return { success: false, error: 'Нет сохранённых заказов' };
                }

                const parsed = JSON.parse(saved);
                if (!parsed) {
                    return { success: false, error: 'Данные повреждены' };
                }

                localStorage.setItem('tcart', JSON.stringify(parsed));

                if (typeof tcart__reDrawCartIcon === 'function') {
                    tcart__reDrawCartIcon();
                }
                if (typeof tcart__reDrawProducts === 'function') {
                    tcart__reDrawProducts();
                }
                if (typeof tcart__reDrawTotal === 'function') {
                    tcart__reDrawTotal();
                }
                if (typeof tcart__openCart === 'function') {
                    tcart__openCart();
                }

                return { success: true };
            } catch (e) {
                return { success: false, error: e.message || 'Ошибка восстановления' };
            }
        }

        document.addEventListener('click', function(event) {
            const btn = event.target.closest('.restore-cart-button');
            if (!btn) return;

            const span = btn.querySelector('span');
            const wrapper = btn.closest('.restore-cart-wrapper');

            btn.style.pointerEvents = 'none';

            const result = restoreCartFromBackup();

            if (result.success) {
                restoreButtonHidden = true;
                restoreButtonAdded = false;
                if (wrapper) {
                    wrapper.style.display = 'none';
                }
            } else {
                if (span) span.textContent = result.error === 'Нет сохранённых заказов'
                    ? BUTTON_CAPTION_EMPTY
                    : BUTTON_CAPTION_ERROR;

                setTimeout(function() {
                    if (span) span.textContent = BUTTON_CAPTION;
                    btn.style.pointerEvents = '';
                }, 1800);
            }
        });

        function initRestoreCart() {
            addRestoreButton();

            const observer = new MutationObserver(function() {
                if (!restoreButtonAdded && !restoreButtonHidden) {
                    addRestoreButton();
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });

            setTimeout(function() {
                observer.disconnect();
            }, 30000);
        }

        setTimeout(function() {
            t_onReady(function() {
                setTimeout(function() {
                    t_onFuncLoad('tcart__init', function() {
                        setTimeout(initRestoreCart, 1500);
                    });
                }, 200);
            });
        }, 0);

    })();
});
</script>

<style>

button.restore-cart-button {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #fcb42f;
    background-color: #fcb42f;
    color: #000000;
    font-size: 15px;
}
button.restore-cart-button:hover {
    background-color: #FF9800;
    color: #fff;
}

.restore-cart-wrapper {
    width: max-content;
    margin-bottom: 12px;
}

button.restore-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #fcb42f;
    background-color: #fcb42f;
    color: #000000;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    height: max-content;
    box-sizing: border-box;
}

.t706__cartwin-content {
    padding-top: 28px;
}

button.restore-cart-button span {
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    button.restore-cart-button {
        font-size: 14px;
        padding: 9px 12px;
    }
}
</style>
Made on
Tilda