Бесконечный скролл с подгрузкой элементов

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



Все что нужно это подключить скрипт и написать простой action (AJAX обработчик)

Рассмотрим пример для магазина и CMS версии 5.4

1) Нужно добавить action pager в shop.action.php



public function pager() {

Custom::inc('modules/shop/shop.model.php');

$this->diafan->_route->page = filter_input(INPUT_POST,'page',FILTER_SANITIZE_NUMBER_INT);

$model = new Shop_model($this->diafan);

$model->list_(true);

$model->result();



$this->result['page_count'] = ceil($this->diafan->_paginator->nen / $this->diafan->_paginator->nastr);

$this->result['html']=$this->diafan->_tpl->get('rows','shop',$model->result);

$this->result['result']=!empty($this->result['html']);

}



Не забываем прописать action в контроллере shop.php



2) модифицировать model _list в моем случае... добавляем параметр



public function list_($ajax = false)

...

$this->result['ajax'] = $ajax;



это нужно что бы во view убирать не нужные части вывода для ajax запроса.



3) написать грамотно view.rows

В моем случае это был div.products-block > в котором вложенные div.product-item

Соответственно если есть ajax параметр не нужно выводить div.products-block только div.product-item



4) Подключить скрипт jquery.gscroll-page.js в show_js без ассинхронной загрузки (без asyncsrc)



В моем случае в дизайне есть кнопка - показать еще - которая инициализирует бесконечную прокрутку ее обработчик я поместил в shop.list.js



$(".view-more").click(function() {

$(".view-more").remove();

$(".products-block").gScrollPage({item: '.product-item', last: 8, module:'shop'});

return false;

});



И так опции gScrollPage



var defaults = {

module: 'shop', // модуль которому идет action

action: 'pager', // название action

item: '.product-item', //селектор вложенных элементов списка

page: 2, // начинать подгрузку с этой страницы

last: 8 // Указывает что скрол начинается с 8 элемента от конца

};





последний параметр last у нас самый интересный... допустим у нас на странице 12 элементов по 4 в строке...

поставим last 4 это означает что когда мы докрутим до 3 строки - начнется подгрузка следующей страницы.

Этот параметр желательно настроить так что бы пользователь мог крутить бесконечно - не видя как загружаются элементы...