<!-- Категории каталога --> {% 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 %}