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

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

+22
3.42K
  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 2 года назад #

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

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

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

2.15.1 demo.bergorod.ru/news

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

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

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

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

Попадет.

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

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

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

Еще от автора

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

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

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

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

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

Конструктор блоков Zbuilder v 1.0.2

Небольшое обновление конструктора блоков: копирование элементов/блоков, доработка элемента Картинка.
5

InstantCMS Team

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

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

О проекте

Поддержка

Дополнения

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