Модуль автоподгрузки страниц для InstantCMS 2.x [Deprecated] 2.X

6150
Приветствую всех, уважаемое сообщество InstantCMS!

Относительно недавно в Лунном блоге lokanaft выложил обновление своего плагина "Автоподгрузка", который, при просмотре пользователем сайта, автоматически подгружает страницы с помощью технологии ajax. Подробнее о плагине можно почитать здесь.

Я решил сделать похожую штуку, но для второй ветке Инстанта.
Назвать полноценным компонентом или виджетом, в формулировке InstantCMS 2, мое решение нельзя, т.к. нет интеграции с системой которая выдает готовый ответ для аякса, например в формате JSON. Да и сам Instant толком не знает, что у него работает какой-то компонент, но в принципе это поправимо.

И так...

Модуль автоподгрузки страниц для InstantCMS 2.x [Deprecated]

Плагин представляет собой javascript модуль, который подключаясь к странице, по мере ее прокрутки, посылает запрос серверу и подгружает необходимые данные. Как я писал выше, сервер не знает, что данные должны быть определенным образом оформлены и поэтому посылает их обычным html. Далее модуль разбирает полученную html-страницу и выводит ее на экран.

Кроме ajax, также использовалось HTML5 History API, чтобы при подгрузке страничек корректно отображать правильный адрес в адресной строке браузера. Зачем это надо можно почитать корявенький перевод здесь. А тут, при необходимости, скачать последнюю версию скрипта, который позволяет легко работать с History API в разных браузерах, в том числе и старых HTML4.

Установка модуля достаточно проста. Для начала скачиваем архив со скриптами.
В архиве 3 файла:
- pageautoload.js - сам модуль с незамысловатым названием
- pageautoload.min.js - сжатая версия модуля
- jquery.history.js - скрипт для работы с History API
Кладем один из вариантов js-модуля pageautoload и файл jquery.history.js в папку со скриптами, по умолчанию она находится тут:
Код PHP:
  1. ..\templates\default\js\
И самое тяжелое - подключаем модуль в необходимых местах шаблона, там, где мы хотим, чтобы страницы, при пагинации, загружались автоматически через ajax. Для этого в файлах:
Код PHP:
  1. ..\templates\default\content\albums_list.tpl.php
  2. ..\templates\default\content\default_list.tpl.php
  3. ..\templates\default\content\default_list_featured.tpl.php
  4. ..\templates\default\content\default_list_table.tpl.php
  5. ..\templates\default\content\default_list_tiles.tpl.php
  6. ..\templates\default\controllers\activity\list.tpl.php
  7. ..\templates\default\controllers\comments\list_index.tpl.php
  8. ..\templates\default\controllers\groups\list.tpl.php
  9. ..\templates\default\controllers\photos\album.tpl.php
  10. ..\templates\default\controllers\search\index.tpl.php
  11. ..\templates\default\controllers\users\list.tpl.php
  12. ..\templates\default\controllers\users\profile_karma.tpl.php
  13. ..\templates\default\controllers\wall\list.tpl.php
в самом начале прописываем строки:
Код PHP:
  1. <?php $this->addJS("templates/{$this->name}/js/jquery.history.js"); ?>
  2. <?php $this->addJS("templates/{$this->name}/js/pageautoload.min.js"); ?>
(в данном случае, я использую сжатую версию pageautoload)

Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!

Немного о настройках...

Все, или почти все, изменяемые параметры скрипта вынесены в его начало, в разделе options. Рядом проставлены комментарии с описанием каждого параметра. Единственное на что хотел бы обратить внимание это раздел CONTAINERS, в котором перечислены классы и id блоков куда выводятся подгружаемые ajax данные. Например, структура ленты активности в стандартном шаблоне следующая:
Код HTML:
  1. <...>
  2. <article>
  3. <div id="breadcrumbs">...</div>
  4. <h1>Лента активности</h1>
  5. <div class="content_datasets">...</div>
  6. <div class="activity-list striped-list list-32">...</div>
  7. <div class="pagebar">...</div>
  8. </article>
  9. <...>
Интересующий нас контент, который должен выводиться через ajax, находится внутри тега div с классом ".activity-list". Именно его (класс) мы добавляем в раздел CONTAINERS, чтобы плагин подключился к выводу страниц ленты активности. Для комментариев - тег с id "#comments_list", для показа списка пользователей - "#users_profiles_list" и т.д. По умолчанию в плагине уже присутствуют все компоненты стандартного шаблона где используется пагинация, собственно файлы шаблонов перечислены выше.
Чтобы добавить в плагин сторонний компонент или шаблон, ищем в нем тег-контейнер и дописываем в опциях pageautoload.js необходимый класс или идентификатор. Например для компонента "Фотобитвы", который был разработан r2 в процессе записи видео-туториалов, контент выводится внутри тега с классом ".photobattles-list". Его-то нам и необходимо добавить в раздел CONTAINERS. Далее подключаем плагин к компоненту (дописываем строки "<?php $this->addJS..." в файле шаблона ..\templates\default\controllers\photobattle\index.tpl.php) и проверяем результат его работы.

На этом всё.

Надеюсь получилось достаточно подробно и ясно описать базовый функционал плагина и принцип его работы. Всем большое спасибо и удачи в процессе постижения тайн второго Instant'а!!!

UPD:
В модуле исправлены недочеты отображения на стене пользователя, удаления заголовка страницы при прокрутке, а также адаптирован для версии InstantCMS 2.1.2

Скачать: pageautoload.zip

UPD2:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
Кнопка Вверх/Вниз для InstantCMS 2.x и InstantCMS 1.10.4
Теги: instant2, ajax, deprecated
Комментарии (61)
solitario84 21 августа 2014 в 23:24 0
Файл не найден.
Val 21 августа 2014 в 23:38 +2
Перезалил файл.
Val 21 августа 2014 в 23:39 +1
Странно так получилось... Вроде проверял и все работало, в смысле качалось...
solitario84 21 августа 2014 в 23:40 0
бывает,не смертельно... мой плюс..
Val 21 августа 2014 в 23:42 +1
только что еще раз проверил старую ссылку и она снова заработала!!! scratch
solitario84 21 августа 2014 в 23:39 0
оперативно..
Aryuts 23 августа 2014 в 18:22 +2
Отлично получилось и спасибо за подробные пояснения.
ValeraK 24 августа 2014 в 23:27 0
Прошу прощения возможно за глупый вопрос, но интересует во всех ли стандартных компонентах второй ветки будет работать данный модуль.
Val 25 августа 2014 в 08:04 +1
в тексте поста я перечислил компоненты в которых модуль точно работает (те шаблоны куда он подключается), для других компонентов есть механизм адаптации модуля к компоненту (приводится на примере фотобитв).
Т.е. должен работать везде где есть пагинация, но если что то не получается пишите, будем смотреть и разбираться!
Romanovcmc 18 сентября 2014 в 01:14 0
А как pagebar сместить чуть чуть левее, перекрывает значок RSS?
Romanovcmc 18 сентября 2014 в 01:24 0
Разобрался. Надо было править в файле min
Cobalt 22 сентября 2014 в 09:27 +1
Отличный модуль, спасибо.
Нашел небольшую багу - при скроле на 2ую и все последующие страницы пропадает тайтл(<Title></Title>).
Val 22 сентября 2014 в 12:09 +2
Спасибо за ваш отзыв! С багой будем бороться)) Как появятся еще несколько пожеланий/исправлений/баг-репортов доработаю и выложу обновление.
Cobalt 7 ноября 2014 в 20:32 0
Еще одну багу нашел - на второй и всех последующих страницах нельзя поставить плюс или минус записи, а также посмотреть кто ставил плюсы\минусы
Cobalt 7 ноября 2014 в 21:18 0
И еще как то непонятно работает на страницах "поиск" и "поиск по тегам" если тег или поисковый запрос состоит из двух и более слов
Val 7 ноября 2014 в 21:32 +1
Спасибо за информацию, будем разбираться!
P.S. title исправил)))
nmsk 7 ноября 2014 в 22:37 0
А обновление будет? v
Val 8 ноября 2014 в 01:20 +5
Обязательно! Одно небольшое обновление я уже выложил, понемногу буду дорабатывать дальше.
RBJ 11 июня 2015 в 23:13 0
Неправильно работает в пользовательских разделах с контентом (ссылки на который в профиле под аватаром)
RBJ 28 января 2017 в 15:23 0
те же бока и в поиске
автоподгрузка работает, а переход на уже подгруженные нет, прокручивает в самый верх
Def 6 марта 2016 в 10:31 0
2/4/1 будет поддерживать?)
Val 6 марта 2016 в 13:40 0
Как 2.4.1 выйдет проверим))
Def 22 января 2017 в 00:03 0
на 2.6.1 работает?)
Владимир 22 января 2017 в 00:13 +1
Да, работает, классная штука.
Val 22 января 2017 в 00:43 0
Не проверял) Но вот пишут что вроде что-то работает))
Sergon 28 января 2017 в 14:15 0
Val, отличная работа! На 2.6.1 работает отлично. Вопрос, как можно положение менять? У меня меню закрепляется сверху и хотелось бы выводить пониже, как это реализовать?
Sergon 28 января 2017 в 14:38 0
разобрался! Вот только что происходит, при нажатии в блоке на ссылочки страниц и "следующая" у меня происходит перерисовка экрана и слетает шаблон. Пропадает сайдбар, остаётся только колонка с контентом где блок работает
Sergon 28 января 2017 в 15:19 0
Заметил, что перерисовка и исчезновение сайтбара который пропадает, происходит когда нажимаешь на странички которые ещё не просмотрел, а если просмотрено, то все работает как надо. Там заметил ссылка вот так формируется, например в новостях "/news?page=2"
Sergon 28 января 2017 в 16:50 0
Видимо это у меня баг. Так происходит и без этого модуля и почему-то только в заглавной директории, в поддериктори не вышибает(( буду разбираться
Sergon 29 января 2017 в 10:45 0
оказалось сей проблема есть в дефолтном шаблоне даже на только установленной системе(((
Def 3 февраля 2017 в 22:23 0
почему то в тайтл подставляется урл при скроле на 2 и последующие страницы
Def 3 февраля 2017 в 23:27 0
и если на тсранице выведены записи по Связям, то не подгружает страницу следующую:(
Def 5 февраля 2017 в 23:28 +1
при склейке скриптов в админке, контент в 2.7.0 перестает грузиться( видимо всеже где то конфликт
Нико 5 апреля 2017 в 17:08 0
Всем привет, все работает правильно но у меня такая проблема, у меня есть, тоже самое виджет новостей что и у всех, виджет который выводит новости на главной, и я задаю лимит сообщений например 10, как можно сделать и тут так же ?
Capitan 18 декабря 2017 в 14:19 0
Дополнение работает? У кого стоит?
RBJ 18 декабря 2017 в 15:09 0
работает на 2.8.2
всё без изменений
кроме этих локаций http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html#c81990
Саня 18 декабря 2017 в 19:42 +1
киньте ссылку на пример) хочется посмотреть...
Capitan 18 декабря 2017 в 22:15 +1
Да. У кого стоит данное дополнение киньте ссылку? Посмотреть на рабочем примере
Pawell 27 марта 2018 в 09:23 0
Здравствуйте. Возможно ли подключение модуля непосредственно в контент, в тело новости? И как это реализовать, ведь там нет pagebar?

Код PHP:
  1. <?php if ($perpage < $total) { ?>
  2. <?php echo html_pagebar($page, $perpage, $total, $page_url, array_merge($filters, $ext_hidden_params)); ?>
  3. <?php } ?>
Val 27 марта 2018 в 23:41 0
Pawell:
Возможно ли подключение модуля непосредственно в контент, в тело новости?
Для этого нужно подключить скрипт только на страницу с новостями ;)
Pawell:
И как это реализовать, ведь там нет pagebar?
Вроде есть https://github.com/instantsoft/icms2/blob/master/templates/default/content/default_list.tpl.php

P.S. С момента публикации этого поста утело много воды, насколько он совместим с последней версией iCMS незнаю. Поэтому все изменения делайте на свой страх и риск, и желательно предварительно не на рабочем сайте))
Pawell 28 марта 2018 в 00:11 0
К списку вывода новостей templates/default/content/default_list.tpl.php я подключил - всё работает - спасибо. А мне надо непосредственно в тело новости - поста: templates/default/content/default_item.tpl.php Возможно ли такое?
Val 28 марта 2018 в 00:39 0
А что в самой новости можно подгружать? =)
Без доработки скрипта нельзя.
Олег Васильевич я 28 марта 2018 в 12:20 0
Не исключён вариант как-то разбитой статьи. Но есть предположение, что, Pawell хочет следующую стать.
Если бы ещё и полем регулировать, была бы весьма интересно.
Pawell 28 марта 2018 в 13:20 0
Абсолютно так. Но, чтобы это воплотить нужен pagebar, который, как я понял для тела новости не предусмотрен. Есть модуль
навигации: http://instantcms.ru/blogs/instantmedia/pole-navigaci.html (след., пред.) Как то к нему прикрутить, но у меня пока ни знаний, ни времени ни хватает.
Capitan 28 марта 2018 в 12:54 0
А можете показать рабочий вариант? Ссылку дайте :)
Саня 30 марта 2018 в 16:24 0
Кто нибудь видел пример? Покажите всем... Тоже хочется такое себе на сайт))
Александр 23 апреля 2018 в 19:51 0
Конечно жаль что данную тему немного подзабыли - прекрасное дополнение на Инстант и отлично работает на последней версии, но никак не пойму как подключить в контейнер компонент InstanVideo и расширенную Доску объявлений и так пробовал
Код PHP:
  1. "#board-list", // список доски
  2. "#video_list", // список видео
и так
Код PHP:
  1.  
  2. ".board-list", // список доски
  3. ".video-list", // список видео
и по другому ... что то никак
Val 23 апреля 2018 в 23:55 +1
Изначально "дополлнение" делалось в виде "Proof of Concept" - проверить получится ли грузить с бэка html в его исходном виде и выводить все это по скроллу. Именно по этому я не добавлял этот скрипт в каталог дополнений, т.к. не место ему там.
Если делать нормальную подгрузку контента, данные должны подготавливаться на бэкенде, и отправляться без лишнего "мусора" в виде разметки и прочего. А затем уже на фронте выводиться в в шаблон.

остальное отписал в личке ;)
TOPg 5 октября 2018 в 10:47 +1
а правильное решение, не хотите реализовать для общественности? можно конечно и обсуждать благодарность далее
Val 6 октября 2018 в 15:30 0
Спасибо за предложение, но пока нет ни времени ни желания заниматься этим функционалом.
Sich 27 января 2019 в 22:45 0
<blockquote>UPD2: Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.</blockquote>
почему?
Val 28 января 2019 в 01:57 0
smile потому что не поддерживается))
Если вас устраивает его работа, то конечно проблем с использованием нет. Если не устраивает или чего-то не хватает - то доработка это дело пользователя а не автора ;)
Sich 28 января 2019 в 08:04 0
Только установил его, вроде всё устраивает, разве есть какие то недочёты в нём?
Sich 28 января 2019 в 08:04 0
Только установил его, вроде всё устраивает, разве есть какие то недочёты в нём?
@elv 28 февраля 2019 в 21:32 0
Спасибо за Автоподгрузку страниц, все работает. Окно с страницами наезжает на Стиль списка и Кнопку "Подписаться" , instantcms 2.11.
@elv 28 февраля 2019 в 21:56 0
Странно, что в браузере Опера работает, в Хроме нет cry
Pawell 28 февраля 2019 в 22:02 0
У меня везде работал, но подгрузка списка новостей ничего не дала сайту, удалил. Подгрузка новостей или постов следом друг за другом даст больший результат.
@elv 28 февраля 2019 в 22:39 0
Для новостей может так и лучше, где в Записях меньше текста может и не лучше
@elv 23 марта 2019 в 21:23 0
Доброе время суток. Может кто-нибудь может перенести PAGEBAR ка в коробке , под списком записей ? https://instantcms.ru/forum/thread30402-2.html
@elv 23 марта 2019 в 21:23 0
Доброе время суток. Может кто-нибудь может перенести PAGEBAR как в коробке , под списком записей ? https://instantcms.ru/forum/thread30402-2.html
Despot 7 апреля 2019 в 18:52 -1
Придумал костыль: над контентом создал пустой html блок, перекрывает немного слайдер ... Может Вы придумаете что-нибудь получше ?