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

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

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

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

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

Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 55236 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 7033 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... Спойлер в списке новостей Битрикс Просмотров: 12178 Иногда нужно сделать спойлеры в копонентах Битрикс, в основном конечно, имеет смысл при оч... Хостинг панель BrainyCp: оптимизация под 1С-битрикс Просмотров: 8131 В этой видео-заметке расскажу как установить и оптимизировать панель управления сервером B... Отфильтровать новости в Битрикс за заданный период Просмотров: 16690 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Заполнить картинки разделов каталога из картинок товаров Просмотров: 944 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Простые калькуляторы в карточке товара каталога на Битрикс Просмотров: 16174 На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварител... Ускорение работы сайта на 1С-Битрикс Просмотров: 17734 Данная статья написана специально под видеоролик (приложен в конце статьи), опубликованный... Очистить брошенные корзины с помощью API 1С-Битрикс Просмотров: 1121 Задача: в интернет-магазине накапливается большое количество брошенных корзин, нужно их оч... Заполнить свойство инфоблока ценой из торгового каталога Просмотров: 5090 Если вам по какой-то причине нужно скопировать цену товара в свойство этого же инфоблока. ... Определить местоположение пользователя и показать магазины поблизости... Просмотров: 1831 Задача: в мобильном приложении, которое открывает сайт на 1С-Битрикс внутри себя, нужно оп... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 18106 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит... Вывод элементов с помощью API битрикс Просмотров: 23961 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап... Вывести компонент новостей на страницу в Битрикс Просмотров: 65106 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Установка вебсервера на Apple M1 (нативный ARM стек), оптимизированны... Просмотров: 7405 Появилась задачка, установить стек MAMP (macOS, Apache, MYSQL, PHP) на рабочий ноутбук с п... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14905 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Самодельная форма добавления элемента на API Битрикс Просмотров: 45276 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Вывести артикул в печатную форму бланка заказа Просмотров: 1073 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Вывести разделы инфоблока в которых находится элемент Битрикс Просмотров: 17017 Если нужно в карточке товара или новости, вывести структуру разделов в котором находится э... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 1693 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д...