Ajax добавление в корзину на «Битрикс» для непрограммистов

Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.

Приступаем к рассказу о многочисленных особенностях работы с Ajax в «Битрикс». Сегодня мы покажем, как организовать добавление товара в корзину и обновление корзины при помощи jQuery.

1. Подключим jQuery

Найдем файл header.php по пути /bitrix/templates/ваш_шаблон/header.php и между <head> и </head> добавим код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2. Добавим скрипт взаимодействия с корзиной

Сразу после кода вызова jQuery добавим код:

<script type="text/javascript">
$(document).ready(
function(){
buy_btns = $('a[href*="ADD2BASKET"]');
buy_btns.each(
function(){
$(this).attr("rel", $(this).attr("href"));
}
);
buy_btns.attr("href","javascript:void(0);");
function getBasketHTML(html)
{
txt = html.split('<div id="bid">');
txt = txt[2];
txt = txt.split('</div>');
txt = txt[0];
return txt;
}

            $('a[rel*="ADD2BASKET"]').click(
function(){
$.ajax({
type: "GET",
url: $(this).attr("rel"),
dataType: "html",
success: function(out){
$("#bid").html(getBasketHTML(out));
alert("Товар добавлен в корзину");
}

                    });
}
);

}
);

</script>

3. Организуем модернизированный вывод корзины

Находим вывод компонента корзины и заключаем его в блок

<div id="bid"> </div>

Пример:

<div id="bid">
<?
$APPLICATION->IncludeComponent("bitrix:sale.basket.basket.small", "basket_small", Array(
"PATH_TO_BASKET" => "/personal/basket/",   // Страница корзины
"PATH_TO_ORDER" => "/personal/order/",   // Страница оформления заказа
),
false
);
?>
</div>

Готово!

-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!

Назад в раздел

Подписаться на новые материалы раздела:

Загрузка...