Ajax пагинация «Показать еще»

11 марта 2016 г.

Интересует вопрос кто ни будь делал такую пагинацию?
Например как на этих сайтах:
https://www.ulmart.ru/catalog/brand_computers?sort=4&viewType=0&rec=true
http://rozetka.com.ua/notebook_batteries/c192669/

Соответственно без перезагрузки страницы просто добавляем товары ниже по нажатию кнопки или ссылки «Показать еще»
Буду рад к любым идеям, спасибо.

E-mail: info@syrbek.ru / телега: @syrbek /skype: activexm / syrbek.ru / Поддержка сайтов / г. Москва [HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, Git, SVN, Redmine]

14 марта 2016 г.

Re: Ajax пагинация «Показать еще»

Делал для ИС

skype: mcross82

14 марта 2016 г.

Re: Ajax пагинация «Показать еще»

Mcross писал(а):

Делал для ИС

Понятно, а можно дать ссылку в ЛС?

15 марта 2016 г.

Re: Ajax пагинация «Показать еще»

Seri,
Распишу тут.

Список файлов, которые мы создадим или изменим:

Файл, который будет отвечать за ajax-запрос /templates/template1/hostcms.js

Файл ТДС "Настройки страницы" /hostcmsfiles/lib/lib_XX/lib_XX.php

Файл ТДС "Код страницы" /hostcmsfiles/lib/lib_XX/lib_config_XX.php

Файл xsl, с шаблоном "СписокЭлеменетовИнфосистемы" /hostcmsfiles/xsl/XXX.xsl

Начнем с файла hostcms.js
Добавим функцию загрузки сообщений

      addNextPosts: function(path, items, group_id) {
         $.clientRequest({path: path + '?next=' + items + '&offset=' + $('.articles').data('offset') + '&group_id='+ group_id, 'callBack': $.addNextPostsCallback, context: $('.articles')});
         return false;
      },
      addNextPostsCallback: function(data, status, jqXHR)
      {
         $('.articles').data('offset', $('.articles').data('offset') + 5)
         $.loadingScreen('hide');
         jQuery(this).append(data.data);
      }

Функция addNextPosts вызывается нажатием ссылки и формирует переход по адресу, например, http://demo/news/?next=5&offset=5&group_id=0
Параметр next - число элементов для добавления. Параметр offset - смещение от первого элемента инфосистемы. Параметр group_id - id группы ИС в которой находимся.
Функция addNextPosts вызывает обратную функцию addNextPostsCallback, которая добавляет порцию элементов инфосистемы в список.

Стоит обратить внимание значение offset должно соответствовать значению указанному в настройках узла ИС кол-во элементов на странице.

Далее подготавливаем ТДС.

В настройках ТДС ищем строку со следующим содержанием:

$Informationsystem_Controller_Show = new Informationsystem_Controller_Show($oInformationsystem);
Обычно это 5-я строка. После нее добавляем следующие строки кода

if (Core_Array::getRequest('next'))
{
$limit = intval(Core_Array::getRequest('next'));
$offset= intval(Core_Array::getRequest('offset'));
$group= intval(Core_Array::getRequest('group_id'));


ob_start();

$Informationsystem_Controller_Show->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ajax')->value(1)

    );
if($group > 0){
$Informationsystem_Controller_Show
   ->xsl(
      Core_Entity::factory('Xsl')->getById(3)
   )
   ->offset($offset)
   ->limit($limit)
     ->group($group)
   ->show();
}else{
  $Informationsystem_Controller_Show
      ->xsl(
          Core_Entity::factory('Xsl')->getById(3)
      )
      ->offset($offset)
      ->limit($limit)
      ->show();
}
$var = ob_get_clean();

if ( $Informationsystem_Controller_Show->total <= $offset + $limit)
$last = true;
else
$last = false;

echo json_encode(array('last' =>$last, 'data' => $var));
exit();
}

А в коде страницы ищем строку 9. И добавляем в код:

$Informationsystem_Controller_Show->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ОтображатьСсылкуНаАрхив')->value(0)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ОтображатьСсылкиНаСледующиеСтраницы')->value(1)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ТекущаяГруппа')->value($Informationsystem_Controller_Show->group)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('show_comments')->value(
         intval(Core_Array::get(Core_Page::instance()->libParams, 'showComments', 1))
      )
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('show_add_comments')->value(
         intval(Core_Array::get(Core_Page::instance()->libParams, 'showAddComment', 2))
      )
);

следующие строки после $Informationsystem_Controller_Show

->addEntity(
Core::factory('Core_Xml_Entity')
->name('ajax')->value(0)
)

в результате получим:

$Informationsystem_Controller_Show->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ajax')->value(0)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ОтображатьСсылкуНаАрхив')->value(0)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ОтображатьСсылкиНаСледующиеСтраницы')->value(1)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('ТекущаяГруппа')->value($Informationsystem_Controller_Show->group)
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('show_comments')->value(
         intval(Core_Array::get(Core_Page::instance()->libParams, 'showComments', 1))
      )
)->addEntity(
   Core::factory('Core_Xml_Entity')
      ->name('show_add_comments')->value(
         intval(Core_Array::get(Core_Page::instance()->libParams, 'showAddComment', 2))
      )
);

Эти строки позволили добавить в наш xml элемент ajax со значением "0"

Теперь внесем изменения в xsl-шаблон

<xsl:template match="/informationsystem">

   
   <xsl:variable name="group" select="group"/>

   
   <xsl:if test="ajax = 0">
      <xsl:if test="group = 0">

         

      </xsl:if>

      
      <xsl:if test="group != 0">

         

      </xsl:if>

      
      <xsl:if test="count(tag) = 1">

         

      </xsl:if>

      
      <xsl:if test="count(tag) = 0 and count(.//informationsystem_group[parent_id=$group]) > 0">

         

      </xsl:if>

      
      <div class="articles" data-offset="{limit}">
         <xsl:apply-templates select="informationsystem_item[active=1]"/>
      </div>
         <xsl:choose>
            <xsl:when test="$group = 0">
               <xsl:if test="total > limit">
               <p class="more_posts bg-success"><a href="" onclick="return $.addNextPosts('{url}', {limit}, {$group})">+ больше постов</a></p>
               </xsl:if>
            </xsl:when>
            <xsl:otherwise>
               <xsl:if test="total > limit">
               <p class="more_posts bg-success"><a href="" onclick="return $.addNextPosts('{//informationsystem_group[@id=$group]/url}', {limit}, '{$group}')">+ больше постов</a></p>
               </xsl:if>
            </xsl:otherwise>
         </xsl:choose>
      <xsl:if test="count(informationsystem_group_properties) and group != 0">

         

      </xsl:if>

      <div style="clear: both"></div>

      <xsl:if test="ОтображатьСсылкуНаАрхив=1">

         

      </xsl:if>
   </xsl:if>
   <xsl:if test="ajax = 1">
      <xsl:apply-templates select="informationsystem_item[active=1]"/>
   </xsl:if>
</xsl:template>

Я сознательно удалил часть текста из xsl-шаблона, чтобы он не мешал увидеть суть изменений. Внутри шаблона "/informationsystem" я сделал 2 условия, которые проверяют элемент "ajax" xml-файла и в зависимости от его значения формируют содержание.
В условии xsl:if test="ajax = 0" строка вызова шаблона показа элемента инфосистемы xsl:apply-templates select="informationsystem_item[active=1]" заключена обернута в div class="articles" data-offset="{limit}". Это контейнер для элементов инфосистемы, в конец которого обратная функция записывает очередную порцию элементов.

skype: mcross82

16 марта 2016 г.

Re: Ajax пагинация «Показать еще»

Спасибо за идею и поддержку Mcross! Все получилось и работает.

16 марта 2016 г.

Re: Ajax пагинация «Показать еще»

Пожалуйста!

skype: mcross82

6 августа 2016 г.

Re: Ajax пагинация «Показать еще»

Mcross, все получилось, кроме кнопки Показать еще - она до бесконечности показывается
элементы уже закончились, а она все есть
и открывает пустые дивы потом
что делаю не так?

Email: golden-puma@yandex.ru; Telegram: @GoldenPuma; Сайт: https://goldenpuma.ru

7 августа 2016 г.

Re: Ajax пагинация «Показать еще»

Puma писал(а):

что делаю не так?

Сделайте проверку в JS переменную JSON last которую получаете

if ( $Informationsystem_Controller_Show->total <= $offset + $limit)
$last = true;
else
$last = false;
echo json_encode(array('last' =>$last, 'data' => $var));
exit();

Если last = true то скрываем кнопку «Показать еще»

7 августа 2016 г.

Re: Ajax пагинация «Показать еще»

я не дружу с js
напишите плиз полностью как сделать проверку

Email: golden-puma@yandex.ru; Telegram: @GoldenPuma; Сайт: https://goldenpuma.ru

7 августа 2016 г.

Re: Ajax пагинация «Показать еще»

Puma писал(а):

я не дружу с js

Так ведь написано же сверху, просто подправьте так:

Авторизация