Битрикс AJAX в своих компонентах

В данном методе мы не будем использовать BX.JS, а воспользуемся простым кодом на jQuery. Отправляем AJAX запрос на страницу с компонентом.

Добавляем аякс в компоненты Битрика

Задача — на странице отображается список карт с метками, по клику на страну должны подгружаться карты по фильтру.
Решение:
Сам компонент мы рассматривать не будем, начнем делать задачу и разбираться по шагам, что нам нужно:
Шаг 1. Создаем страницу с тем же компонентом.
Данный файл вы можете размещать либо в папке компонента, либо в шаблоне. Иногда, целесообразнее использовать корневую папку /ajax/. Итак, мой файл выглядит так:

<?
header("Content-type: application/json; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>
<?$APPLICATION->IncludeComponent(
"bitrix:news.list",
	"map.list",
	Array(
		"SITE_ID" => $_REQUEST['SITE_ID'],
		"AJAX" => 'Y',
// Ваш компонент

В шаге 2 и 3 дам объяснение что такое «SITE_ID» => $_REQUEST[‘SITE_ID’], «AJAX» => ‘Y’.

Шаг 2. Добавляем jQuery.
Без лишних вступлений, пишем такой код:

$(function(){

	// change country
	$(document).on('click', '.js-country.is-county', function(){
		var $siteID 	= $(this).data('site-id');
		$.ajax({
			url: '/local/templates/templ/ajax/map.php',
			type: 'post',
			cache: false,
			data: {'SITE_ID': $siteID},
		}).done(function(data) {
			$('#map-corners-wrapper').html(data);
		});
		return false;
	});
..

Важные моменты из шага 2:
map.php — файл и путь относительно корня куда мы будем отправлять аякс запрос (шаг 1)
‘SITE_ID’: $siteID — SITE_ID, это параметр необходимый мне для фильтрации

Шаг 3. Добавляем в существующий шаблон компонента проверку на аякс.
Помимо основного кода нам нужно обернуть наш компонент в контейнер, который отобразиться только в том случае, если это не аякс:

<?if ($arParams['AJAX'] != 'Y') {?>
<div id="map-corners-wrapper">
<?}?>
// template компонента
<?if ($arParams['AJAX'] != 'Y') {?>
</div>
<?}?>

Данный код нужно добавлять в шаблон компонента, а именно в template.php.
map-corners-wrapper — наш уникальный id, в который мы и грузим результат
$arParams[‘AJAX’] != ‘Y’ — необходимый параметр из шага 1. Благодаря ему мы не будем создавать контейнер обёртку каждый раз. И нам также не придется заводить второй отдельный шаблон для аякса без этого контейнера (хотя раньше я делал именно так 🙂 ).

Подводные камни:
1. $(document).on(‘click’, ‘.js-country.is-county’, function(){ — обязательно записывать в таком виде чтобы работало после ajax.
2. параметры которые мы добавили в шаге 1 — не описаны в специальном файле, а это значит что при редактировании через визуальный редактор они будут стёрты. И хотя такой сценарий мало вероятен, про него нужно помнить.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

- Создание сайтов на 1С-Битрикс любой сложности
- Вёрстка макетов Figma, Photoshop, Zeplin
- Поддержка проектов на Битриксе
- Разработка нового функционала для сайта
- Парсинг данных
- Выгрузка из файлов в формате XML, YML, XLS, XLSX, CSV, JSON
- Интеграция по API со сторонними сервисами
и многое другое

E-mail: dmitriyribka@gmail.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *