30 мая 2018
Но в Bitrix ведь есть для этого собственные средства! И их нужно использовать. Хотя я встречал мнение, что они не очень то удобные и понятные. Вот сейчас мы и посмотрим.
Первое, что нужно сделать инициировать скрипты Битрикса. Это выполняется в файле шаблона страницы компонента. Мы будем экспериментировать все так же над списком товаров (с детальной страницей было бы все совсем просто и не интересно).
У меня файл шаблона располагается по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php. В самый конец файла мы внесем следующий код:
Код:
CJSCore::Init - это функция подключает скрипты JavaScript ядра Битрикс. В параметрах указываются массив требуемых расширений библиотеки. В нашем случае достаточно только ajax.
А далее в файл script.js вносим следующий код:
Код:
Обратите внимание или сравните с кодом из прошлых уроков, кода стало гораздо больше. Вот например JQuery код
Давайте разберемся почему так, почему для реализации AKAX запроса средствами Bitrix пришлось усложнять код.
Почему все так сложно в Битрикс?
Первая причина то, что функция BX ищет элементы только по ID. В итоге мы не можем выбрать сразу все кнопки, как мы делали это в JQuery. Нам пришлось выбрать сначала дочерний элемент блок с id="product", а потом в цикле обойти все дочерние элементы (кнопки) и с помощью функции BX.bind() подключить обработчик нажатия.
Функция запроса BX.ajax.post() похожа на аналогичную из JQuery, тут все так же просто. И ещё один момент добавляющий кода, это то, что после отбора элемента через BX() нельзя сразу выполнять с ним действия. Необходимо сначала присвоить найденный элемент переменной и дальше работать с этой переменной.
На этом пока все, не забывайте подписываться на новые статьи!
От автора:
Скажу, что были правы, те кто ругал Bitrix AJAX. Мало того, что он сложнее, так ещё и информации в интернете мало. Если код работы с JQuery гулится на раз, то чтобы разобраться с Bitrix и написать это скрипт я потратил 2 часа времени. В официальной документации примеров совсем нет.
Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время. На этом мы рассмотрели все варианты работы с AJAX в Битрикс. В следующих темах я хочу разобраться кешированием (собственно урок Как работает кеш Битрикс уже вышел). Так что обязательно подписывайтесь на рассылку о статьях (в правом сайдбаре) и ждите новых статей будет только интереснее.
Урок 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 код
Давайте разберемся почему так, почему для реализации AKAX запроса средствами Bitrix пришлось усложнять код.
Почему все так сложно в Битрикс?
Первая причина то, что функция BX ищет элементы только по ID. В итоге мы не можем выбрать сразу все кнопки, как мы делали это в JQuery. Нам пришлось выбрать сначала дочерний элемент блок с id="product", а потом в цикле обойти все дочерние элементы (кнопки) и с помощью функции BX.bind() подключить обработчик нажатия.
Функция запроса BX.ajax.post() похожа на аналогичную из JQuery, тут все так же просто. И ещё один момент добавляющий кода, это то, что после отбора элемента через BX() нельзя сразу выполнять с ним действия. Необходимо сначала присвоить найденный элемент переменной и дальше работать с этой переменной.
На этом пока все, не забывайте подписываться на новые статьи!
От автора:
Скажу, что были правы, те кто ругал Bitrix AJAX. Мало того, что он сложнее, так ещё и информации в интернете мало. Если код работы с JQuery гулится на раз, то чтобы разобраться с Bitrix и написать это скрипт я потратил 2 часа времени. В официальной документации примеров совсем нет.
Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время. На этом мы рассмотрели все варианты работы с AJAX в Битрикс. В следующих темах я хочу разобраться кешированием (собственно урок Как работает кеш Битрикс уже вышел). Так что обязательно подписывайтесь на рассылку о статьях (в правом сайдбаре) и ждите новых статей будет только интереснее.
Комментарии
Вывод я для себя сделал такой: что если подключен JQuery, то проще пользоваться им сэкономить себе время вот у меня вопрос: а не будет ли штатный функционал, который по дефолту подключается в шапке сайта через ShowHead(); мешать остальному коду типа jQuery, верстке типа CSS Foundation (так как по дефолту в битриксе Бутстрап) и т.п. На сколько помню там подключается и свой JQuery и CSS, которые могут быть старее используемых в верстке.
В платных шаблонах повсеместно используется JQuery и Bottstrap проблем нету. Опять же Bottstrap, который из ядра он не автоматически подключается а через $this->addExternalCss(«/bitrix/css/main/bootstrap.css») в шаблонах компонентов. Т.е. если использовать конкретную версию бутстрапа нужно везде переопределить его и в шаблоне сайта и в шаблонах компонентов.