22 Мая 2018

Урок 12. AJAX запрос средствами JQuery в Bitrix

Приветствую, читатели моих статей. В этом уроке я продолжу рассматривать технологию AJAX. Если вы помните, то в Уроке 10. AJAX корзина Битрикс своими руками я показал самый простой вариант использования AJAX, без JQuery через JavaScript объект XMLHttpRequest. В этой статье мы усложним или наоборот упростим решения и воспользуемся библиотекой JQueryК тому же в последнем шаблоне, который я сверстал в Уроке 11 эта библиотека подключена по умолчанию.
Работать мы будем на странице каталога в шаблоне списка товаров.

Каталог Electro

За вывод каталога в нашем интернет-магазине отвечает шаблон компонента bitrix:news.list. Файл находится по пути local/templates/electro/components/bitrix/news/catalog-electro/bitrix/news.list/.default/template.php. В нем мы и будем работать. Точнее из него мы будем брать селекторы для JQuery. А работать мы будем в файле script.js, который необходимо расположить рядом с файлом template.php. В таком случае скрипт подключится автоматически.

Код:
$(document).ready(function() { // по завершению загрузки страницы
$('.add-to-cart-btn').click(function() { // вешаем на клик по элементу с class = 'add-to-cart-btn'
const id = this.id; //Получаем ID товара
$.post('/startshop.ru/personal/cart/index.php', {id:id, kol:1}, function(result) { // отправляем post запрос
$('#count-cart').text(result); //Записываем цифру в элемент корзины в верстке
alert('Товар добавлен в корзину'); //Сообщение
});
});
});

Код совсем небольшой. В первой строке мы дожидаемся события полной загрузки страницы и после этого вешаем обработчик события нажатия на кнопки с классом .add-to-cart-btn. Это как раз кнопки Добавить в корзину. В переменной this у JavaScript хранится текущий объект над которым произведено действия и следующей строкой мы получаем ID этого объекта. Затем выполняется сам POST запрос.
$.post('url.php', date, function(result){}) первым параметром передается путь к файлу PHP, который будет обрабатывать вызов на сервере. Вторым параметром передаются произвольные данные. В нашем случае это значение параметров в виде объекта {id:id, kol:1}. Третьим параметром передается функция, которая будет обрабатывать ответ сервера в случае успешного исхода. В параметре этой функции в переменной result у нас будет хранится ответ PHP скрипта.
В предпоследней строке мы задаем текст для вывода в корзине. Количество подобранных товаров выводится в блоке с id="count-cart". А в последней показываем сообщение об успешной операции.

Теперь нужно внести небольшие правки в шаблоны, чтобы скрипт корректно заработал.
Первое нужно добавить id для кнопки. В файле template.php дополните строку вывода кнопки параметром id="<?=$item['ID']?>" .
Код:
<button id="<?=$item['ID']?>" class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>Купить</button>

А второе в шапке сайта в фале header.php нужно задать id="count-cart" блока вывода корзины, чтобы точно его идентифицировать.

Код:
<div id="count-cart" class="qty"></div>

После этого наш скрипт уже будет работать.

И остается один момент, чтобы количество товаров в корзине отображалось на всех страницах сразу при открытии страницы. Для этого нужно с помощью PHP обратится к сессии BX_CART и получить сохраненное в ней значение. Это мы сделаем в том же файле header.php добавив PHP вызов в строку вывода количества в корзине.

Код:
<div id="count-cart" class="qty"><?=count($_SESSION['BX_CART']);?></div>

Моя корзина


Вот на этом точно все.
Скачать шаблон можно по следующей ссылке: ссылка на шаблон.

От автора:
В этом уроке мы рассмотрели реализацию корзина и AJAX запроса с помощью библиотеки JQuery. Работа с JQuery на мой взгляд проще чем с нативным JavaScript. Хотя чтобы понимать, как работает AJAX технология обязательно посмотрите Урок 11 на эту тему. В следующих планах у меня реализовать этот же AJAX запрос только с помощью Bitrix AJAX. Библиотеку Битрикс не жалуют разработчики, но познакомится с ней нужно. А также в моих планах досконально разобраться с кешированием в Битрикс и наверное это будет даже серия статей. Так что подписывайтесь, чтобы не пропустить следующие статьи. До новых встреч.

Комментарии

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


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