Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
то ждем ваше обращение в нашей службе тех поддержки.
Приступаем к рассказу о многочисленных особенностях работы с 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('<!--start--><div id="bid">');
txt = txt[2];
txt = txt.split('</div><!--end-->');
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. Организуем модернизированный вывод корзины
Находим вывод компонента корзины и заключаем его в блок
<!--start--><div id="bid"> </div><!--end-->
Пример:
<!--start--><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><!--end-->
Готово!
-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!
Назад в раздел
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('<!--start--><div id="bid">');
txt = txt[2];
txt = txt.split('</div><!--end-->');
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. Организуем модернизированный вывод корзины
Находим вывод компонента корзины и заключаем его в блок
<!--start--><div id="bid"> </div><!--end-->
Пример:
<!--start--><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><!--end-->
Готово!
-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!
Назад в раздел
Подписаться на новые материалы раздела:
