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

Автору на кофе и печеньки!
  • Через Яндекс деньги
  • С банковской карты
  • С мобильного
Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Kube
Спасибо большое за данную статью! Всё работает
Сергей Шарапов
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Михаил Базаров
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
Сергей Шарапов
Цитата
Михаил Базаров пишет:
Цитата
Сергей Шарапов написал:
почему то не работает, сделал все как сказано, но при ajax ответ приходит Нет параметров, без ajax работает, почему мб так, я подозреваю что не отрабатывает плагин ajaxForm
Проверьте что бы из формы улетал параметр с количеством- именно QUANTITY (все заглавными), задать можно в настройках компонента каталога
так работает, спасибо, а как правильно переделывать стандартные шаблоны где все это уже и так работает (на своем битриксовском коде), дело в том, что если я делаю свой шаблон, соблюдаю те же селекторы, но ниче не работает, есть какой то универсальный метод создания шаблона, чтобы и функциональность оставалась (та что ajax) ???

Решение битрикс маркетплейс- бесплатно

© 2011—2018 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.
Сайт предназначен, для пользователей возрастом 21+

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

Информация размещенная на сайте, не является публичной офертой.
Политика конфеденциальности