Alax корзина в каталоге Битрикс

 7648| 0 Автор: Михаил Базаров (КамуфляЖ)

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

Создаем файл 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

Предыдущая запись Следующая запись

Еще в записках: Popup полоска на сайте. SEO новинки в 14-ой версии Битрикс Вывести товары из того же раздела в карточке товара

Все заметки

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

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Категории блога

Предложить заметку

Для публикации, в этой записной книжке.

Сейчас на сайте:

и 4 гостей

Из стран: 2 чел. 1 чел. 1 чел.

Случайные заметки из блога

Табы из свойств инфоблока в Битрикс
Думаю все знают что такое табы или вкладки. Расскажу как на ...

Подключение SSL на Битрикс виртуальная машина
Для некоторых сервисов, типа Яндекс Касса, требуется наличие...

Дополнительные картинки в списке элементов каталога битрикс
Очень редко, но бывают ситуации, когда надо вывести дополнительные...

Умный фильтр на главной странице Битрикс
Достаточно редкая но востребованная задачка- это вывести компонент...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс
Достаточно часто, при проверке параметров системы, в Битрикс,...

Ускорение сайта Битрикс на ubuntu server, Memcached.
До сегодняшнего дня арендовал виртуальный сервер в Германии ...

Свежие комментарии в блоге

Материалы по теме в новостях Битрикс, с картинкой, названием и текстом анонса.
[QUOTE][USER=1631]Интересующийся многим[/USER] пишет: Михаил, добрый день! что-то ссылка [url]http...
22.07.2017 / Михаил Базаров

Всплывающее окно с формой обратной связи Битрикс
Подскажите почему может не работать скрипт BX.ajax.onload_943827 = function() { setTime...
19.07.2017 / Рима Уколова

Вывести товары из того же раздела в карточке товара
Михаил, скажите пожалуйста, этот метод еще актуален? Никак не могу передать ни id ни символьный код,...
19.07.2017 / Алексей Сель

Панель управления хостином VESTA и 1С Битрикс, базовая оптимизация
Здравствуйте, Михаил. Постоянно вылетает ошибка БД при создании рез.копии битрикс. Создавал виртуалк...
14.07.2017 / Сергей Стефанович

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

AJAX корзина без перезагрузки всей страницы

Категории блога

Случайные заметки из блога

Свежие комментарии в блоге