30 Мая 2018

Урок 13. Bitrix AJAX (запрос средствами Битрикс)

Приветствую мои читатели. В двух прошлых уроках я рассмотрел выполнение AJAX запроса средствами JavaScript и JQuery.  Ниже ссылки на эти уроки: Там кстати все очень подробно, особенно в первом уроке. Обязательно ознакомьтесь.


Но в Bitrix ведь есть для этого собственные средства! И их нужно использовать. Хотя я встречал мнение, что они не очень то удобные и понятные. Вот сейчас мы и посмотрим.

Первое, что нужно сделать инициировать скрипты Битрикса. Это выполняется в файле шаблона страницы компонента. Мы будем экспериментировать все так же над списком товаров (с детальной страницей было бы все совсем просто и не интересно).

У меня файл шаблона располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php. В самый конец файла мы внесем следующий код:

Код:
<?php
CJSCore::Init(['ajax']);
?

CJSCore::Init - это функция подключает скрипты JavaScript ядра Битрикс. В параметрах указываются массив требуемых расширений библиотеки. В нашем случае достаточно только ajax.
А далее в файл script.js вносим следующий код:

 Код:
//AXAJ Bitrix
BX.ready(function() {//Страница загружена
var products = BX('products');//Получаем родительский элемент по ID
var btn = BX.findChild(products, {tag: 'button'}, true, true);//Получаем все дочерние элементы
btn.forEach( function(element) {//Цикл по дочерним элементам (кнопкам), чтобы повесить обработчик
const id = element.id;//Получаем ID
BX.bind(element, 'click', function () {//Вешаем обработчик
BX.ajax.post (//Выполняем POST запрос
'/startshop.ru/personal/cart/index.php',
{id:id, kol:1},
function (result) {//Функция при успешном выполнении
var cart = BX('count-cart');//Получаем элемент корзины
cart.innerText= result;//Присваиваем количество
alert('Товар добавлен в корзину');
});
});
});
});

Обратите внимание или сравните с кодом из прошлых уроков, кода стало гораздо больше. Вот например JQuery код

JQuery AJAX Bitrix

И строчек меньше и попонятнее.

Давайте разберемся почему так, почему для реализации AKAX запроса средствами Bitrix пришлось усложнять код.

Почему все так сложно в Битрикс?

Первая причина то, что функция BX ищет элементы только по ID. В итоге мы не можем выбрать сразу все кнопки, как мы делали это в JQuery. Нам пришлось выбрать сначала дочерний элемент блок с id="product", а потом в цикле обойти все дочерние элементы (кнопки) и с помощью функции BX.bind() подключить обработчик нажатия.
Функция запроса BX.ajax.post() похожа на аналогичную из JQuery, тут все так же просто. И ещё один момент добавляющий кода, это то, что после отбора элемента через BX() нельзя сразу выполнять с ним действия. Необходимо сначала присвоить найденный элемент переменной и дальше работать с этой переменной.

На этом пока все, не забывайте подписываться на новые статьи!

От автора:
Скажу, что были правы, те кто ругал Bitrix AJAX. Мало того, что он сложнее, так ещё и информации в интернете мало. Если код работы с JQuery  гулится на раз, то чтобы разобраться с Bitrix и написать это скрипт я потратил 2 часа времени. В официальной документации примеров совсем нет.
Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время. На этом мы рассмотрели все варианты работы с AJAX в Битрикс. В следующих темах я хочу разобраться кешированием (собственно урок Как работает кеш Битрикс уже вышел). Так что обязательно подписывайтесь на рассылку о статьях (в правом сайдбаре) и ждите новых статей будет только интереснее.

Комментарии

Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
24
14.06.2018 | Антон

Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время вот у меня вопрос: а не будет ли штатный функционал, который по дефолту подключается в шапке сайта через ShowHead(); мешать остальному коду типа jQuery, верстке типа CSS Foundation (так как по дефолту в битриксе Бутстрап) и т.п. На сколько помню там подключается и свой JQuery и CSS, которые могут быть старее используемых в верстке.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
24
Закрыть
15.06.2018 | Администратор

В платных шаблонах повсеместно используется JQuery и Bottstrap проблем нету. Опять же Bottstrap, который из ядра он не автоматически подключается а через $this->addExternalCss(«/bitrix/css/main/bootstrap.css») в шаблонах компонентов. Т.е. если использовать конкретную версию бутстрапа нужно везде переопределить его и в шаблоне сайта и в шаблонах компонентов.

Комментировать
Подписатmся на комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке
24
Закрыть


Возврат к списку