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

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

Все готово, Посмотреть на результат работы можно здесь: Сайт компании Ультра ЖБИ

Написано на основе: dev.1c-bitrix.ru

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

Цены на разработку сайта или приложения

Что бы узнать точные стоимость и срок разработки:
достаточно, как можно подробнее, заполнить опросник и выслать на электронную почту info@bazarow.ru.
После ознакомления, смогу задать уточняющие вопросы и оценить.

В стоимость разработки уже включены и не требуют доплат:
  • Лицензия на необходимую редакцию 1С-Битрикс: Управление сайтом и лицензии на дополнительные модули, если требуются для конкретного проекта.
  • Применение технологии композитный сайт: Оптимизация скорости работы проекта под нагрузками.
  • Один год, бесплатной, технической поддержки от 1С-Битрикс
Интернет-магазин от 250 000 рублей
Полно-комплексная разработка интернет-магазина любой сложности. Интеграция с 1С, службами доставки и оплаты. Внутренняя СЕО оптимизация перед запуском.
Сайт компании от 200 000 рублей
Сайт с каталогом товаров или услуг, без функционала магазина. Включает формы обратной связи внутри карточек каталога. Любое количество статичных и динамичных разделов.
Инфоресурс от 200 000 рублей
Портал или доска объявлений с большим количеством разделов. Возможность включения форумов, блогов, регистрации пользователей, внутри сайтовая социальная сеть.
Сайт на готовом решении от 40 000 рублей
Подбор решения из более 200-от готовых сайтов, в соответствии с тематикой бизнеса. Запуск сайта на сервере или хостинге, со всеми настройками. Не большие доработки под задачу.
Мобильное приложение от 200 000 рублей

Кроме сайтов, занимаюсь разработкой мобильных приложений на технологии Apache Cordova. Это полноценные приложения, которые публикуются и распостранияются через официальные магазины GooglePlay и AppStore

  • Полная интеграция с базой данных, основного сайта.
  • Вывод каталогов продукции и услуг, прямо в приложении.
  • Персональные разделы пользователей с историей заказов.
  • Прямой доступ к устройству: GPS, камера, звонки и медиабиблиотека

attention