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

2868

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



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

Сперва открываем файл \components\content\frontend.php, на 122 строчке, после
Код PHP:
  1. $inDB->limitPage($page, $model->config['perpage']);
Вставляем:
Код PHP:
  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 и вставим в конце:
Код JAVASCRIPT:
  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 кнопки "Загрузить ещё"
Код HTML:
  1.  
  2. <span class="load_more_btn">Загрузить ещё</span>
  3.  
Находим
Код HTML:
  1. {$pagebar}
Меняем на
Код HTML:
  1. <div style="display: none;">{$pagebar}</div>
Закрываем темплейт.

Переходим в \templates\_default_\css\styles.css, дабы прописать стили для недавно добавленной кнопки. Открываем, в конце пишем следующее:
Код 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

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

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

Спасибо за внимание.
Вёрстка просмотра списка статей под видео для InstantCMS 1.10.6 | Иконки Awesome Font в меню [InstantCMS 2.4.0]
Комментарии (13)
Def 18 января 2016 в 10:48 +1
а для 2 ки есть решение?) было бы мегаполезно и удобно)
Pasha 18 января 2016 в 11:25 +1
Def 18 января 2016 в 15:25 0
там именно тип контента или виджет?
Джехутимери 18 января 2016 в 18:55 0
Для двойки могу посмотреть на днях, если не опередит никто joke
У Олега Васильевича хорошее решение, но на примере представлен виджет.
Если для элементов раздела решения пока нету, то можно и нужно сделать.
Pasha 18 января 2016 в 19:11 +1
Я у вас тут как справочное бюро - http://instantcms.ru/blogs/bitblog/modul-avtopodgruzki-stranic-dlja-instantcms-2-x.html
Джехутимери 19 января 2016 в 01:04 0
О, и вправду laugh
Спасибо.
letsgo 18 января 2016 в 19:22 -1
Не заметил в решении смены урла.
Джехутимери 19 января 2016 в 00:58 +1
Это потому, что запросы отправляются постом.
Но: ссылки на страницы есть в блоке display:none, поисковики их отлично увидят.
Например, последняя, 9-я страница: http://demo.guitarist.pp.ua/stati/marketing/page-9 .
Нил™ 18 января 2016 в 19:51 0
Интересная тема. Скорее для мобильной версии . Для других компонентов примерно так же можно применить? А как сделать что бы не по клику а по скролу (при достижении конца текущего блока) подгружался следующий блок? Вроде упоминание о такой возможности вижу, а инструкции нет).
Джехутимери 19 января 2016 в 01:02 +1
http://prntscr.com/9rumhv

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

Сугубо индивидуально, как писал в посте. Здесь уже дело за тем. кто решит воспользоваться.
ValeraK 25 января 2016 в 15:25 0
На примере только компонент Статьи, по аналогии можно сделать и для фотогалереи, для доски объявлений и других стандартных компонентов? На премиум компонентах работать будет?
scanread 4 февраля 2016 в 03:09 0
Красава! То, что доктор приписал) dance
Ї Ђãîķℳāŋ Ї 17 января 2017 в 19:32 0
+1