Доработка сайта Bitrix: добавление Ajax-подгрузки в каталог

Разбор практической доработки сайта на 1C-Битрикс: как добавить Ajax-подгрузку материалов по кнопке Загрузить еще, сохранить SEO-пагинацию и при необходимости превратить решение в бесконечную ленту.

Доработка сайта Bitrix часто начинается с небольших, но заметных для пользователя улучшений. Один из таких примеров - добавление Ajax-подгрузки в каталог: посетитель нажимает кнопку Загрузить еще, новые карточки появляются без полной перезагрузки страницы, а обычная пагинация остается рабочей для SEO и как резервный сценарий.

Задача: подгрузка проектов без перезагрузки страницы

На сайте на 1C-Битрикс нужно было добавить поведение, похожее на современные интернет-магазины: пользователь видит карточки каталога, нажимает Загрузить еще, и следующая порция проектов добавляется ниже уже показанных.

При этом важно было не просто спрятать пагинацию JavaScript-ом. Для нормальной доработки сайта Bitrix нужно сохранить обычные ссылки страниц, чтобы каталог оставался доступным без JavaScript, корректно индексировался и не ломался при ошибке Ajax-запроса.

Что было сделано в шаблоне Bitrix

Каталог был реализован через кастомный шаблон компонента `bitrix:news.list`. В шаблон списка добавлены стабильные `data-*` атрибуты, по которым JavaScript может найти общий контейнер, карточки проектов и блок пагинации.

<div class="container catalog-ajax" data-catalog-ajax>
  <div class="row" data-catalog-items>
    <div class="col-lg-6 col-md-6" data-catalog-card>
      ...
    </div>

    <div class="catalog-pagination" data-catalog-pagination>
      <button type="button" class="catalog-load-more" data-catalog-load-more>Загрузить еще</button>
      ...
    </div>
  </div>
</div>

Сама штатная пагинация `.bars-nav` осталась на странице. Это принципиально: если JavaScript не загрузится или запрос вернет ошибку, пользователь все равно сможет перейти на следующую страницу обычной ссылкой.

Как работает Ajax-загрузка

Скрипт берет ссылку на следующую страницу из текущей пагинации: активная страница находится по `.bnav-item.active`, а следующая ссылка берется из соседнего элемента. Затем выполняется GET-запрос к этой странице.

Из полученного HTML выбираются только новые карточки `[data-catalog-card]` и новый блок пагинации `[data-catalog-pagination]`. Карточки вставляются перед пагинацией, а старый блок пагинации заменяется новым.

function getNextPageUrl() {
  var activePage = catalog.find('.bars-nav .bnav-item.active');
  var nextPage = activePage.next('.bnav-item');

  return nextPage.length ? nextPage.attr('href') : '';
}

$.ajax({
  url: nextUrl,
  type: 'GET',
  dataType: 'html',
  success: function (html) {
    var response = $('<div>').append($.parseHTML(html, document, false));
    var newCatalog = response.find('[data-catalog-ajax]').first();
    var newCards = newCatalog.find('[data-catalog-items] > [data-catalog-card]');
    var newPagination = newCatalog.find('[data-catalog-pagination]').first();

    newCards.insertBefore(catalog.find('[data-catalog-pagination]'));
    catalog.find('[data-catalog-pagination]').html(newPagination.html());
  }
});

Почему не стоит отключать обычную пагинацию

Иногда при добавлении Ajax разработчики полностью убирают ссылки пагинации и оставляют только кнопку. Это рискованно. Поисковые роботы, пользователи без JavaScript и браузеры с ошибками в скриптах теряют доступ к следующим страницам каталога.

Более надежный вариант - прогрессивное улучшение. Базовый сайт работает через обычные ссылки, а Ajax только делает взаимодействие удобнее. Именно такой подход лучше использовать, когда нужны услуги по доработке сайта, а не разовая правка без учета последствий.

Lazy loading после подгрузки

В каталоге изображения карточек уже загружались лениво через data-bg и IntersectionObserver. После Ajax-вставки новых карточек нужно повторно запустить инициализацию lazy-фонов, иначе новые изображения могут остаться серыми блоками до перезагрузки страницы.

newCards.insertBefore(catalog.find('[data-catalog-pagination]'));
initLazyBackgrounds();
updateLoadMoreButton();

Это типичный нюанс при работе с динамическим контентом: после вставки HTML нужно заново инициализировать те части интерфейса, которые раньше запускались только при первой загрузке страницы.

Кнопка перед пагинацией

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

CSS был добавлен отдельно для кнопки catalog-load-more: фиксированная высота, максимальная ширина, светлый фон и адаптация на мобильных экранах. На мобильной версии проверялось, что пагинация не выходит за ширину экрана, а кнопка не ломает сетку каталога.

Как сделать бесконечную ленту

Вместо кнопки можно сделать бесконечную ленту: новые материалы будут подгружаться автоматически, когда пользователь долистает почти до конца списка. Для этого используется тот же Ajax-механизм, но к нему добавляется наблюдатель за специальным элементом-маркером.

<div class="catalog-load-sentinel" data-catalog-load-sentinel></div>

if ('IntersectionObserver' in window) {
  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        $('[data-catalog-load-more]').trigger('click');
      }
    });
  }, { rootMargin: '500px 0px' });

  observer.observe(document.querySelector('[data-catalog-load-sentinel]'));
}

В реальном проекте для бесконечной ленты нужно добавить защиту от повторных запросов, остановку на последней странице, обработку ошибок и обновление `history.pushState`, если важно сохранять текущую страницу в адресной строке.

Кнопка или бесконечная лента: что выбрать

Для каталога проектов был выбран вариант с кнопкой. Он проще контролируется, понятен пользователю и меньше конфликтует с формой заявки, футером и обычной пагинацией.

Проверка после внедрения

После публикации правок проверялись PHP-шаблон, JavaScript, публичный HTML, наличие новой кнопки, порядок элементов, десктопный и мобильный вид. Также был очищен кеш Bitrix, потому что без этого сайт мог продолжать отдавать старую версию шаблона.

Отдельно проверялось, что новые карточки добавляются до блока пагинации, а не после него. Это частая ошибка при Ajax-подгрузке в Bootstrap-сетке: если просто выполнить `append()` в общий `.row`, карточки могут оказаться ниже кнопки и номеров страниц.

Когда стоит заказать доработку Bitrix

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

Такая работа обычно включает не только написание JavaScript, но и проверку шаблонов компонентов, кеширования, SEO, адаптивности и поведения при ошибках. Поэтому качественная доработка сайта Bitrix всегда должна учитывать и frontend, и особенности самого движка.

В этом кейсе добавление Ajax-подгрузки улучшило сценарий просмотра каталога, сохранило штатную пагинацию и оставило сайт устойчивым к отключенному JavaScript или ошибкам сетевого запроса.