Добавить Кнопку “Загрузить еще” на AJAX в OpenCart, Joomla, WordPress и другие CMS

Показывать справа: 0

В современном веб-разработке, особенно на популярных CMS вроде OpenCart, Joomla, WordPress, а также на сайтах с кастомной разработкой, одним из распространенных сценариев является необходимость подгрузки дополнительного контента без перезагрузки всей страницы. Будь то товары в интернет-магазине, статьи в блоге или элементы списка, удобная кнопка "Загрузить еще" с динамической подгрузкой через AJAX может значительно улучшить пользовательский опыт и, при правильной реализации, положительно сказаться на SEO.

Если вам нужна реализация подобного функционала на вашем сайте — вы можете заказать разработку на PHP или разработку на WordPress.

В этой статье мы подробно разберем JavaScript-код на JQuery, который позволяет легко добавить такую функциональность. Вы узнаете, как он работает, как его интегрировать в свои проекты на OpenCart, Joomla, WordPress или любой сайт, где есть пагинация, и какие преимущества это дает.

Сам код функционала: "Загрузить еще"

Прежде чем углубляться в детали, давайте посмотрим на сам код:

JavaScript-код для реализации

$(function(){
 const pBlock = ".pagination"; // Селектор для блока пагинации

 if ($(pBlock).length) { // Проверяем, есть ли блок пагинации на странице
 const btnHtml = `
 <div class="uk-margin uk-text-center show-more">
 <a class="show-more__btn el-content uk-button uk-button-danger" >
 Загрузить еще
 </a>
 </div>
 `; // HTML-код кнопки "Загрузить еще"

 // Добавляем кнопку, если есть следующая страница
 if ($(pBlock).find(".uk-active").next().length) {
 $(pBlock).before(btnHtml);
 }

 // Наблюдаем за изменениями в пагинации для динамического показа/скрытия кнопки
 const observer = new MutationObserver((e) => {
 if (!$(".show-more").length) { // Если кнопки нет, добавляем ее
 $(pBlock).before(btnHtml);
 }
 // Показываем кнопку, если есть следующая страница, иначе скрываем
 if ($(pBlock).find(".uk-active").next().length) {
 $(".show-more").show();
 } else {
 $(".show-more").hide();
 }
 });

 // Запускаем наблюдение, если есть элемент с классом "pagination-text" (для определения изменений)
 if ($(".pagination-text").length) {
 observer.observe($(".pagination-text")[0], { childList: true, subtree: true });
 }

 // Обработчик клика по кнопке "Загрузить еще"
 $(document).on("click", ".show-more__btn", function() {
 let pagination = $(pBlock);
 let pagination_text = $(".pagination-text");
 let products = $(".fs-load-more-container"); // Селектор для контейнера, куда будут добавляться товары

 // Получаем URL следующей страницы
 let url = pagination.find(".uk-active").next().find("a").attr("href");

 // Если URL не определен или пуст, выходим
 if (typeof url == "undefined" || url == "") return;

 // Корректируем URL для HTTPS, если текущий протокол HTTPS
 if (document.location.protocol == "https:") {
 url = url.replace("http:", "https:");
 }

 // AJAX-запрос для получения нового контента
 $.ajax({
 url: url,
 type: "get",
 dataType: "html",
 beforeSend: function() {
 // Отображаем прелоадер во время загрузки
 $("body").append(`
 <div id="preloader" class="preloader-wrapper">
 <div uk-spinner="ratio: 3"></div> <!-- uk-spinner - элемент UIkit -->
 </div>
 `);
 },
 success: function(data) {
 $("#preloader").remove(); // Удаляем прелоадер

 let result = $(data); // Парсим полученный HTML

 // Добавляем новый контент (например, товары)
 products.append(result.find(".fs-load-more-container").html());

 // Обновляем блок пагинации
 pagination.html(result.find(pBlock).html());

 // Обновляем текстовое отображение пагинации (например, "Страница 5 из 10")
 let textString = result.find(".pagination-text").text();
 pagination_text.text(textString);

 // Обновляем URL в адресной строке браузера без перезагрузки страницы (важно для SEO и истории)
 window.history.pushState("", "", url);
 },
 });
 });
 }
 });

Нужна помощь с внедрением?

Если вы не хотите разбираться в реализации AJAX-загрузки или нужно доработать существующий сайт — можно заказать доработку сайта или доработку WordPress.

Пример отрисованной кнопки "Загрузить еще"

Ниже показано, как будет выглядеть кнопка, созданная кодом btnHtml. :

Загрузить еще

Как Это Работает? Разбираем Код Пошагово

  1. Инициализация и Поиск Блока Пагинации:
    • $(function(){ ... }); - Весь код обернут в функцию, которая выполняется после полной загрузки DOM.
    • const pBlock = ".pagination"; - Определяется переменная pBlock с CSS-селектором для вашего основного блока пагинации. Важно: убедитесь, что на ваших страницах OpenCart, Joomla, WordPress или других сайтах этот блок имеет класс pagination.
    • if ($(pBlock).length) - Код будет выполняться только если на странице найден элемент с указанным селектором.
  2. Создание Кнопки "Загрузить еще":
    • const btnHtml = \`...\`; - Определяется строка с HTML-кодом кнопки. Вы можете настроить классы (uk-margin, uk-text-center, show-more, show-more__btn, el-content, uk-button, uk-button-danger) согласно вашему дизайну и используемому фреймворку (похоже на UIkit).
    • if ($(pBlock).find(".uk-active").next().length) - Проверяется, существует ли следующая страница в пагинации (активный элемент .uk-active имеет следующий брат). Если да, то кнопка добавляется перед блоком пагинации ($(pBlock).before(btnHtml)).
  3. Динамическое Управление Кнопкой с MutationObserver:
    • const observer = new MutationObserver((e) => { ... }); - Создается наблюдатель за изменениями в DOM. Это очень полезно, так как пагинация может обновляться динамически (например, после AJAX-запроса).
    • if (!$(".show-more").length) - Если кнопки "Загрузить еще" вдруг нет (например, после какой-то другой динамической модификации страницы), она добавляется.
    • if ($(pBlock).find(".uk-active").next().length) - Опять же, проверяется наличие следующей страницы. Если есть, кнопка .show-more показывается (.show()), иначе — скрывается (.hide()).
    • if ($(".pagination-text").length) - Наблюдатель запускается только если на странице есть элемент с классом pagination-text. Этот элемент, видимо, используется для синхронизации состояния пагинации.
    • observer.observe($(".pagination-text")[0], { childList: !0, subtree: !0 }); - Наблюдатель прикрепляется к первому найденному элементу .pagination-text и отслеживает изменения в его дочерних элементах и всех их потомках.
  4. Обработка Кликов по Кнопке "Загрузить еще":
    • $(document).on("click", ".show-more__btn", function() { ... }); - Используется делегированный обработчик событий. Это значит, что даже если кнопка будет добавлена динамически, клики по ней будут обрабатываться.
    • Получение Данных:
      • let pagination = $(pBlock);
      • let pagination_text = $(".pagination-text");
      • let products = $(".fs-load-more-container"); - Важно: Этот селектор указывает, куда будет добавлен новый контент. Убедитесь, что в вашем шаблоне OpenCart, Joomla, WordPress или другом сайте есть элемент с классом fs-load-more-container (или измените селектор под свою структуру).
      • let url = pagination.find(".uk-active").next().find("a").attr("href"); - Из активного элемента пагинации извлекается href следующей ссылки.
    • Проверка URL: if (typeof url == "undefined" || url == "") return; - Если ссылка не найдена, дальнейшие действия не производятся.
    • Коррекция URL для HTTPS: if (document.location.protocol == "https:") { url = url.replace("http:", "https:"); } - Обеспечивает правильное формирование URL для HTTPS-сайтов.
    • AJAX-Запрос ($.ajax):
      • url: url - Адрес, куда отправляется запрос.
      • type: "get" - Метод запроса.
      • dataType: "html" - Ожидаемый тип данных ответа.
      • beforeSend:
        • $("body").append(\`...\`) - Добавляет на страницу элемент с индикатором загрузки (#preloader). Классы preloader-wrapper и uk-spinner указывают на использование UIkit.
      • success:
        • $("#preloader").remove(); - Убирает индикатор загрузки.
        • let result = $(data); - Полученный HTML-ответ парсится в объект jQuery.
        • products.append(result.find(".fs-load-more-container").html()); - Из ответа извлекается HTML из нужного контейнера и добавляется в ваш основной контейнер (.fs-load-more-container).
        • pagination.html(result.find(pBlock).html()); - Весь блок пагинации заменяется новым, полученным из ответа.
        • pagination_text.text(textString); - Текстовое отображение пагинации обновляется.
        • window.history.pushState("", "", url); - Очень важный шаг для SEO! Он добавляет новый URL в историю браузера и изменяет адресную строку без перезагрузки страницы. Это позволяет пользователям делиться ссылкой на страницу с уже подгруженным контентом, а поисковым роботам — правильно индексировать контент.

Интеграция в OpenCart, Joomla, WordPress и другие CMS: Практические Шаги

  1. Подключение jQuery:
    • Убедитесь, что библиотека jQuery подключена на ваших страницах. В большинстве современных тем OpenCart, Joomla, WordPress и многих других CMS она уже есть. Если нет, добавьте ссылку на CDN или локальный файл в <head> вашего шаблона:
      •  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2. Подключение Вашего JavaScript-файла:
    • Сохраните предоставленный вами код в файл, например, load-more.js.
    • Разместите этот файл в папке с вашими скриптами (например, catalog/view/javascript/ в OpenCart, templates/ваша_тема/js/ в Joomla, или через админ-панель WordPress, например, в теме или с помощью плагина).
    • Подключите этот скрипт в шаблоне вашей страницы (или через функции темы WordPress) после подключения jQuery.
      •  <script src="/путь/к/вашему/скрипту/load-more.js"></script>
  3. Настройка Шаблона (HTML-структура):
    • Блок пагинации: Убедитесь, что ваш стандартный блок пагинации имеет класс pagination.
    • Контейнер для контента: Создайте элемент с классом fs-load-more-container, куда будет добавляться новый контент (товары, статьи и т.д.). Изначально он может быть пустым, или содержать первую порцию контента.
    • Текстовое отображение пагинации: Если ваш шаблон использует элемент для отображения текста пагинации (например, "Страница 1 из 5"), убедитесь, что он имеет класс pagination-text. Этот элемент нужен для корректной работы MutationObserver.
    • Структура ссылки пагинации: Код ожидает, что каждая ссылка пагинации будет внутри элемента .uk-active (для текущей страницы) и его последующего брата (.next()), который содержит ссылку (<a>) с атрибутом href.

    Пример структуры (универсален для большинства сайтов с пагинацией):

    
 <!-- Ваш основной контейнер для элементов -->
 <div class="fs-load-more-container">
 <!-- Здесь будут отображаться товары/статьи -->
 <div class="product-item">...</div>
 <div class="product-item">...</div>
 <!-- ... -->
 </div>

 <!-- Ваш блок пагинации -->
 <div class="pagination">
 <ul>
 <li class="uk-active"><a>1</a></li>
 <li><a href="/page/2">2</a></li>
 <li><a href="/page/3">3</a></li>
 <!-- ... -->
 </ul>
 </div>

 <!-- Если используется отдельный текстовый элемент пагинации -->
 <div class="pagination-text">Страница 1 из 5</div>
  4. Настройка CSS:
    • Убедитесь, что стили для .show-more, .show-more__btn и #preloader соответствуют вашему дизайну. Если вы используете UIkit, то классы uk-margin, uk-text-center, uk-button, uk-button-danger, uk-spinner должны работать "из коробки".
    • Вы можете стилизовать #preloader для центрирования или другого расположения на экране.

SEO-Аспекты и Преимущества

  • Полная индексация: Благодаря window.history.pushState, поисковые роботы видят URL, соответствующие подгруженному контенту, что способствует более полной индексации.
  • Улучшенный UX: Пользователи получают доступ к большему количеству контента без лишних кликов, что снижает показатель отказов и увеличивает время на сайте.
  • Актуальность: Динамическое обновление контента помогает поддерживать страницу актуальной.

Заключение

Предоставленный вами JavaScript-код — это эффективное решение для добавления функционала "Загрузить еще" на AJAX. Он хорошо продуман, использует MutationObserver для динамичности и pushState для SEO-дружественности. Следуя этому руководству, вы сможете легко интегрировать его в свои проекты на OpenCart, Joomla, WordPress или любом другом сайте, значительно улучшив взаимодействие пользователей с вашим сайтом.

Не забывайте тестировать функционал после внедрения на разных устройствах и в разных браузерах!

Разработка и доработка сайтов

Реализую подобные решения под ключ: AJAX-загрузка, фильтры, личные кабинеты, интеграции и кастомная логика.

Заказать разработку

Frontend Разработка HTML5 Готовые Решения jQuery Личный кабинет
Покупка готового скрипта joomla 3

или просто напишите в телеграмм https://t.me/webalan