Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Показ оставшихся товаров в каталоге

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить отображение количества оставшегося товара в каталоге товаров.
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Добавьте уникальность в Ваш проект
Обратите внимание, что данный эффект будет работать как на десктоп версии сайта, так и на мобильной версии сайта без модификации текущего кода. Внутри кода также стоят заметки для Вашего удобства.
Как это выглядит?
Как это добавить?
Первый шаг
Создаем любой блок из вкладки "Магазин". Заполняем товары через вкладку "Товары".
Второй шаг
Указываем количество оставшегося товара в колонке "Кол-во".
Третий шаг
Заходим в настройки товара, листаем в самый низ и открываем раздел "Весовые товары". Задаем единицу измерения и указываем количество единиц товара.
Четвертый шаг
Создаем блок T123 и помещаем код на страницу с каталогом. Внутри кода есть комментарии, ориентируйтесь на комментарии. У полоски можно поменять цвет и задний фон.

<!--Взято с сайта https://digistudio.su/vyvod-kolichestva-tovarov-->

<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: #000; /* Меняем цвет задника полоски*/
}

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

.limit-bar {
    height: inherit;
    background: #6aa353; /*Меняем цвет полоски*/
}    

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

.t706__product-title__portion {
    display: none;
}

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

</style>
Как Вам модификация?
Made on
Tilda