1 Отредактировано Олег (02.09.2016 23:24:11)

Тема: Сделайте, пожалуйста, Lazy loading

Подскажите, планируется ли сделать подгрузку каталога товаров с помощью Lazy loading, то есть, когда каталог товаров размещается на одной странице, а при перемотке вниз автоматически подгружается контент из следующей страницы. Делается, видимо, это с помощью AJAX и используется на множестве современных сайтов, начиная от facebook и vk и заканчивая магазинами на shop-script. User Experience от этого сильно вырос бы, а  нагрузка на сервер снизилась.

Повысить оценку Понизить оценку

Re: Сделайте, пожалуйста, Lazy loading

Поддерживаю, нужная штука

Повысить оценку Понизить оценку

Re: Сделайте, пожалуйста, Lazy loading

Мне нравится реализация яндекс.маркет. Когда и постраничная навигация сохранена и есть подгрузка.
Реализация ДНС без постраничной очень неудобна.

4

Re: Сделайте, пожалуйста, Lazy loading

Ярослав пишет:

Мне нравится реализация яндекс.маркет. Когда и постраничная навигация сохранена и есть подгрузка.
Реализация ДНС без постраничной очень неудобна.

Возможно, для многостраничных списков это действительно удобно.
Если товаров 3-5 страниц - разницы нет, но, пожалуй, на длинных списках можно замучаться мотать.
Хотя, некоторые товарищи говорят, что покупатели редко дальше пятой страницы заходят

Повысить оценку Понизить оценку

5 Отредактировано Закусило Александр (05.09.2016 12:09:27)

Re: Сделайте, пожалуйста, Lazy loading

Олег пишет:

Подскажите, планируется ли сделать подгрузку каталога товаров с помощью Lazy loading, то есть, когда каталог товаров размещается на одной странице, а при перемотке вниз автоматически подгружается контент из следующей страницы. Делается, видимо, это с помощью AJAX и используется на множестве современных сайтов, начиная от facebook и vk и заканчивая магазинами на shop-script. User Experience от этого сильно вырос бы, а  нагрузка на сервер снизилась.

Пока не планируется. Но это легко сделать у нас. Есть плагин ajaxPagination, который можно внедрить, например как здесь http://instrument-krasnodar.ru/catalog/ … nstrument/

Сам плагин лежит в теме по умолчанию /templates/.default/resourse/js/jquery.ajaxpagination.js
Если нужно могу технически подсказать как сделать. Там ничего сложного.

6

Re: Сделайте, пожалуйста, Lazy loading

Закусило Александр пишет:

Если нужно могу технически подсказать как сделать. Там ничего сложного.

Если ничего сложного, то подскажите, думаю, многим интересно и полезно будет.
Только, если можно, с упором на тех, кто в вашей системе не совсем еще разбирается.
Ведь то, что для вас "просто", то для некоторых - просто лес дремучий.
Заранее благодарен.

Повысить оценку Понизить оценку

7 Отредактировано Закусило Александр (05.09.2016 16:20:01)

Re: Сделайте, пожалуйста, Lazy loading

Ну во первых в layout.tpl Вашей темы нужно добавить скрипт jquery.ajaxpagination.js

{addjs file="jquery.ajaxpagination.js"}

Потом убедиться что у Вас есть js файл в папке /templates/Ваша тема/resourse/js/jquery.ajaxpagination.js
Если нет, то переносим из /templates/.default/resourse/js/jquery.ajaxpagination.js

Теперь дело за инициализацией в шаблоне. Открываем list_products.tpl в Вашей теме.
Убираем строку с пагинацией.

{include file="%THEME%/paginator.tpl"}

Вместо неё создаёт кнопку "Показать ещё" с настройками:

{if $paginator->total_pages > $paginator->page}
        <div class="wrapper-space"></div>
        <div data-pagination-options='{ "appendElement":".products-list" , "clickOnScroll":true }' href="{$router->getUrl('catalog-front-listproducts', ['query'=>$query, 'category'=>$category.alias,'p' => $paginator->page+1])}" data-href="{$router->getUrl('catalog-front-listproducts', ['query'=>$query, 'category'=>$category.alias,'p' => $paginator->page+1])}" class="more onemoreEmpty margin-top ajaxPaginator">
            <div class="icon"></div>
            еще
        </div>
    {/if}

Ключевым здесь является класс ajaxPaginator. Т.к. именно по нему отрабатывает пагин.
У самой кнопки есть настройки 

 "appendElement":".products-list" , "clickOnScroll":true

где appendElement - это класс который будет заменять внутреннее содержимое подгруженной страницы. Т.к. возвращается вся страница, а заменена будет только 1 часть.  Например

<div class="products-list">
//Здесь элементы каталога товаров.

</div>
//А здесь пагинация кнопкой

clickOnScroll - использовать автопрокрутку или нет (true/false).

8

Re: Сделайте, пожалуйста, Lazy loading

Спасибо, буду пробовать.
Единственное, я не понял, в вашем случае пагинация активируется кнопкой "Показать еще" или же прокруткой содержимого вниз?

Или clickOnScroll именно за это и отвечает?

Повысить оценку Понизить оценку

Re: Сделайте, пожалуйста, Lazy loading

Спасибо, буду пробовать.
Единственное, я не понял, в вашем случае пагинация активируется кнопкой "Показать еще" или же прокруткой содержимого вниз?
Или clickOnScroll именно за это и отвечает?

Кнопка есть всегда, но благодаря clickOnScroll, её нажатие происходит автоматически при прокрутке вниз. Кнопка нужна. Т.к. если не будет интернета. Ничего не подгрузить, но кнопка останется.

10

Re: Сделайте, пожалуйста, Lazy loading

Закусило Александр пишет:

Теперь дело за инициализацией в шаблоне. Открываем list_products.tpl в Вашей теме.

<div class="products-list">
//Здесь элементы каталога товаров.

</div>
//А здесь пагинация кнопкой

Для новой версии тем изменения нужно вносить в list_products_items.tpl

приписываем класс

<ul class="products products-list">

и тут

<table class="productTable products-list">

Повысить оценку +1 Понизить оценку

11 Отредактировано Олег (02.02.2017 04:56:57)

Re: Сделайте, пожалуйста, Lazy loading

наконец-то смог проверить ajax-пагинацию,
вроде пагинация заработала по предложенному способу... только почему-то при открытии страницы с каталогом сразу очень много позиций подгружается (по ощущениям, сразу по сотне или даже больше), при прокрутке они еще подгружаются (хотя, это может мне кажется, потому что на других сайтах момент подгрузки виден, когда листаешь страницу и подходишь к ее нижней части, а тут подгружаться начинают сразу после открытия (это видно по скролл-бару браузера - он начинает как сумасшедший двигаться). может это связано с тем, что кнопка "еще" находится вверху страницы, а не внизу ??

также при включенном фильтре (напр., при отображении по определенному бренду) lazy loading перестает работать, то есть доходишь до низа страницы и все останавливается (хотя позиций больше, чем на одну страницу)

при сбросе фильтра, ajax также перестает работать. работать начинает только после перезагрузки страницы (и так по кругу)

Закусило Александр пишет:

Есть плагин ajaxPagination, который можно внедрить, например как здесь http://instrument-krasnodar.ru/catalog/ … nstrument/

на выше приведенном сайте все работает, как надо, и подгружаться начинает при приближении к нижней части экрана, и при включенных фильтрах все скроллится тоже как надо...

Повысить оценку Понизить оценку

12 Отредактировано Закусило Александр (02.02.2017 11:51:19)

Re: Сделайте, пожалуйста, Lazy loading

При включённом фильтре надо заново цеплять lazy load, т.к. там элементы заменяются на новые, на которые ещё ничего не подвешено в Вашем случае. Вешаться можно на событие 'new-content', оно срабатывает когда фильтр обновляет содержимое.

//Инициализируем обновляемые зоны
$(window).bind('new-content', function(e) {
    //Нужный мне навешиваемый код на элементы.
});

13

Re: Сделайте, пожалуйста, Lazy loading

Александр, а можно подробнее. Столкнулся с такой же проблемой, что если включен фильтр. То подгрузка не работает.

//Инициализируем обновляемые зоны
$(window).bind('new-content', function(e) {
    //Нужный мне навешиваемый код на элементы.
});

Не совсем понял вот по этому коду.

Повысить оценку Понизить оценку

Re: Сделайте, пожалуйста, Lazy loading

Речь идёт о том, что кнопка на которую навешено событие подгрузки, теряет событие, т.к. контент заменятся  полностью и собтие прокрутки не навешивается. Т.е. нужно заново навести на кнопку инициализация плагина jquery.ajaxpagination.js

Re: Сделайте, пожалуйста, Lazy loading

Так в итоге как решение выглядит если с фильтром подружить?

Повысить оценку Понизить оценку

16 Отредактировано Закусило Александр (16.08.2018 19:18:45)

Re: Сделайте, пожалуйста, Lazy loading

Плагин всё сам разрулит. Нужно просто в список товаров его вставить.

17

Re: Сделайте, пожалуйста, Lazy loading

Здравствуйте, подскажите как реализовать подгрузку фильтра при lazyload, сейчас все работает, но при смене фильтра подгрузка сбивается

код такой:

<div data-url="{$router->getUrl('catalog-front-listproducts', ['category'=>$category.alias, 'p' => $paginator->page+1])}" class="paginator_showMoreRow rs-ajax-paginator link">Показать ещё</div>

Повысить оценку Понизить оценку