Как сделать аякс-подгрузку контента для InstantCMS 1.10.6

+24
4.19K
Иллюстрация
Здравствуйте.
В этой публикации, как можно догадаться по заголовку, речь пойдет об аякс-подгрузке. smile
Все описанное ниже применимо для дефолтного шаблона, для кастомного переделать нетрудно, все зависит от индивидуальных умений.
Предвосхищая комментарии: файлов для скачивания не будет, только инструкция.



Итак, начнем.

Сперва открываем файл \components\content\frontend.php, на 122 строчке, после
  1. $inDB->limitPage($page, $model->config['perpage']);
Вставляем:
  1. if(isset($_POST['ajax_page'])) {
  2. $page = $_POST['ajax_page'];
  3. $perpage = $model->config['perpage'];
  4. $inDB->limitPage($page, $perpage);
  5. }
Далее переходим в js. Откроем \core\js\common.js и вставим в конце:
  1.  
  2. $(document).ready(function() {
  3. if ($('.contentlist').length && $('.pagebar').length) {
  4. window.counter = 1;
  5. var allPages = $('.pagebar > *').last().attr('href').split('-');
  6. var maxPage = allPages[allPages.length-1];
  7. $(document).on('click', '.load_more_btn', function() {
  8. window.counter++;
  9. if (window.counter <= maxPage) {
  10. $.ajax({
  11. url: window.location.pathname,
  12. data: {ajax_page:window.counter},
  13. type: "POST",
  14. success: function(data)
  15. {
  16. var filterData = $(data).filter('table.contentlist').find('tbody').html();
  17. $('.component table.contentlist tbody').append(filterData);
  18. },
  19. complete: function() {
  20. if (window.counter == maxPage-1) {
  21. $('body').addClass('ajax-before-last-page');
  22. }
  23. }
  24. });
  25. }
  26. });
  27. $(document).on('click', 'body.ajax-before-last-page .load_more_btn', function() {
  28. setTimeout(function () {
  29. $('.load_more_btn').hide();
  30. $('body').removeClass('ajax-before-last-page');
  31. }, 200);
  32. });
  33. }
  34. });
  35.  
Далее переходим в папку шаблона. Открываем папку \templates\_default_\components\. Здесь копируем файл com_content_view.tpl и называем его com_content_view_ajax.tpl. Открываем созданный файл.
В конце перед закрывающим {/if} прописываем html кнопки "Загрузить ещё"
  1.  
  2. <span class="load_more_btn">Загрузить ещё</span>
  3.  
Находим
  1. {$pagebar}
Меняем на
  1. <div style="display: none;">{$pagebar}</div>
Закрываем темплейт.

Переходим в \templates\_default_\css\styles.css, дабы прописать стили для недавно добавленной кнопки. Открываем, в конце пишем следующее:
  1.  
  2. .load_more_btn {
  3. display: table;
  4. font-size: 21px;
  5. color: #fff !important;
  6. text-decoration: none !important;
  7. padding: 12px 40px;
  8. line-height: 1;
  9. overflow: hidden;
  10. position: relative;
  11. box-shadow: 0 1px 1px #ccc;
  12. border-radius: 2px;
  13. background-color: #51b7e6;
  14. background-image: -webkit-linear-gradient(top, #51b7e6, #4dafdd);
  15. background-image: -moz-linear-gradient(top, #51b7e6, #4dafdd);
  16. background-image: linear-gradient(top, #51b7e6, #4dafdd);
  17. border: 1px solid #51b7e6;
  18. margin: 20px auto 10px;
  19. -webkit-transition-duration: 0.4s;
  20. -o-transition-duration: 0.4s;
  21. transition-duration: 0.4s;
  22. cursor: pointer;
  23. }
  24. .load_more_btn:hover {
  25. opacity: 0.7;
  26. }
  27. .load_more_btn:active {
  28. opacity: 0.85;
  29. }
  30.  
Переходим наконец-то в нужный раздел и задаем ему шаблон вывода com_content_view_ajax.tpl
Иллюстрация

На этом по аяксу всё joke

События, на которые подгружать материалы — по сроллу или на клик, как здесь — выбор сугубо индивидуальный, равно как и стилизация, потому может требовать доработок под личные вкусы. Здесь Вы вольны, полагаясь на персональные навыки.

Ну и, как обычно, демо — клик.

Спасибо за внимание.
+1
Def Def 8 лет назад #
а для 2 ки есть решение?) было бы мегаполезно и удобно)
0
Def Def 8 лет назад #
там именно тип контента или виджет?
0
Джехутимери Джехутимери 8 лет назад #
Для двойки могу посмотреть на днях, если не опередит никто joke
У Олега Васильевича хорошее решение, но на примере представлен виджет.
Если для элементов раздела решения пока нету, то можно и нужно сделать.
+1
Pasha Pasha 8 лет назад #
Я у вас тут как справочное бюро - http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html
0
Джехутимери Джехутимери 8 лет назад #
О, и вправду laugh
Спасибо.
-1
letsgo letsgo 8 лет назад #
Не заметил в решении смены урла.
+1
Джехутимери Джехутимери 8 лет назад #
Это потому, что запросы отправляются постом.
Но: ссылки на страницы есть в блоке display:none, поисковики их отлично увидят.
Например, последняя, 9-я страница: http://demo.guitarist.pp.ua/stati/marketing/page-9 .
0
Нил™ Нил™ 8 лет назад #
Интересная тема. Скорее для мобильной версии . Для других компонентов примерно так же можно применить? А как сделать что бы не по клику а по скролу (при достижении конца текущего блока) подгружался следующий блок? Вроде упоминание о такой возможности вижу, а инструкции нет).
+1
Джехутимери Джехутимери 8 лет назад #
http://prntscr.com/9rumhv

Переделать этот момент под себя, условие, при котором увеличивать счетчик.
Если на скролл, то например так:
$(document).on('scroll', function() {
if ($(document).height() >= $(document).height() - $(window).height()) {
...
}
});

Сугубо индивидуально, как писал в посте. Здесь уже дело за тем. кто решит воспользоваться.
0
ValeraK ValeraK 8 лет назад #
На примере только компонент Статьи, по аналогии можно сделать и для фотогалереи, для доски объявлений и других стандартных компонентов? На премиум компонентах работать будет?
0
scanread scanread 8 лет назад #
Красава! То, что доктор приписал) dance
0
Ї Ђ&#227;&#238;&#311;&#8499;&#257;&#331; Ї Ї Ђãîķℳāŋ Ї 7 лет назад #
+1

Еще от автора

Портальный шаблон MTheme для InstantCMS 2.6.1 - глобальное обновление
Здравствуйте, дорогие пользователи InstantCMS. Рад предоставить вашему вниманию обновленный шаблон MTheme для InstantCMS 2.6.1.
Виджет "Список групп" для InstantCMS 2.5.1
Обычный виджет вывода списка групп. О нём забыли в коробке Внешний вид. Настройки: Демо | Скачать Установка стандартная.
Портальный шаблон MTheme
Здравствуйте, сообщество. Представляю Вам шаблон MTheme, разработанный для порталов на основе InstantCMS 2.5.1.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.