Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как добавить выбор подарка в корзине для определённого раздела в Tilda
Бесплатная упаковка в подарок!

Как добавить выбор подарка в корзине для определённого раздела в Tilda

1
Создали блок ST310N с классом uc-present-block и добавили в него раздел с нужными подарками
2
Создали блок BF503 со ссылкой #popup:present , задали ему ширину 12 колонок и назначили класс uc-present-popup
3
Вставили код на страницу в блок Т123
В коде прописали номер раздела контролируемых товаров и пороговую сумма заказа
const stepSum = 2000;//Сумма заказа
//Номер раздела
const partNumber = ['959663397012'];

А также номер раздела с подарками
data-product-part-uid*="959663397012"

Блоки и код также должны быть расположены в продуктовом футере
Библиотека для примера
<script>
(function () {
    
    const stepSum = 2000;//Сумма заказа
    //Номер раздела
    const partNumber = ['487071957192'];

    let presentBlock = null;
    let presentPopupBlock = null;
    let popupId = null;
    
    let wasCartOpen = false;
    let popupShownForCurrentCartSession = false;
    
    document.addEventListener("DOMContentLoaded", function() {
        presentBlock = document.querySelector('.uc-present-block');
        presentPopupBlock = document.querySelector('.uc-present-popup');
        if (presentBlock && presentPopupBlock) {
            popupId = presentPopupBlock.getAttribute('id').replace(/\D/g, '');
            const codeWrap = presentPopupBlock.querySelector('.t-popup__container');
            if (codeWrap) {
                codeWrap.innerHTML = '';
                codeWrap.appendChild(presentBlock);
                
                const closeBtn = document.createElement("div");
                closeBtn.className = "close-popup-btn";
                closeBtn.addEventListener('click', function() {
                    t390_closePopup(popupId);
                });
                codeWrap.append(closeBtn);
            };
            
            presentBlock.addEventListener('click', function(event) {
                if (event.target.matches('a[href="#order"]') || event.target.closest('a[href="#order"]')) {
                    const button = event.target.matches('a[href="#order"]') 
                        ? event.target 
                        : event.target.closest('a[href="#order"]');
                    
                    if (document.querySelector('body').classList.contains('t706__body_cartpageshowed')) {
                        setTimeout(function() {
                            tcart__closeCartSidebar();
                        }, 500);
                    };
                    
                    const productElement = button.closest('.js-product');
                    if (productElement) {
                        const productLid = productElement.getAttribute('data-product-lid');
                        
                        if (productLid) {
                            setTimeout(() => {
                                const products = tcart.products;
                                for (let i = products.length - 1; i >= 0; i--) {
                                    const product = products[i];
                                    if (product.lid && product.lid.toString() === productLid.toString()) {
                                        product.present = true;
                                        tcart__saveLocalObj();
                                        break;
                                    };
                                };
                            }, 150);
                        }
                    };
                };
            });
        };
    });


    t_onReady(function() {
        setTimeout(function() {
            t_onFuncLoad('tcart__init',function() {
                setTimeout(function() {
                   if (presentBlock && presentPopupBlock) {
                       initCartMonitoring();
                       trackCartState();
                   }
                },500);    
            });
        },200);    
    });    

    function initCartMonitoring() {
        document.querySelector('.t706').setAttribute('data-cart-countdown', 'no');
        const observer = new MutationObserver(mutationRecords => {
            setTimeout(function() {
                updateCartProducts();    
            }, 300);
        });
        
        const elem  = document.querySelector('.t706__cartwin-prodamount');
        if (elem) {
            observer.observe(elem, {
                childList: true, 
                subtree: true, 
                characterDataOldValue: true
            });
        }
        
        setTimeout(function() {
            updateCartProducts();
        }, 500);
    }

    function updateCartProducts() {
        if (!tcart || !tcart.products) return;
        
        document.querySelectorAll('.present-product').forEach(el => {
            el.classList.remove('present-product');
        });
        
        const products = tcart.products;
        
        products.forEach((product, index) => {
            if (product.present === true) {
                const productElements = document.querySelectorAll(`.t706__product[data-cart-product-i="${index}"]`);
                productElements.forEach(element => {
                    element.classList.add('present-product');
                });
            }
        });
    }
    
    function trackCartState() {
        setInterval(function() {
            const body = document.body;
            const isCartOpen = body.classList.contains('t706__body_cartwinshowed') || 
                              body.classList.contains('t706__body_cartpageshowed');
            
            if (!wasCartOpen && isCartOpen) {
                wasCartOpen = true;
                popupShownForCurrentCartSession = false;
                checkPopupConditions();
            }
            else if (wasCartOpen && !isCartOpen) {
                wasCartOpen = false;
                popupShownForCurrentCartSession = false;
            }
            
            if (isCartOpen) {
                checkPopupConditions();
            }
            
        }, 300);
        
        setTimeout(function() {
            const body = document.body;
            wasCartOpen = body.classList.contains('t706__body_cartwinshowed') || 
                         body.classList.contains('t706__body_cartpageshowed');
            if (wasCartOpen) {
                checkPopupConditions();
            }
        }, 500);
    }
    
    function checkPopupConditions() {
        if (!presentBlock || !presentPopupBlock || !tcart || !tcart.products) return;
        
        let productSumm = 0;
        let hasRequiredSectionProducts = false;
        let presentInCart = false;
        
        const products = tcart.products;
        
        products.forEach((product) => {
            const isFromRequiredSection = product.part_uids && 
                                          product.part_uids.some(uid => partNumber.includes(uid));
            
            if (isFromRequiredSection) {
                productSumm += product.amount || 0;
                hasRequiredSectionProducts = true;
            }
            
            if (product.present === true) {
                presentInCart = true;
            }
        });
        
        const body = document.body;
        const isCartOpen = body.classList.contains('t706__body_cartwinshowed') || 
                          body.classList.contains('t706__body_cartpageshowed');
        
        if (hasRequiredSectionProducts && productSumm >= stepSum && !presentInCart) {
            if (isCartOpen && !popupShownForCurrentCartSession) {
                t390_showPopup(popupId);
                popupShownForCurrentCartSession = true;
            }
        } 
        else if (!hasRequiredSectionProducts && presentInCart) {
            removePresentProducts();
        }
        else if (hasRequiredSectionProducts && productSumm < stepSum && presentInCart) {
            removePresentProducts();
        }
        
        function removePresentProducts() {
            if (!tcart || !tcart.products) return;
            
            let removedCount = 0;
            let productsToRemove = [];
            
            for (let i = tcart.products.length - 1; i >= 0; i--) {
                if (tcart.products[i] && tcart.products[i].present === true) {
                    productsToRemove.push(i);
                }
            }
            
            productsToRemove.forEach(index => {
                const productElement = document.querySelector(`.t706__product[data-cart-product-i="${index}"]`);
                
                if (productElement) {
                    const deleteButton = productElement.querySelector('.t706__product-del');
                    if (deleteButton) {
                        deleteButton.click();
                        removedCount++;
                    }
                } else {
                    if (typeof tcart__deleteProduct === 'function') {
                        tcart__deleteProduct(index);
                        removedCount++;
                    }
                }
            });
            
            if (removedCount > 0) {
                setTimeout(() => {
                    tcart__saveLocalObj();
                    
                    if (typeof tcart__updateCartHTML === 'function') {
                        tcart__updateCartHTML();
                    }
                    
                    if (tcart && tcart.products) {
                        for (let i = 0; i < tcart.products.length; i++) {
                            if (tcart.products[i] && tcart.products[i].present === true) {
                                tcart.products[i].present = false;
                            }
                        }
                        tcart__saveLocalObj();
                    }
                    
                    updateCartProducts();
                }, 300);
            } else {
                for (let i = 0; i < tcart.products.length; i++) {
                    if (tcart.products[i] && tcart.products[i].present === true) {
                        tcart.products[i].present = false;
                    }
                }
                tcart__saveLocalObj();
                updateCartProducts();
            }
            
            // Сбрасываем флаг показа popup при удалении подарка
            popupShownForCurrentCartSession = false;
        };
    }
 
})();    
</script>


<style>


.t706__product.present-product {
    box-shadow: 0 0 0 1px #f0f0f0;!;
    background-color: #fafafa;
    /*padding-top: 15px;*/
}

.t706__product.present-product .t706__product-plusminus,
.t706__product.present-product .t706__product-del-wrapper{
    visibility: hidden;
}



.t706__product {
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
}

.t706__cartwin-bottom {
    border-top: none;
    padding-top: 10px;
}

.t706__cartwin-products {
    display: flex;
    flex-direction: column;
}

.t706__product.present-product {order: 1;}

.uc-present-popup .t-popup {
    z-index: 99999999;
}


.uc-present-block .t778__container.t-container {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
    padding: 30px 25px 50px 25px;
    box-sizing: border-box;
}

#allrecords .uc-present-block .t-section__descr.t-descr {
    margin-bottom: 0;
    padding-top: 30px;
}

.uc-present-block .t778__col.t-col {
    max-width: none;
    margin: 0;
}

.uc-present-block .t-container:before, 
.uc-present-block .t-container:after
{
    display:none;
}

.uc-present-block .t778__textwrapper {
    padding: 12px 15px;
}

.uc-present-block .t778__content .t778__btn-wrapper {
    padding: 0 15px 10px;
    margin-top: 8px;
    margin-bottom: 10px;
}

.uc-present-block .t778__btn {
    padding-left: 30px;
    padding-right: 30px;
    max-width: max-content;
}

.uc-present-popup .close-popup-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    background-image: url(https://static.tildacdn.one/tild3632-3433-4032-a262-643036343634/Icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.t706__body_cartpageshowed .t706__sidebar.t706__sidebar_showed {
    visibility: hidden;
    pointer-events: none;
}

.uc-present-popup .t-store__card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 15px 15px;
    max-height: 70svh;
    overflow: auto;
}

.uc-present-popup .t-clear.t-store__grid-separator {
    display: none;
}

.uc-present-popup .js-product.t-store__card.t-col {
    max-width: none;
    margin: 0;
}

.uc-present-popup .t-section__container.t-container {
    margin-bottom: 30px;
}


.uc-present-popup .t-store.js-store {
    padding: 0 20px;
}

.uc-present-popup .t-store__card-list::-webkit-scrollbar {
  width: 3px; 

}
.uc-present-popup .t-store__card-list::-webkit-scrollbar-track {
  background: #f0f0f0; 
  border-radius: 10px;
}
.uc-present-popup .t-store__card-list::-webkit-scrollbar-thumb {
  background: #c0c0c0; 
  border-radius: 10px; 
}

.uc-present-popup .t-store__card-list::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0; 
}

#allrecords  .uc-present-popup  .js-block-header-title.t-section__title {
    margin-bottom: 10px;
}



@media screen and (max-width: 960px) {
    .uc-present-block .t778__col_mobile-grid {
        width: 100%;
        padding: 0;
    }
    
    #allrecords .js-product.t-store__card.t-col {
        width: 100%;
        padding: 0;
    }
    
    .t-store__grid-cont .t-store__card-list {
            row-gap: 15px !important;
    }
    
}

@media screen and (max-width: 680px) {
    .uc-present-block .t778__container.t-container {
        grid-template-columns: 1fr;
    }
    
    .uc-present-popup .t-store.js-store {
        padding: 0 5px;
    }
    
}

#allrecords .t-rec .t-rec:not(.uc-present-block) .js-product.t-col[data-product-part-uid*="959663397012"] {
    display: none !important;
}

</style>
Made on
Tilda