Перейти к содержимому


Ленивая Загрузка Товаров На Главной Из Категорий

Автор Mr.Nito, 12 мая 2021 14:09

  • Авторизуйтесь для ответа в теме
В этой теме нет ответов

#1 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 12 Май 2021 - 14:09

В шаблоне 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="Быстрый просмотр &laquo;{goods.NAME}&raquo;" 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="Добавить &laquo;{goods.NAME}&raquo; в избранное"
						 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
						 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="Убрать &laquo;{goods.NAME}&raquo; из избранного"
						 href="{FAVORITES_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;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="Добавить &laquo;{goods.NAME}&raquo; в избранное"
						 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из избранного"
						 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="Добавить &laquo;{goods.NAME}&raquo; в избранное" href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;return_to={CURRENT_URL | urlencode}"
						 href="{FAVORITES_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;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="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
						 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
						 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="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
						 href="{COMPARE_DELETE_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;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="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
						 data-action-delete-title="Убрать &laquo;{goods.NAME}&raquo; из списка сравнения с другими товарами"
						 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="Добавить &laquo;{goods.NAME}&raquo; в список сравнения с другими товарами"
						 href="{COMPARE_ADD_URL}?id={goods.MIN_PRICE_NOW_ID}&amp;from={goods.GOODS_FROM}&amp;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}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;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 %}

Прикрепленные изображения

  • Screenshot_6.jpg

Обратно в Главная


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Цветочный
  5. → Главная
  6. Privacy Policy