Телеграм: @camouf_ru Почта: mihail@bazarow.ru

AJAX корзина с отправкой количества из раздела каталога

Просмотров: 19124

Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При этом, у пользователя должна быть возможность указатьь количество товара и отправить в корзину. Так как таблица достаточно большая, необходимо было реализовать добавление товара в заказ без перезагрузки страницы. Решение нашлось в блогах Битрикс. Немного систематизирую, так как нашел не критичные опечатки в оригинале.

Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При этом, у пользователя должна быть возможность указать количество товара и отправить в корзину. Так как таблица достаточно большая, необходимо было реализовать добавление товара в заказ без перезагрузки страницы. Стандартный AJAX битрикс не подошел, так как фактически перезагружает страницу целиком, а потом вырезает корзину.

Необходимые файлы: скачать

AJAX корзина без перезагрузки всей страницы

Итак, имеем вот такой дизайн для каталога интернет-магазина, предположим, что мы уже все сверстали и настроили, осталось только реализовать AJAX корзину:

Находим часть кода шаблона, который отвечает за покупку товара: форма ввода количества и кнопка В заказ. Добавляем класс сlass="add_form для типовой формы, должно получиться вот так:

<form action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data" class="add_form"> 
 	<a class="MinusList" href="javascript:void(0)" onclick="if (BX('<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>').value &gt; 1) BX('<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>').value--;">-</a> 
 	<input type="text" name="<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?>" value="1" id="<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>"> 
 	<a class="PlusList" href="javascript:void(0)" onclick="BX('<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>').value++;">+</a>	 
 	<input type="hidden" name="<?echo $arParams["ACTION_VARIABLE"]?>" value="BUY"> 
 	<input type="hidden" name="<?echo $arParams["PRODUCT_ID_VARIABLE"]?>" value="<?echo $arElement["ID"]?>"> 
 	<input type="submit" name="<?echo $arParams["ACTION_VARIABLE"]."BUY"?>" value="Купить" style="display:none;"> 
 	<input type="submit" id="link2card<?=$arElement['ID']?>" name="<?echo $arParams["ACTION_VARIABLE"]."ADD2BASKET"?>" value="Добавить" onfocus="if (this.value == 'Добавить') this.value = '✔Добавлен';"/> 
 </form> 
 

Подключаем необходимые скрипты и AJAX обработчик формы, в шаблоне каталога или в шаблоне сайта (лучше в каталоге- с точки зрения оптимизации ресурсов):

<script type="text/javascript" language="javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.form.js"></script> 
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.jgrowl.min.js"></script> 
<link rel="stylesheet" type="text/css" href="<?=SITE_TEMPLATE_PATH?>/js/jquery.jgrowl.css" media="screen" /> 
 <script> 
 $(document).ready( 
 function() 
 { 
   var options = { 
     url: '/catalog/add2basket.php?RND='+Math.random(), 
     type: "POST", 
     target: '#basket-container', 
     success: 
     function(responseText) { 
     $.jGrowl("Товар добавлен в заказ"); 
   }
 }; 
 $(".add_form").ajaxForm(options); 
 }
 );
 </script>
 

Создаем файл add2basket.php в разделе каталога catalog/add2basket.php - разместить можно где угодно, это для примера. И в этот файл размещаем данный код:

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php"); 
if (CModule::IncludeModule("sale") && CModule::IncludeModule("catalog")) { 
  if (isset($_POST['id']) && isset($_POST['QUANTITY'])) { 
    $PRODUCT_ID = intval($_POST['id']); 
    $QUANTITY = intval($_POST['QUANTITY']); 
    Add2BasketByProductID( $PRODUCT_ID, $QUANTITY ); 
  } else { 
    echo "Нет параметров"
  } 
} else { 
  echo "Не подключены модули"
} 
$APPLICATION->IncludeComponent("bitrix:sale.basket.basket.small", "bottom_basket", array( 
  "PATH_TO_BASKET" => "/personal/basket.php", 
  "PATH_TO_ORDER" => "/personal/order/make/", 
  "SHOW_DELAY" => "Y", 
  "SHOW_NOTAVAIL" => "Y", 
  "SHOW_SUBSCRIBE" => "Y" 
), 
false 
); 
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php"); 
?>

Обворачиваем малую корзину, где бы она у вас не была, в id="basket-container"

<div id="basket-container"> 
<?$APPLICATION->IncludeComponent("bitrix:sale.basket.basket.small", "bottom_basket", array( 
  "PATH_TO_BASKET" => "/personal/basket.php", 
  "PATH_TO_ORDER" => "/personal/order/make/", 
  "SHOW_DELAY" => "Y", 
  "SHOW_NOTAVAIL" => "Y", 
  "SHOW_SUBSCRIBE" => "Y" 
), 
false 
);?> 
</div> 
Kube 28.09.2017
Спасибо большое за данную статью! Всё работает
Сергей Шарапов 16.12.2017
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Михаил Базаров 16.12.2017
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
Сергей Шарапов 16.12.2017
Цитата
Михаил Базаров пишет:
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
так работает, спасибо, а как правильно переделывать стандартные шаблоны где все это уже и так работает (на своем битриксовском коде), дело в том, что если я делаю свой шаблон, соблюдаю те же селекторы, но ниче не работает, есть какой то универсальный метод создания шаблона, чтобы и функциональность оставалась (та что ajax) ???
Тарасов Максим 02.07.2019
Все хорошо работает, но проблема в том что Add2BasketByProductID не добавляет скидку товара. Сам обработчик пришлось немного переписать
Константин 12.11.2021
Михаил добрый день! Все сделал вроде как по вашей инструкции. Товар добавляется без перезагрузки страницы. но справа вертится битриксовская всплывашка "загрузка". В какую сторону копать? Пробовал тоже самое проделать с торговыми предложениями в catalog.element, ничего не добавляется совсем, пишет "выбран товар".  

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Настройка прав доступа в 1С-Битрикс Просмотров: 7544 Часто, в интернет-магазине под управлением 1С Битрикс, нужно создать группу пользователей ... Вывести артикул в печатную форму бланка заказа Просмотров: 385 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1542 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Помечаем новинки лейблом в каталоге битрикс Просмотров: 20036 Достаточно часто, при разработке каталога товаров или интернет магазина на системе управле... Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс Просмотров: 15306 Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36701 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Дополнительные картинки в новостях Битрикс, почти фотогалерея. Просмотров: 48048 Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Деталь... Ajax форма обратной связи, реализация в битрикс Просмотров: 7577 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Получение местоположений через API Битрикс c поиском по select. Просмотров: 21328 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би... Пошагово получить информацию о заказах и сохранить как Excel (xls) Просмотров: 535 Задача: Нужно получить информацию о заказах с возможностью указания даты создания "от"" и ... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 5720 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... Старые шаблоны битрикс для простой верстки Просмотров: 16916 Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии ... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20203 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Глобальные фильтры на всякие случаи жизни Просмотров: 44563 Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива... Простой WEB сервер на ubuntu, для Битрикс Просмотров: 34478 Расскажу как по быстрому сконфигурировать WEB сервер для работы с Битрикс. Безо всяких ngi... FTP доступ на Виртуальной машине Битрикс Просмотров: 15919 Бывает что нужно открыть FTP доступ к заранее известной папке на сайте под управлением 1С ... Список новостей с автопрокруткой через overflow:scroll Просмотров: 5615 Простенький javascript позволит сделать автопрокрутку в шаблоне списка новостей. Достаточн... Почтовое событие на создание нового элемента инфоблока, через API Просмотров: 14341 Иногда при разработке сайта требуется реализовать функционал добавления элементов инфоблок... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 9456 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Отсортировать элементы в Битрикс по свойству привязка к разделам Просмотров: 27916 При создании достаточно сложных интернет-магазинов на Битрикс, иногда встает задача помимо...