Подгрузка дополнительного контента при прокрутке

Общая логика подгрзуки контента при скролле такова (предполагается использование jQuery):

1. Меняете шаблон пейджинга. Вместо вывода постраничной навигации выводите, допустим, скрытое поле, значение которого - количество страниц.
2. При помощи js вешаете обработчик на скролл окна. Оперируя размером видимой области экрана, текущей высотой контейнера, в котором находятся товары и текущим положением скролла, каждый раз проверяете, был ли достигнут низ контейнера (лучше еще добавить отступ).
3. Как только проверка возвращает истину, вызываете метод, подгружающий контент. В этом методе делаете аякс-запрос либо на текущую страницу, обрезая лишний контент через очистку буфера (сложный метод и часто глючный, не советую), либо кладете где-нибудь в специальной папке php-файл, в котором вызываете компонент, выводящий текущий список товаров. Передаете в качестве get-параметра сначала страницу 2, потом 3 и т.д, пока не достигните максимальной страницы. Текущую страницу запоминаете в переменную. Максимальная страница - это та, что хранится в скрытом поле, сделанном в 1-м пункте.
4. [опционально] В шаблоне компонента отсекаете все обрамляющие теги для списка товаров (если есть), проверяя, идет ли сейчас аякс-запрос.
5. В случае успешного ответа от сервера методом .append() добавляете этот ответ в контейнер, где выводится список товаров.
   

В любом случае, потребуется умение кастомизировать шаблоны компонентов и писать js. Если будут вопросы, можете написать в личку.

Назад в раздел