Выводим остаток и начальное количество товара в Tilda

Выводим остаток и начальное количество товара в Tilda

1
Создали каталог с товарами и задали им количество
2
Заполнили у товара вкладку
Весовые товары > Штука > Кол-во единиц товара (скрин ниже)
3
Добавили код в блок T123 на страницу и в продуктовый footer
Библиотека для примера

<script>
$( document ).ready(function() {

function prodCompleteLimit(){
let tistore = setInterval(function() {
    setTimeout(function(){
        if ( $('.js-store-grid-cont div').length>0 || $('.t-store__prod-snippet__container').length>0 ){
            clearInterval(tistore) 
            setTimeout(function(){
                setLimit();
           }, 200); 
        };
    }, 600);
    
}, 100);   
};
prodCompleteLimit();

function setLimit(){
    
    $('.js-product').each(function(){
        let el = $(this);
        
        let inv = +el.attr('data-product-inv');
        let max = +el.attr('data-product-portion');
        
        el.find('.limit-wrapper').remove();
        
        if(inv>0 && max>0) {
            
            let limitLine = `
                        <div class="limit-wrapper t-text">
                            <div class="limit-text">
                                <span>ОСТАЛОСЬ <span>${inv}</span> ИЗ ${max}</span>
                            </div>    
                            
                            <div class="limit-bar-wrapper">
                                <div class="limit-bar"></div>    
                            </div>    
                            
                        </div>
            `;
            
        el.find('.js-store-price-wrapper').after(limitLine);
        let percent = (inv*100)/max+'%';
        el.find('.limit-bar').css('width', percent);
   
        };

    });
    
    let resizeEvent = new Event('resize');
    window.dispatchEvent(resizeEvent);
    
};

$(document).on('click','.js-store-filter , .js-store-filter-chosen-item , .js-store-load-more-btn , .js-store-parts-switcher , .js-pagination-item',function(e){  prodCompleteLimit(); });
$(document).on('keydown','.js-store-filter',function(event){if(event.keyCode == 13) { prodCompleteLimit()}}); 
$(document).on('change','.t-store__sort-select',function(e){  prodCompleteLimit() });

//При открытии карточки товара
$(document).on('click','a[href*="/tproduct/"]',function(e){ prodCompleteLimit() });

});
</script>

<style>
.limit-text {
    color: #adadad;
    font-weight: 500;
    text-align: center;
}

.limit-wrapper {
    margin-top: 15px;
    font-size: 14px;
    margin-top: auto;
}

.limit-text span span {
    color: #000;
}

.limit-bar-wrapper {
    width: 100%;
    height: 4px;
    margin-top: 5px;
    background: #dadada;
}

.t-store__card__textwrapper {
    display: flex;
    flex-direction: column;
}

.limit-bar {
    height: inherit;
    background: #000;
}    

.t-store__prod__price-portion {
    display: none;
}

.t706__product-title__portion {
    display: none;
}

span.t706__product-portion {
    display: none !important;
}

</style>

Made on
Tilda