Меню

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

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

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

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

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:
Спасибо большое за данную статью! Всё работает
Сергей Шарапов:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Михаил Базаров:
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
Сергей Шарапов:
Цитата
Михаил Базаров пишет:
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
так работает, спасибо, а как правильно переделывать стандартные шаблоны где все это уже и так работает (на своем битриксовском коде), дело в том, что если я делаю свой шаблон, соблюдаю те же селекторы, но ниче не работает, есть какой то универсальный метод создания шаблона, чтобы и функциональность оставалась (та что ajax) ???
Тарасов Максим:
Все хорошо работает, но проблема в том что Add2BasketByProductID не добавляет скидку товара. Сам обработчик пришлось немного переписать
Константин:
Михаил добрый день! Все сделал вроде как по вашей инструкции. Товар добавляется без перезагрузки страницы. но справа вертится битриксовская всплывашка "загрузка". В какую сторону копать? Пробовал тоже самое проделать с торговыми предложениями в catalog.element, ничего не добавляется совсем, пишет "выбран товар".  

Стоимость и сроки разработки сайтов и приложений

Окончательная стоимость и сроки разработки сайта формируются после обсуждения деталей на этапе заказа. Как правило, они редко выходят за обозначенные ниже рамки.

Интернет-магазин: индивидуальная разработка от 350 000 руб.
от 5-ти недель

Cоздание интернет-магазина на 1С-Битрикс. Разработка с нуля, оптимизация кода и производительности под конкретный проект и требования. Реализация любого функционала без ограничений готовых решений.

Интернет-магазин: на готовом решении от 60 000 руб.
от 7-ми дней

Готовое решение — вариант для тех, кто не хочет тратить много средств на индивидуальный проект, и не имеет серьезных требований к сайту. Магазин, быстро запускается на базе одного из 200-та готовых решений

Мобильное приложение от 400 000 руб.
от 1-го месяца

Разработка кроссплатформенного мобильного приложения, которое не уступает нативным решениям как в производительности, так и пользовательском опыте. Публикуется в AppStore, GooglePlay и RuStore

Опросник на разработку. После ознакомления, задам уточняющие вопросы и оценю проект по стоимости и срокам разработки.