Рассмотрим реализацию добавления товаров в корзину без видимой для пользователя перезагрузки страницы. Этот метод применим как для обычной корзины, так и для мини корзины.
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 > 1) BX('<?echo $arParams["PRODUCT_QUANTITY_VARIABLE"]?><?=$arElement['ID']?>').value--;">−</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++;">+</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/, собственно, можно поместить его куда угодно, но прописать тогда в скрипте ваш путь.