Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как добавить специальный товар в корзину по промокоду в Tilda
Пицца Филадельфия
SKU: 700.954.29
150
р.
Состав
Тесто дрожжевое, молокосодержащий продукт "Моцарелла", содержит растительные масла, лосось, сливочно-сырный соус, соус унаги, кунжут белый, мука пш. в\с из твердых сортов.

Как добавить специальный товар в корзину по промокоду в Tilda

1
Создали блок в каталоге раздел для товаров по акции.
В этом примере у меня раздел с товарами по цене 1р
2
Создали блок ST305N и вывели туда только этот раздел.
Задали блоку класс uc-promo-product
3
Создали блоки с ошибками из блока BF503 (3 шт)
  • первому задали ссылку #popup:error-empty (он выводится при пустом поле промокода)
  • второму задали ссылку #popup:error-not-full (он выводится при недостаточной сумме заказа)
  • третьему задали ссылку #popup:error-not-found (он выводится при отсутствии товара)
4
Создали блок корзины ST100 с полем для промокода
5
Создали блок T123 и добавили туда код.
  • В коде прописываем промокод и название товара, которому он соответствует
"ODIOMI": "Кранч ролл"
  • И указываем минимальную сумму заказа, для работы этих промокодов
productSummMinimal = 500;
  • В коде заменили номер раздела на свой 569241026922

Все эти созданные блоки добавляем в продуктовый footer, который привязан к каталогу и основному сайту
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Как добавить специальный товар в корзину по промокоду в Tilda
Фрагмент видео
Библиотека примера
<a href="#popup:error-empty" class="error-popup-empty"></a>
<a href="#popup:error-not-full" class="error-not-full"></a>
<a href="#popup:error-not-found" class="error-not-found"></a>



<script>
document.addEventListener("DOMContentLoaded", function () {
(function () {
const totalMinimal = 1; //Минимальное кол-во товара
const productSummMinimal = 500;//Минимальная сумма заказа
//Сообщение об успешном вводе промокода
const successMessage = "Отлично, подарочный промокод успешно применён";
//Промокод=название товара
const productList = {
  "TKPIIC": "Эби Манго ролл",
  "ODIOMI": "Кранч ролл",
  "LCNKEF": "Канзас ролл",
  "RUTNPX": "Чикаго ролл",
  "FAQNPG": "Том ям ролл",
  "GOHIEL": "Цезарь ролл",
  "WCKXPS": "Теплый ролл с кальмаром",
  "DDZRRF": "Калифорния фаер"
};
let firstEventFired = false;
let secondEventFired = false;
let promocodeExecuted = false;
let startPromoTitle = '';
let saveinputPC = '';
let cartID = '';
let pcLid = '';
let currentPrizeProductId = null;
let promoUIUpdated = false;
let isCheckingPrize = false;
let observerTimeout = null;
let cartObservers = [];

function addTextClassToSidebar() {
 
    const sidebar = document.querySelector('.t706__sidebar-products');
    if (sidebar && !sidebar.classList.contains('t-text')) {
        sidebar.classList.add('t-text');
    }

    const cartwin = document.querySelector('.t706__cartwin-products');
    if (cartwin && !cartwin.classList.contains('t-text')) {
        cartwin.classList.add('t-text');
    }
}

function removeCartCountdownAttribute() {
    const cartBlock = document.querySelector('.t706');
    if (cartBlock && cartBlock.hasAttribute('data-cart-countdown')) {
        cartBlock.removeAttribute('data-cart-countdown');
    }
}

function closeSidebarIfNeeded() {
    const body = document.body;
    if (body.classList.contains('t706__body_cartpageshowed') && 
        body.classList.contains('t706__body_cartsidebarshowed')) {
        const closeButton = document.querySelector('.t706__sidebar-close-btn');
        if (closeButton) {
            closeButton.click();
        }
    }
}

function getCartContainers() {
    const popup = document.querySelector('.t706__cartwin-products');
    if (popup) {
        return [popup];
    }
    const sidebar = document.querySelector('.t706__sidebar-products');
    const cartpage = document.querySelector('.t706__cartpage-products');
    const arr = [];
    if (sidebar) arr.push(sidebar);
    if (cartpage) arr.push(cartpage);
    return arr;
}

function findProductElement(container, index) {
    let product = container.querySelector(`.t706__product[data-cart-product-i="${index}"]`);
    if (!product) {
        const products = container.querySelectorAll('.t706__product');
        product = products[index];
    }
    return product;
}

function initCartObservers() {
    cartObservers.forEach(o => o.disconnect());
    cartObservers = [];
    const containers = getCartContainers();
    containers.forEach(container => {
        const observer = new MutationObserver(function () {
            if (observerTimeout) clearTimeout(observerTimeout);
            observerTimeout = setTimeout(function () {
                checkPrizeInCart(container);
            }, 300);
        });
        observer.observe(container, {
            childList: true,
            subtree: true
        });
        cartObservers.push(observer);
    });
}

function checkAndRunPromocodeControl() {
    if (!promocodeExecuted && firstEventFired && secondEventFired) {
        promocodeExecuted = true;
        promocodeControl();
        removeCartCountdownAttribute();
        addTextClassToSidebar();
    }
}

t_onReady(function () {
    setTimeout(function () {
        t_onFuncLoad('tcart__init', function () {
            firstEventFired = true;
            checkAndRunPromocodeControl();
        });
    }, 200);
});

const promoProduct = document.querySelector(".uc-promo-product .js-store-grid-cont");
if (promoProduct) {
    promoProduct.addEventListener('tStoreRendered', function () {
        secondEventFired = true;
        checkAndRunPromocodeControl();
    });
}

function showPopup(cls) {
    const el = document.querySelector(cls);
    if (el) el.click();
}

function updatePromoUI(hidePromo) {
    const inputBlock = document.querySelector('.t-input-group_pc .t-input-block');
    const inputTitle = document.querySelector('.t-input-group_pc .t-input-title');
    if (!inputBlock || !inputTitle) return;
    if (hidePromo) {
        inputBlock.style.display = "none";
        inputTitle.textContent = successMessage;
        inputTitle.classList.add('promo-active');
        promoUIUpdated = true;
    } else {
        inputBlock.style.display = "block";
        inputTitle.textContent = startPromoTitle;
        inputTitle.classList.remove('promo-active');
        currentPrizeProductId = null;
        promoUIUpdated = false;
    }
}

function resetPromoInput() {
    delete window.tcart.promocode;
    tcart__updateTotalProductsinCartObj();
    tcart__reDrawTotal();
    const promoWrapper = document.querySelector('.t-inputpromocode__wrapper');
    if (promoWrapper) {
        promoWrapper.innerHTML = saveinputPC;
    }
    t_input_promocode_init(cartID, pcLid);
}

function findAndClickProduct(promoKey) {
    const productNameElements = promoProduct.querySelectorAll(".js-product-name");
    const targetName = productList[promoKey].toLowerCase().replace(/\s/g, '');
    let found = null;
    productNameElements.forEach(el => {
        const txt = (el.textContent || '').toLowerCase().replace(/\s/g, '');
        if (txt === targetName) {
            found = el.closest('.js-product');
        }
    });
    if (!found) return false;
    const inv = found.getAttribute('data-product-inv');
    if (inv === '0') return 'out_of_stock';
    const uid = found.getAttribute("data-product-gen-uid");
    const btn = found.querySelector('a[href="#order"]');
    if (btn) {
        btn.click();
        tcart__reDrawProducts();
        currentPrizeProductId = uid;
        return true;
    }
    return false;
}

function checkPrizeInCart(container) {
    if (isCheckingPrize) return;
    isCheckingPrize = true;
    try {
        if (!promoProduct) return;
        const productCards = promoProduct.querySelectorAll(".js-product");
        const promoIds = [...productCards].map(card =>
            card.getAttribute("data-product-gen-uid")
        );
        const cartProducts = tcart.products;
        const found = promoIds.find(id =>
            cartProducts.findIndex(p => p.uid === id) !== -1
        );
        if (found) {
            const index = cartProducts.findIndex(p => p.uid === found);
            const productElement = findProductElement(container, index);
            if (productElement && !productElement.classList.contains('prize-element')) {
                productElement.classList.add('prize-element');
                closeSidebarIfNeeded();
            }
            if (!promoUIUpdated) {
                updatePromoUI(true);
            }
            if (tcart.prodamount <= productSummMinimal || tcart.total < totalMinimal) {
                if (productElement) {
                    const deleteButton = productElement.querySelector('.t706__product-del, .t706__product-delete');
                    if (deleteButton) {
                        deleteButton.click();
                    }
                }
            }
        } else {
            updatePromoUI(false);
        }
    } finally {
        isCheckingPrize = false;
    }
}

function checkPromoPrize() {
    let promoKey = document.querySelector('.t706 .t-inputpromocode');
    promoKey = promoKey ? promoKey.value : '';
    if (!promoKey) {
        showPopup('.error-popup-empty');
        resetPromoInput();
        return;
    }
    if (promoKey in productList) {
        if (tcart.prodamount > productSummMinimal && tcart.total >= totalMinimal) {
            const result = findAndClickProduct(promoKey);
            if (result === true) {
                updatePromoUI(true);
                resetPromoInput();
            } else {
                showPopup('.error-not-found');
                resetPromoInput();
            }
        } else {
            showPopup('.error-not-full');
        }
    }
}

function promocodeControl() {
    const titleElement = document.querySelector('.t-input-group_pc .t-input-title');
    if (titleElement) {
        startPromoTitle = titleElement.innerText;
    }
    setTimeout(function () {
        const recordElement = document.querySelector('div[data-record-type="706"]');
        if (recordElement) {
            cartID = recordElement.id.replace(/[^0-9]/g, '');
        }
        const pcGroup = document.querySelector('.t-input-group_pc');
        if (pcGroup) {
            pcLid = pcGroup.getAttribute('data-input-lid');
        }
        const wrapper = document.createElement('div');
        setTimeout(function () {
            const promocodeBtn = document.querySelector('.t-inputpromocode__btn');
            if (promocodeBtn) {
                wrapper.classList.add('pcodeWrp');
                promocodeBtn.parentNode.insertBefore(wrapper, promocodeBtn);
                wrapper.appendChild(promocodeBtn);
                const promoWrapper = document.querySelector('.t-inputpromocode__wrapper');
                if (promoWrapper) {
                    saveinputPC = promoWrapper.innerHTML;
                }
                document.addEventListener('click', function (e) {
                    if (e.target.closest('.pcodeWrp')) {
                        checkPromoPrize();
                    }
                });
            }
        }, 2000);
        tcart__reDrawProducts();
        initCartObservers();
    }, 1000);
}

removeCartCountdownAttribute();
addTextClassToSidebar();


const observeNewElements = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            removeCartCountdownAttribute();
            addTextClassToSidebar();
        }
    });
});
observeNewElements.observe(document.body, {
    childList: true,
    subtree: true
});


const observeSidebar = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
     
        if (mutation.target.classList && 
            mutation.target.classList.contains('t706__sidebar-products')) {
            addTextClassToSidebar();
        }
        
       
        if (mutation.target.classList && 
            mutation.target.classList.contains('t706__cartwin-products')) {
            addTextClassToSidebar();
        }
        
        if (mutation.addedNodes.length) {
            mutation.addedNodes.forEach(function(node) {
                if (node.nodeType === 1) {
                    // Проверяем сам добавленный элемент
                    if (node.classList) {
                        if (node.classList.contains('t706__sidebar-products') || 
                            node.classList.contains('t706__cartwin-products')) {
                            addTextClassToSidebar();
                        }
                    }
                    
                    
                    const sidebarInside = node.querySelector('.t706__sidebar-products');
                    const cartwinInside = node.querySelector('.t706__cartwin-products');
                    
                    if (sidebarInside || cartwinInside) {
                        addTextClassToSidebar();
                    }
                }
            });
        }
    });
});
observeSidebar.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['class']
});

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



<style>
#allrecords .js-product[data-product-part-uid="504936126412"] {
    display: none !important;
}

.uc-promo-product{
    display: none;
}

.t706__cartpage-products {
    padding-bottom: 2px;
}


.t-inputpromocode__wrapper {
    display: flex !important;
}
.t-inputpromocode__btn {
    height: 56px !important;
}    
.pcodeWrp {
    cursor: pointer;
}
.pcodeWrp>div {
    pointer-events: none;
}

.t706__product.prize-element:before {
    content: "Подарок";
    display: block;
    position: absolute;
    background-color: #ffac0a;
    color: #fff;
    border-radius: 4px;
    padding: 2px 15px;
    top: 5px;
    font-size: 12px;
}

.t706__product.prize-element {
    position: relative;
    padding-top: 15px;
    box-shadow: 0 0 0 1px #ffac0a;
    border-radius: 10px;
}

.t706__product.prize-element .t706__product-plusminus {
    visibility: hidden;
}

.t706__product.prize-element .t706__product-del-wrapper {
    visibility: hidden;
}

.t706__product {
    padding: 0px 10px 0px 10px;
    box-sizing: border-box;
}

.t706__cartwin-bottom {border: none;}

.t-inputpromocode__btn {
    line-height: 3.4;
}

.t706  .promo-active {
    background-color: #ffac0a;
    padding: 3px 10px;
    border-radius: 5px;
    color: #fff !important;
}

.t706__body_cartpageshowed .t706__sidebar {
    display: none;
}

#allrecords .js-product.t-col[data-product-part-uid*="569241026922"] {
    display: none !important;
}

</style>
Made on
Tilda