Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как показать остаток товара на складе в Tilda

Как показать остаток товара на складе в Tilda

1
Создали блок ST305N и подключили к нему каталог
2
Добавили стиль в Настройки сайта - Ещё - Пользовательский CSS
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {

//Фразы для состояния остатков
const inStock = 'В наличии:';
const outOfStock = 'Нет в наличии';
const infinitely = 'Очень много';

let snippetSearchRepeat = 0;
let tistore = setInterval(function() {
        const productListNum = document.querySelector('.t-store__product-snippet');
        if(productListNum) {
            if(productListNum.hasAttribute("data-product-url")){
                clearInterval(tistore);
                showQuantInStore();
            };
        };
        snippetSearchRepeat++;
        if(snippetSearchRepeat>50) clearInterval(tistore);
}, 100);   


const gridCont = document.querySelectorAll(".js-store-grid-cont");
gridCont.forEach(function (el, index) {
    el.addEventListener('tStoreRendered',function(e) {
        showQuantInStore();
    });    
});



function showQuantInStore(){
    setTimeout(function(){
    
        const gridRelevantCont = document.querySelectorAll(".t-store__relevants-grid-cont");
        gridRelevantCont.forEach(function (el, index) {
            el.addEventListener('tStoreRendered',function(e) {
                showQuantInStore();
            });    
        });
        
        
        const productWithLid = document.querySelectorAll(".js-product[data-product-lid]");
        productWithLid.forEach(function (el, index) {
            const quant = el.getAttribute('data-product-inv');
            
            let text = `${inStock} ${quant} шт.`;
            
            if(quant==0)  text = outOfStock;
            if(quant=='') text = infinitely;
            
            const selectors = ['.t-store__card__imgwrapper','.t-slds__main','.t-store__prod-popup__gallery-column'];
            
            for (let key in selectors) {
    	        const pointPlace = el.querySelector(selectors[key]);
                if(pointPlace) {
                    pointPlace.setAttribute('data-product-inv-sec', text);
                    pointPlace.classList.add('t-text');
                };
            };
        });
        
    }, 300); 
       
};

//При открытии карточки товара
document.addEventListener('click', function(event) { 
    if(event.target.closest('a[href*="/tproduct/"]')) showQuantInStore();
});

//При изменении опций
document.addEventListener('change', function(event) { 
    if(event.target.closest('.js-product-controls-wrapper')) showQuantInStore();
});

});
</script>


<style>
.js-product .t-slds__main, 
.js-product .t-store__card__imgwrapper 
{
    position: relative;
}

.js-product .t-slds__main:after,
.js-product .t-store__card__imgwrapper:after,
.js-product .t-store__prod-popup__gallery-column:after

{
    content: attr(data-product-inv-sec);
    color: #000; /*цвет текста*/
    padding: 6px 14px; /*отступы у текста*/
    background-color: #fff; /*цвет фона*/
    box-shadow: 0 0 0px 1px #cdcdcd;/*тень*/
    font-size: 12px; /*размер текста*/
    border-radius: 30px; /*скругление*/
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-weight: 600;
    z-index:99;
    
}
.js-product .t-store__prod-popup__gallery-column:after {
    top: 20px;
    height: max-content;
}
</style>

Made on
Tilda