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

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

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

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