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. Библиотеку Битрикс не жалуют разработчики, но познакомится с ней нужно. А также в моих планах досконально разобраться с кешированием в Битрикс и наверное это будет даже серия статей. Так что подписывайтесь, чтобы не пропустить следующие статьи. До новых встреч.

Комментарии

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

Спасибо за уроки! Давно искал такой сайт.

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

Здравствуйте. Спасибо за уроки по Битрикс. У меня возник вопрос по модальным окнам с использованием бутстрап. Т.е. есть готовая верстка на бутстрапе, там используются модальные окна. Эту верстку надо посадить на Битрикс. И вот застрял на моменте с модальными окнами. Нигде информации толком не нашел. В модальных окнах должна отображаться детальная новость (после клика на краткую из списка новостей). Как я понимаю, тут без ajax не обойтись. Не могли бы вы подсказать, как решить этот вопрос? Спасибо. Можно на почту ответить.

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

Здравствуйте. Смотрите, без ajax тут да, не обойтись. Я думаю есть 2 пути: 1. Это создать php файл, в котором будет запрос к детальной информации GetList. И возврат данных обратно. Через ajax запрос обратится к этому файлу и получить данные детальной новости. А затем их передать в модальное окно бутстрап, т.е. вместо текста там переменные JS будут. Т.е. это все будет внутри скрипта на JS. 2. Битрикс сам умеет делать ajax подгрузку шаблонов компонентов. И если в компоненте bitrix.news включить поддержку ajax, а в шаблоне детальной новости сделать нужную верстку, то будет открыта детальная страница без перезагрузки.

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


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