В шаблоне HTML заменить
<!-- Категории каталога -->
{% IFNOT catalog_full_empty %}
<script>
var catalog_full = [];
</script>
{% FOR catalog_full %}
{% IF catalog_full.LEVEL = 0 && catalog_full.GOODS_COUNT > 0 && catalog_full.HIDE=0 %}
<div class="pdt-{catalog_full.ID} products-container index">
<script>
catalog_full.push({
'id': 'pdt-{catalog_full.ID}',
'href': '{catalog_full.URL}'
})
</script>
<div class="container">
<div class="content">
<div class="block-title _iconed">
<svg class="icon block-icon">
<use xlink:href="#flower"></use>
</svg>
<h2 class="title">{catalog_full.NAME}</h2>
<div class="navigation owl-nav"></div>
</div>
<div class="products-grid row"></div>
</div>
</div>
</div>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
на
<!-- Категории каталога -->
{% IFNOT catalog_full_empty %}
<div id="scroll-goods-container"></div>
<!-- status elements -->
<div class="container">
<div class="scroller-status">
<div class="infinite-scroll-request loader-ellips">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="infinite-scroll-error">Ошибка загрузки</p>
</div>
</div>
{% ENDIF %}
В конце шаблона HTML сразу после
<!-- Overlay -->
<div class="overlay"></div>
добавить
<!-- Скрипты ленивой подгрузки товаров на главной -->
{% IF index_page %}
<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<script>
var catalog_full = [];
{% FOR catalog_full %}
{% IF catalog_full.LEVEL = 0 && catalog_full.GOODS_COUNT > 0 && catalog_full.HIDE=0 %}
catalog_full.push({
'id': 'pdt-{catalog_full.ID}',
'href': '{catalog_full.URL}',
'name': '{catalog_full.NAME}'
})
{% ENDIF %}
{% ENDFOR %}
// Массив страниц с товарами
var nextPages = catalog_full.map(el=>{
var url = new URL(el.href);
return url.pathname + `?only_body=1&goods_view_type=1`
});
// Плагин ленивой загрузки
$('#scroll-goods-container').infiniteScroll({
path: function() {
return nextPages[ this.loadCount ];
},
append: '.products-container._ajax', // Искомый контейнер с товарами
history: false,
status: '.scroller-status'
})
.on( 'load.infiniteScroll', function( event, body, path, response ) {
// console.log('Loaded: ${ path }');
})
.on( 'append.infiniteScroll', function( event, body, path, items, response ) {
// console.log('Appended ${ items.length } items on ${ path }');
if(typeof(lozad) === "function"){
lozad().observe();
}
Addto();
});
</script>
<style>
.scroller-status{display:none;padding:20px 0}.scroller-status__message{text-align:center;color:#777}.loader-ellips{font-size:20px;position:relative;width:4em;height:1em;margin:10px auto}.loader-ellips__dot{display:block;width:1em;height:1em;border-radius:.5em;background:#555;background:#e8dbcf;position:absolute;animation-duration:.5s;animation-timing-function:ease;animation-iteration-count:infinite}.loader-ellips__dot:nth-child(1),.loader-ellips__dot:nth-child(2){left:0}.loader-ellips__dot:nth-child(3){left:1.5em}.loader-ellips__dot:nth-child(4){left:3em}@keyframes reveal{from{transform:scale(0.001)}to{transform:scale(1)}}@keyframes slide{to{transform:translateX(1.5em)}}.loader-ellips__dot:nth-child(1){animation-name:reveal}.loader-ellips__dot:nth-child(2),.loader-ellips__dot:nth-child(3){animation-name:slide}.loader-ellips__dot:nth-child(4){animation-name:reveal;animation-direction:reverse}.loader-wheel{font-size:64px;position:relative;height:1em;width:1em;padding-left:.45em;overflow:hidden;margin:0 auto;animation:loader-wheel-rotate .5s steps(12) infinite}.loader-wheel i{display:block;position:absolute;height:.3em;width:.1em;border-radius:.05em;background:#333;opacity:.8;transform:rotate(-30deg);transform-origin:center .5em}@keyframes loader-wheel-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
</style>
{% ENDIF %}
В конец шаблона Товары добавить
<!-- Товары для ленивой загрузки-->
{% IF ONLY_BODY %}
<!-- Вывод товаров -->
<div class="products-container index _ajax">
<div class="container">
<div class="block-title _iconed">
<svg class="icon block-icon">
<use xlink:href="#flower"></use>
</svg>
<h2 class="title">{CATEGORY_NAME}</h2>
<div class="navigation owl-nav"></div>
</div>
{% IF GOODS_VIEW_TYPE=1 %}
<!-- Вывод товаров ТАБЛИЦЕЙ -->
<div class="products-grid row">
{% FOR goods %}
<div class="item {% IF goods.MIN_REST_VALUE=0 %}empty{% ENDIF %} col-lg-3 col-sm-4 col-sms-6 col-smb-6">
<div class="item-inner" itemscope itemtype="https://schema.org/Product">
<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" class="product-form-{goods.MIN_PRICE_NOW_ID} goodsListForm">
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
<div class="product-image">
<div class="product-icons">
<a class="quickview product-ico" href="{goods.URL_MIN_PRICE_NOW}" title="Быстрый просмотр «{goods.NAME}»" data-tooltip="Быстрый просмотр" rel="nofollow"><i class="fal fa-search-plus"></i><span>Быстрый просмотр</span></a>
<!-- Если есть возможность добавить товар в избранное -->
{% IF goods.IS_HAS_IN_FAVORITES_LIST %}
<a class="add-wishlist added product-ico"
data-action-is-add="0"
data-action-add-url="{FAVORITES_ADD_URL}"
data-action-delete-url="{FAVORITES_DELETE_URL}"
data-action-add-title="Добавить «{goods.NAME}» в избранное"
data-action-delete-title="Убрать «{goods.NAME}» из избранного"
data-prodname="{goods.NAME}"
data-prodimage="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=flowers{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"
data-produrl="{goods.URL}"
data-id="{goods.ID}"
data-mod-id="{goods.MIN_PRICE_NOW_ID}"
data-mod-id-price="{goods.MIN_PRICE_NOW}"
data-add-tooltip="В Избранное"
data-del-tooltip="Убрать из избранного"
data-tooltip="Убрать из избранного"
title="Убрать «{goods.NAME}» из избранного"
href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}"
rel="nofollow"
><i class="material-icons"> favorite_border </i></a>
{% ELSE %}
<a class="add-wishlist product-ico"
data-action-is-add="1"
data-action-add-url="{FAVORITES_ADD_URL}"
data-action-delete-url="{FAVORITES_DELETE_URL}"
data-action-add-title="Добавить «{goods.NAME}» в избранное"
data-action-delete-title="Убрать «{goods.NAME}» из избранного"
data-prodname="{goods.NAME}"
data-prodimage="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=flowers{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"
data-produrl="{goods.URL}"
data-id="{goods.ID}"
data-mod-id="{goods.MIN_PRICE_NOW_ID}"
data-mod-id-price="{goods.MIN_PRICE_NOW}"
data-add-tooltip="В Избранное"
data-del-tooltip="Убрать из избранного"
data-tooltip="В Избранное"
title="Добавить «{goods.NAME}» в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}"
href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&return_to={CURRENT_URL | urlencode}"
rel="nofollow"
><i class="material-icons"> favorite_border </i></a>
{% ENDIF %}
<!-- /END Если есть возможность добавить товар в избранное -->
<!-- Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
{% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
{% IF goods.IS_HAS_IN_COMPARE_LIST %}
<a class="add-compare added product-ico"
data-action-is-add="0"
data-action-add-url="{COMPARE_ADD_URL}"
data-action-delete-url="{COMPARE_DELETE_URL}"
data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
data-prodname="{goods.NAME}"
data-prodimage="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=flowers{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"
data-produrl="{goods.URL}"
data-id="{goods.ID}"
data-mod-id="{goods.MIN_PRICE_NOW_ID}"
data-mod-id-price="{goods.MIN_PRICE_NOW}"
data-add-tooltip="В Сравнение"
data-del-tooltip="Убрать из сравнения"
data-tooltip="Убрать из сравнения"
title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}"
rel="nofollow"
><i class="fal fa-signal"></i></a>
{% ELSE %}
<a class="add-compare product-ico"
data-action-is-add="1"
data-action-add-url="{COMPARE_ADD_URL}"
data-action-delete-url="{COMPARE_DELETE_URL}"
data-action-add-title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
data-action-delete-title="Убрать «{goods.NAME}» из списка сравнения с другими товарами"
data-prodname="{goods.NAME}"
data-prodimage="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=flowers{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}"
data-produrl="{goods.URL}"
data-id="{goods.ID}"
data-mod-id="{goods.MIN_PRICE_NOW_ID}"
data-mod-id-price="{goods.MIN_PRICE_NOW}"
data-add-tooltip="В Сравнение"
data-del-tooltip="Убрать из сравнения"
data-tooltip="В Сравнение"
title="Добавить «{goods.NAME}» в список сравнения с другими товарами"
href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&from={goods.GOODS_FROM}&return_to={CURRENT_URL | urlencode}"
rel="nofollow"
><i class="fal fa-signal"></i></a>
{% ENDIF %}
{% ENDIF %}
<!-- /END Если в тарифном плане подключен модуль сравнения товаров и он не выключен в настройках магазина -->
</div>
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-img">
<img class="goods-image-small lozad" src="{ASSETS_IMAGES_PATH}loader.gif" data-src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=flowers{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image">
</a>
{% IF goods.IS_NEW %}
<span class="ico-new">Новинка</span>
{% ELSEIF goods.IS_TOP %}
<span class="ico-best">Хит</span>
{% ENDIF %}
{% IF goods.MAX_DISCOUNT %}
<span class="ico-sale">Акция</span>
{% ENDIF %}
</div>
<div class="product-shop">
<meta itemprop="name" content="{goods.NAME}">
<meta itemprop="description" content="{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ELSE %}Описание отсутствует{% ENDIF %}">
<div class="product-name"><a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" itemprop="url">{goods.NAME}</a></div>
<div class="ratings">
<a href="{goods.URL | url_amp}" title="Перейти к отзывам">
<div class="rating-box">
{% IF goods.OPINION_RATING_VALUE %}
<span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<meta itemprop="worstRating" content = "1">
<meta itemprop="bestRating" content = "10">
<meta itemprop="ratingValue" content = "{goods.OPINION_RATING_VALUE}">
<meta itemprop="reviewCount" content = "{goods.OPINION_RATING_CNT_ALL}">
<div class="rating" style="width:{goods.OPINION_RATING_VALUE}0%" alt="{goods.OPINION_RATING_VALUE}" title="Рейтинг товара"></div>
</span>
{% ELSE %}
<div class="rating" style="width:0%" alt="Рейтинг не определён" title="Рейтинг не определён"></div>
{% ENDIF %}
</div>
</a>
</div>
<div class="price-box" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<meta itemprop="priceCurrency" content="{CURRENCY_CHAR_CODE}"/>
{% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</span>
{% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
<span class="price old-price {CURRENCY_CHAR_CODE}">{goods.MIN_PRICE_OLD | money_format}</span>
{% ELSE %}
<span class="no-old-price"></span>
{% ENDIF %}
<span class="price {CURRENCY_CHAR_CODE}" itemprop="price" content="{goods.MIN_PRICE_NOW}">{% IF goods.COUNT_MODIFICATION > 1 %}от {% ENDIF %}{goods.MIN_PRICE_NOW | money_format}</span>
</div>
<div class="actions">
<div class="qty-wrap">
<div class="qty-set">
<a href="javascript:void(0)" class="qty-plus unselectable" title="Увеличить"><i class="fal fa-plus"></i></a>
<input type="text" name="form[goods_mod_quantity]" maxlength="4" value="1" min="1" title="Количество" class="inputText quantity" onkeypress="return keyPress(this, event);" onpaste="return false;" autocomplete="off">
<a href="javascript:void(0)" class="qty-minus unselectable" title="Уменьшить"><i class="fal fa-minus"></i></a>
</div>
</div>
<!-- Добавление товара в корзину -->
{% IF goods.MIN_REST_VALUE=0 %}
<div class="empty" title="Нет в наличии" data-tooltip="Нет в наличии"><span>Нет в наличии</span></div>
{% ELSE %}
<a class="add-cart" title="В корзину" data-tooltip="В корзину" rel="nofollow" href="{goods.URL_MIN_PRICE_NOW | url_amp}"><span>Заказать</span></a>
<a class="add-cart quick" title="Быстро оформить заказ" rel="nofollow" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}"><span>Купить в 1 клик</span></a>
{% ENDIF %}
<!-- /END Добавление товара в корзину -->
</div>
</div>
</form>
</div>
</div>
{% IF goods.last %}
<div class="show-more">
<button class="button more">Показать все</button>
</div>
{% ENDIF %}
{% ENDFOR %}
</div>
{% ENDIF %}
</div>
</div>
<!-- END Вывод товаров -->
{% ENDIF %}
Прикрепленные изображения