Главная » 1С-Битрикс » 1С-Битрикс: Ajax корзина

1С-Битрикс: Ajax корзина

Рассмотрим реализацию добавления товаров в корзину без видимой для пользователя перезагрузки страницы. Этот метод применим как для обычной корзины, так и для мини корзины.

1. Подключаем библиотеку jquery в шапке шаблона или компонента:
а) обычный метод:

<script type="text/javascript" language="javascript" 
src="<?=SITE_TEMPLATE_PATH?>/js/jquery-1.8.2.min.js"></script>

или

б) встроенную в битрикс:

<?CJSCore::Init(array("jquery"));?>

Туда же подключаем forms и jgrowl, отвечающие за модальные окна:

<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/my_add2basket.php?RND='+Math.random(),
 type: "POST",
 target: '#container_basket',
 success:
 function(responseText) {
 $.jGrowl("Товар добавлен в корзину");
 }
 };
 $(".add_form").ajaxForm(options);
 }
 );
</script>

2. В шаблоне списка элементов выставляем форму добавления товаров:

<form action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data" class="add_form">
 <a 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--;">&minus;</a> 
 <input type="text" name="<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>" value="1" size="3" id="<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>"> 
 <a href="javascript:void(0)" onclick="BX('<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>').value++;">&plus;</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 class="BtnBuy" type="submit" id="link2card<?=$arElement['ID']?>" name="<?echo $arParams["ACTION_VARIABLE"]."ADD2BASKET"?>" value="Добавить" onfocus="if (this.value == 'Добавить') this.value = 'Добавлен';"/>
</form>

3. Там где выводится корзина, обертываем ее в блок:

<div id="container_basket"></div>

получим:

<div id="container_basket">
<?$APPLICATION->IncludeComponent("bitrix:sale.basket.basket.small", 
 ".default", 
 array(
 "PATH_TO_BASKET" => "/personal/basket.php",
 "PATH_TO_ORDER" => "/personal/order/make/",
 "SHOW_DELAY" => "Y",
 "SHOW_NOTAVAIL" => "Y",
 "SHOW_SUBSCRIBE" => "Y"
 ),
 false
);?>
</div>

4. Создаем файл my_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", 
 ".default", 
 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");
?>

и помещаем его в директорию /catalog/, собственно, можно поместить его куда угодно, но прописать тогда в скрипте ваш путь.

При перепубликации активная ссылка на этот блог обязательна.
Поблагодарить автора 🙂
 руб.



«
➤