02 Май 2020

Бесконечная прокрутка статей в категории k2 Joomla

Необходимо сделать прокрутку статей на сайте с постоянным обновлением материалов при скролле материалов k2.

Смысл в том, что нужно убрать кнопки переключения страниц и добавить скрипт, который будет "нажимать" на кнопку "next" и далее будет выводиться еще определенное кол-во материалов, значение которых указано в настройках joomla k2. Например выведутся 3 материала, затем покажется значок загрузки *.gif обозначающий загрузку и далее по 3 материала будут выводиться оставшиеся материалы.

01 Данный пункт выполнять необязательно, т.к. все кнопки навигации по страницам, можно скрыть в пункте №3. В этом пункте показан тот вариант, если у вас не получается скрыть все кнопки навигации. Для начала нужно удалить "ненужные" кнопки "Назад", "1", "2", "3", "В начало", "В конец" (опционально какие имеются, кроме кнопки "Вперед"). Это можно сделать, исследуя страницу сайта, например с помощью браузера Mozilla:

2020-05-03 10 56 54

Далее можно с помощью total commander найти в каком файле php выводится данная кнопка. Я нашел файл pagination.php (путь: сайт/templates/название_шаблона/html/pagination.php) и закомментировал переменные через которые выводятся кнопки:

2020-05-02 23 17 43

2020-05-02 23 19 29

// Комментируем кроме кнопки "pagination-next", она нужна для того, чтобы сработал скрипт, который добавим в дальнейшем. Если ее закомментировать, то при достижении конца страницы, автоматическая прокрутка до следующих статей не сработает. Кнопки с номерами страниц убираем по аналогии, в этой статье не покажу, т.к. убирал их ранее чем написана статья.

02 Добавляем сам скрипт в вывод материалов категории сайта. Скачаем js скрипт по ссылке https://github.com/pklauzinski/jscroll, из архива zip нужен только сам скрипт jquery.jscroll.min.js который добавим в папку /templates/название_шаблона/js/jquery.jscroll.min.js

03 Находим файл php который выводит все материалы k2. Это category.php, который находится по пути сайт/templates/название_шаблона/html/com_k2/templates/default/category.php. Вставим кусок кода в это место, подключив ранее скаченный скрипт и скрипт его запуска:

2020-05-02 23 55 42

<script src="/templates/название_шаблона/js/jquery.jscroll.min.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function($) {
if ($(".pagination-next a").length > 0){
$('#k2Container').jscroll({
    loadingHtml: '<img src="/images/loading.gif" alt="" style="vertical-align: middle;" />',
    padding: 20,
    nextSelector: '.pagination-next a',
    contentSelector: '#k2Container'
});
}
})//]]> 
</script>

04 На этом готово. Но осталась одна проблема, кнопка "Вперед" не скрыта, если оставить как есть, то после прокрутки до конца всего кол-ва материалов, покажется данная кнопка:

2020-05-03 00 11 25

Найти файл joomla.css по пути /templates/название_шаблона/css/joomla.css и поставить "display: none;" для ".pagination ul li":

2020-05-03 00 12 57

Настройка закончена, скроллим сайт и материалы прогружаются автоматически. Для графического воспроизведения загрузки статей можно добавить *.gif анимацию в любую удобную папку, например согласно коду в папку /images/loading.gif. Перед загрузкой новых статей будет появляться анимация: