Приветствую всех, уважаемое сообщество InstantCMS!
Относительно недавно в Лунном блоге lokanaft выложил обновление своего плагина "Автоподгрузка", который, при просмотре пользователем сайта, автоматически подгружает страницы с помощью технологии ajax. Подробнее о плагине можно почитать здесь.
Я решил сделать похожую штуку, но для второй ветке Инстанта.
Назвать полноценным компонентом или виджетом, в формулировке InstantCMS 2, мое решение нельзя, т.к. нет интеграции с системой которая выдает готовый ответ для аякса, например в формате JSON. Да и сам Instant толком не знает, что у него работает какой-то компонент, но в принципе это поправимо.
Плагин представляет собой 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 в папку со скриптами, по умолчанию она находится тут:И самое тяжелое — подключаем модуль в необходимых местах шаблона, там, где мы хотим, чтобы страницы, при пагинации, загружались автоматически через ajax. Для этого в файлах:
в самом начале прописываем строки:
(в данном случае, я использую сжатую версию pageautoload)
Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!
Интересующий нас контент, который должен выводиться через 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) и проверяем результат его работы.
UPD:
В модуле исправлены недочеты отображения на стене пользователя, удаления заголовка страницы при прокрутке, а также адаптирован для версии InstantCMS 2.1.2
Скачать: pageautoload.zip
UPD2:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
Относительно недавно в Лунном блоге lokanaft выложил обновление своего плагина "Автоподгрузка", который, при просмотре пользователем сайта, автоматически подгружает страницы с помощью технологии ajax. Подробнее о плагине можно почитать здесь.
Я решил сделать похожую штуку, но для второй ветке Инстанта.
Назвать полноценным компонентом или виджетом, в формулировке InstantCMS 2, мое решение нельзя, т.к. нет интеграции с системой которая выдает готовый ответ для аякса, например в формате JSON. Да и сам Instant толком не знает, что у него работает какой-то компонент, но в принципе это поправимо.
И так...
Плагин представляет собой 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 в папку со скриптами, по умолчанию она находится тут:
..\templates\default\js\
..\templates\default\content\albums_list.tpl.php ..\templates\default\content\default_list.tpl.php ..\templates\default\content\default_list_featured.tpl.php ..\templates\default\content\default_list_table.tpl.php ..\templates\default\content\default_list_tiles.tpl.php ..\templates\default\controllers\comments\list_index.tpl.php ..\templates\default\controllers\photos\album.tpl.php ..\templates\default\controllers\search\index.tpl.php ..\templates\default\controllers\users\profile_karma.tpl.php
<?php $this->addJS("templates/{$this->name}/js/jquery.history.js"); ?> <?php $this->addJS("templates/{$this->name}/js/pageautoload.min.js"); ?>
Это более правильный подход, но вместо кучи файлов шаблона можно попробовать подключить скрипты в файле
..\templates\default\main.tpl.php ниже после блока подключения других скриптов. В этом случае, плагин будет работать на всех страницах где используется пагинация. Но там, где нет разбиения на страницы и нет необходимости в работе скрипта, он всё равно будет грузиться. Этот способ хорош для тестовой проверки работоспособности, но не рекомендуется использовать его на рабочих сайтах, зачем постоянно грузить 26 килобайт ненужной информации?!
Немного о настройках...
Все, или почти все, изменяемые параметры скрипта вынесены в его начало, в разделе options. Рядом проставлены комментарии с описанием каждого параметра. Единственное на что хотел бы обратить внимание это раздел CONTAINERS, в котором перечислены классы и id блоков куда выводятся подгружаемые ajax данные. Например, структура ленты активности в стандартном шаблоне следующая:
<...> <article> <div id="breadcrumbs">...</div> <h1>Лента активности</h1> <div class="content_datasets">...</div> <div class="activity-list striped-list list-32">...</div> <div class="pagebar">...</div> </article> <...>
Чтобы добавить в плагин сторонний компонент или шаблон, ищем в нем тег-контейнер и дописываем в опциях 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:
Внимание! Модуль автоподгрузки не поддерживается! Настоятельно рекомендую отказаться от его применения на ваших сайтах.
Реклама #
solitario84 10 лет назад #
Val 10 лет назад #
Val 10 лет назад #
solitario84 10 лет назад #
Val 10 лет назад #
solitario84 10 лет назад #
Aryuts 10 лет назад #
ValeraK 10 лет назад #
Val 10 лет назад #
Т.е. должен работать везде где есть пагинация, но если что то не получается пишите, будем смотреть и разбираться!
Romanovcmc 10 лет назад #
Romanovcmc 10 лет назад #
Cobalt 10 лет назад #
Нашел небольшую багу - при скроле на 2ую и все последующие страницы пропадает тайтл(<Title></Title>).
Val 10 лет назад #
Cobalt 10 лет назад #
Cobalt 10 лет назад #
Val 10 лет назад #
P.S. title исправил)))
nmsk 10 лет назад #
Val 10 лет назад #
RBJ 9 лет назад #
RBJ 7 лет назад #
автоподгрузка работает, а переход на уже подгруженные нет, прокручивает в самый верх
Def 8 лет назад #
Val 8 лет назад #
Def 7 лет назад #
Владимир 7 лет назад #
Val 7 лет назад #
Sergon 7 лет назад #
Sergon 7 лет назад #
Sergon 7 лет назад #
Sergon 7 лет назад #
Sergon 7 лет назад #
Def 7 лет назад #
Def 7 лет назад #
Def 7 лет назад #
Нико 7 лет назад #
Capitan 6 лет назад #
RBJ 6 лет назад #
всё без изменений
кроме этих локаций http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html#comment_81990
Саня 6 лет назад #
Capitan 6 лет назад #
Pawell 6 лет назад #
Val 6 лет назад #
P.S. С момента публикации этого поста утело много воды, насколько он совместим с последней версией iCMS незнаю. Поэтому все изменения делайте на свой страх и риск, и желательно предварительно не на рабочем сайте))
Pawell 6 лет назад #
Val 6 лет назад #
Без доработки скрипта нельзя.
Олег Васильевич я 6 лет назад #
Pawell 6 лет назад #
навигации: http://instantcms.ru/blogs/instantmedia/pole-navigaci.html (след., пред.) Как то к нему прикрутить, но у меня пока ни знаний, ни времени ни хватает.
Capitan 6 лет назад #
Саня 6 лет назад #
Александр 6 лет назад #
Val 6 лет назад #
Если делать нормальную подгрузку контента, данные должны подготавливаться на бэкенде, и отправляться без лишнего "мусора" в виде разметки и прочего. А затем уже на фронте выводиться в в шаблон.
остальное отписал в личке ;)
TOPg 6 лет назад #
Val 6 лет назад #
Sich 5 лет назад #
почему?
Val 5 лет назад #
Если вас устраивает его работа, то конечно проблем с использованием нет. Если не устраивает или чего-то не хватает - то доработка это дело пользователя а не автора ;)
Sich 5 лет назад #
Sich 5 лет назад #
elv 5 лет назад #
elv 5 лет назад #
Pawell 5 лет назад #
elv 5 лет назад #
elv 5 лет назад #
elv 5 лет назад #
5 лет назад #