Найти на сайте

Автоподгрузка записей типа контента

+22
3.49K
  2. Блоги
  3. Автоподгрузка записей типа контента
В рамках работы над одним проектом понадобилась Автоподгрузка записей типа контента при прокрутке.
Оформил разработку в виде отдельного компонента, который подключается в шаблоне списка записей типа контента.
И делюсь им.

Что это

Иллюстрация

Обычная автоподгрузка записей. Работает в двух режимах — по клику и автоматически. В месте размещения выводится кнопка, клик по которой подгрузит ниже записи со следующей страницы

Кнопка (и стили и скрипты) выводятся следующим кодом

  1. <?php
  2. if($total > $page * $perpage){
  3.     $this->renderControllerChild('zloading','button',[
  4.     ]);
  5. }
  6. ?>
Этот код надо разместить в файле списка записей (например, default_list.tpl.php или сделать копию этого файла и назвать типконтента_list.tpl.php, чтобы использовать автоподгрузку только в одном типе контента) ДО кода вывода пагинации

  1. <?php echo html_pagebar($page, $perpage, $total, $page_url, array_merge($filters, $ext_hidden_params)); ?>

Автоматическая подгрузка

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

  1. <?php
  2. if($total > $page * $perpage){
  3.     $this->renderControllerChild('zloading','button',[
  4.         'auto' => true
  5.     ]);
  6. }
  7. ?>
тогда новые записи будут подгружать автоматически при прокрутке.

Демо

Испытать в работе можно тут

Ограничения

Автор захотел сделать еще один велосипед на IntersectionObserver и сознательно не использовать сторонних библиотек автоподгрузки. Настаивать на их использовании бесполезно.
Компонент предоставляется как есть, бесплатно. Автор не несет никакой ответственности.
Компонент не пишет ничего в базу. Поэтому для удаления просто удалите файлы компонента.
Предназначен только для шаблона modern (и дочерних)

Вебмастерам

После подгрузки очередной страницы вызывается событие icms_zloading_loaded. Вы можете использовать его, чтобы переинициализировать скрипты во вновь подгруженных записях. Пример использования события есть в templates/modern/controllers/zloading/button.tpl.php

Где взять

В списке файлов моего профиля /users/1009/files.html
Последняя актуальная версия на момент написания zloading20210103_1.0.0 /users/files/download7785.html
Там же всегда будет последняя актуальная версия разработки, если обновления таки будут.

Обратите внимание! В архиве для примера находится файл templates/modern/content/news_list.tpl.php с включенным в него кодом для вывода автоподгрузки. Этот шаблон применится к типу контента news, если таковой есть. Вы можете удалить этот файл или переименовать. Или не копировать при установке.
Передвигаем свойства ниже полей в форме добавления/редактирования записи типа контента
Быстропоиск
-9
Алексей Т Алексей Т 4 года назад #
Это конечно супер что Вам заказали и Вы сделали. 97% разработок тут так и появляются. Упакуйте в готовое решение. Люди будут покупать кому надо.
Дай тут что то то бесплатно -Но рассказав как это сделать что бы заработало- это для тех кто что бы попробовать. На реальных проектах вряд ли люди будут ставить. Соберите по человечески - выставите счет например я бы купил за 600 руб.+ сделайте описание+ оформите в каталог дополнений.
+3
Zau4man Zau4man 4 года назад #
Это готовое решение. Осталось только подсказать компоненту, где его ждут, разместив в шаблоне небольшой кусок кода.

Я думал сделать виджетом, но виджет не знает про пагинацию. Можно грузить все скрипты при каждом вызове виджета, искать пагинацию, и если есть пагинация, запускать код в работу. Мне такой вариант не подходит.

Сделать решение универсальным для всех не получится. У всех разные поля, из коробки будут работать только поля без интерактива. Например, не получится так подгрузить яндекс карту, нужно будет немного танцев. И т.п.
0
Def Def 4 года назад #
Было бы отлично после прочтения записи типа контента, чтобы подгружалась следующая, как сейчас на многих контентных новостных сайтах.
Это тоже отличное дополнение!
+2
Zau4man Zau4man 4 года назад #
чтобы подгружалась следующая
нельзя сделать универсальное решение. Ну или я не могу сделать это. Скрипты, подгруженные ajaxом, должны быть адаптированы к тому, чтобы сработать на вновь показанных записях и др.

Сделать под конкретный сайт и набор полей в принципе можно.
+1
Василич Василич 4 года назад #
У вас есть на это время? Сделать для актуального шаблона, для обычного типа контента(например новости), грузить после комментов и пары виджетов и в конце написать маленькую инструкцию, чтоб можно было переделывать под свои нужды.
Если есть время, сколько будет стоить данная разработка?
Спасибо.
+2
Zau4man Zau4man 4 года назад #
Я посмотрю, как будет время.
Интересно, удастся ли "завести" комментарии у подгруженных записей.
+1
Zau4man Zau4man 4 года назад #
Комментарии "завести" не удалось. Там совпадают идентификаторы, надо править шаблоны.
Пока получилось так

Gifка на 2.5мб, ахтунг
Завтра постараюсь сделать живое демо.
T34 T34 4 года назад #
Комментарий удален
-2
DeDja DeDja 4 года назад #
Изложенное Вами весьма приемлемо и не ново.

Смотреть:
/forum/thread18939-1.html
/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html

Небольшая демка с модулем от Val на моём стареньком демо сайте - http://xyz-nk.ru/activity
T34 T34 4 года назад #
Комментарий удален
0
livecom livecom 4 года назад #
И было бы здорово, если что-то подобное сделать для контента в записях. Например, при достижении определенного количества знаков, появляется кнопка "Читать дальше".
+4
Scythian Scythian 4 года назад #
Zau4man, спасибо большое за безвозмездно предоставленное полезное дополнение! v
+1
Сергей Сергей 4 года назад #
Поддержу Scythian. Тоже, спасибо большое Zau4man
0
F_a_R_i_D F_a_R_i_D 4 года назад #
Нужная вещь, спасибо!
Но без пагинации было бы лучше.
+2
Zau4man Zau4man 4 года назад #
Вы можете скрыть ее стилями.
Без пагинации не получится узнать ссылку на следующую страницу.
0
kolecha kolecha 3 года назад #
Подскажите, чем заменить $this->addBottom(ob_get_clean()) для старой версии движка?
+1
Zau4man Zau4man 3 года назад #
Удалите эту строку и строку "ob_start()" в начале блока <script>
Без них скрипт вставится в месте вывода - должно работать.
0
kolecha kolecha 3 года назад #
Согласен, не догодался.
Не грузится:
Uncaught TypeError: icms.menu.initSwipe is not a function

Но работало, когда загружалась часть страницы(до "Показать еще") с ошибкой из-за $this->addBottom(ob_get_clean()).
+2
Zau4man Zau4man 3 года назад #
Найдите и удалите этот код

Код JS:
  1.  
  2. icms.events.on('icms_zloading_loaded', function () {

  3.         icms.menu.initSwipe($('.info_bar').not('.slick-initialized'), {variableWidth: true});

  4.     });

  5.
в файле templates/шаблон/controllers/zloading/button.tpl.php
0
kolecha kolecha 3 года назад #
подправил для себя, код работает...
но проверил что DATA возвращается только заголовок с наборами без списка. поэтому и фильтровать нечего
0
kolecha kolecha 3 года назад #
Проблема при выводе нескольких наборов, с одни работает. С несколькими выводит только заголовок и сами наборы.

<h1>Заголовок</h1>
<div class="content_datasets">
<ul class="pills-menu">
<li></li>
...
<li></li>
</ul>
</div>
0
Def Def 3 года назад #
а в связях тоже работает эта опия? заметил, что многие забывают о связях и не адаптируют под них, в связи с чем там просто показывается бывает кнопка для загрузки, но не загружает новые записи.
+1
Zau4man Zau4man 3 года назад #
Не проверял, связями не пользуюсь.
Предположу, что в связях в виде вкладки работать будет, а в виде списка - нет.
0
Def Def 3 года назад #
жалько, связи очень полезный инструмент когда им правильно пользуешься.
0
noname noname 3 года назад #

После установки файла в настройках Типа контента пропадает выбор «Стиль списка по умолчанию», 2.14.2 ... 

+1
Loadырь Loadырь 3 года назад #

Всё верно. Ведь вы же назвали файл ваштипконтента_list.tpl.php, а не default_list_ваштипконтента.tpl.php. Когда есть файл ваштипконтента_list.tpl.php, всегда будет работать только он, поэтому сам факт выбора стиля не нужен.

0
noname noname 3 года назад #

Удалил с пакета news_list.tpl.php, в default_list_tiles.tpl.php (плитка) в 121 строку прописал код «Автоматическая подгрузка», работает. Всем спасибо !
 

0
noname noname 3 года назад #

Добрый. Если добавить прокрутку для default_list_tiles.tpl, то pagebar уезжает на футер 

0
Def Def 3 года назад #

А в связях работает корректно? Если выведено 20 записей через связи, то они работать будут корректно?

+1
Zau4man Zau4man 3 года назад #

Не знаю. Не люблю связи, не пользуюсь ими.

0
Happy Happy 3 года назад #

на 2.15.1  модерн работает не корректно. один раз подгружает и дальше не хочет.

на дочерних шаблонах вообще автоподгрузка не работает а ручная подгрузка кнопка не исчезает даже если дальше нет контента

+1
Zau4man Zau4man 3 года назад #

2.15.1 demo.bergorod.ru/news

Только что еще раз проделал описанное в записи. Все работает… Смотрите ошибки в консоли браузера.

0
Александр Сергеевич Александр Сергеевич 2 года назад #

А как-то влияет это на поисковика? Поисковик попадёт к записям не первой страницы?

+1
Zau4man Zau4man 2 года назад #

Попадет.

Ссылки в блоке списка страниц никуда не деваются.

+1
Capitan Capitan 2 года назад #

Все работает! Все Ок!

Еще от автора

Шаблон вывода категорий

Шаблон вывода категорий

Делюсь небольшим компонентом, который выводит на списком записей список категорий со своим шаблоном.
20
Виджет "Меню добавить"

Виджет "Меню добавить"

Небольшой виджет, предназначенный исключительно для вывода меню добавления контента.
11
ZПоиск. Другой взгляд на поиск

ZПоиск. Другой взгляд на поиск

В рамках более глубокого знакомства с Vue в частности с появившимся недавно Composition Api сделал на Vue небольшой компонент, который по функционалу
49

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.