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

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

• Зарегистрирован: 15.07.2016
• Сообщений: 340
• Рейтинг: 16

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

• Откуда: Пятигорск
• Зарегистрирован: 13.11.2014
• Сообщений: 642
• Рейтинг: 62

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

• Зарегистрирован: 02.09.2016
• Сообщений: 144
• Рейтинг: 7

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

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

• Откуда: Краснодар
• Зарегистрирован: 01.09.2014
• Сообщений: 2,929
• Рейтинг: 247

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

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

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

• Зарегистрирован: 02.09.2016
• Сообщений: 144
• Рейтинг: 7

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

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

• Откуда: Краснодар
• Зарегистрирован: 01.09.2014
• Сообщений: 2,929
• Рейтинг: 247

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

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

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

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

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

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

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

+2

• Зарегистрирован: 02.09.2016
• Сообщений: 144
• Рейтинг: 7

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

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

• Откуда: Краснодар
• Зарегистрирован: 01.09.2014
• Сообщений: 2,929
• Рейтинг: 247

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

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

• Зарегистрирован: 14.01.2016
• Сообщений: 251
• Рейтинг: 22

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

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

+1

• Зарегистрирован: 02.09.2016
• Сообщений: 144
• Рейтинг: 7

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

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

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

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