+7 495 008 8452
Ajax добавление в корзину
Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Да и мне лично не нравится библиотека от Битрикса. И использую я всегда jQuery.
У нас на форумах сообщений по данной теме достаточно много, но там надо лезть в исходный код и писать скрипт под свою верстку, создавать отдельный файл с компонентом корзины и т.д. Я же предлагаю универсальный метод. Все действия будут описаны ниже, они включают в себя:
1. подключение библиотеки jQuery в header.php
2. обертка компонента корзины в тэг
и все!
Сразу поясню, данный метод чисто мои задумки на универсальность, сам я его не использую, а пишу обновление корзины под каждый конкретный случай верстки и т.д.
Итак приступим:
1. подключаем jQuery, для этого открываем файл /bitrix/templates/ваш_шаблон/header.php и между <head> и </head> вставляем код:
или просто скачиваем библиотеку и поключаем локально.
сразу после подключения вставляем такой код:
2. теперь обновим маленькую корзину. Для этого нужно обернуть вызов компонента нашей корзины. Находим где она подлючается и оборачиваем в <!--start--><div id="bid"> </div><!--end-->. Примерно это будет выглядеть так:
Все! Проверяйте, должно все работать!
А теперь разбор полетов:
тут мы разом заменяем все сслыки на добавление товара в корзину. Но ссылка нам еще понадобится, копируем ее в атрибут rel. Плюс в том, что если у кого то отключен JS, все будет работать по старому!
Теперь при клике по ссылке посылаем запрос к этой же странице на добавление товара в корзину. Тут минус - страница срабатывает полностью, но без видимой перезагрузки. Тоесть для пользователя все прозрачно.
И самый извращенный момент вырезать из html кода, который нам пришел от Ajax запроса, обновленное тело корзины:
тут мы режем html и, обратите внимание, берем элемент массива с индексом 2, потому что в этой функции мы тоже использовали <!--start--><div id="bid"> и первый раз split разрежет по ней. Можно использовать рег. выражения, но я сделал так.
Вариант для добавления товара в корзину с указанием количества(для стандартного шаблона).
Вот и все. Cпасибо за внимание.
Назад в раздел
то ждем ваше обращение в нашей службе тех поддержки.
|
Источник: http://dev.1c-bitrix.ru/community/webdev/user/51651/blog/2095/ |
Ajax добавление в корзину и обновление корзины с помощью jQuery в два шага. Универсальный вариант для НЕ программистов.
Итак. Множество людей, которые имеют магазин на Битриксе, хотят сделать добавление в корзину без перезагрузки страницы, не включая режим AJAX у компонентов catalog (Это страшно!).Да и мне лично не нравится библиотека от Битрикса. И использую я всегда jQuery.
У нас на форумах сообщений по данной теме достаточно много, но там надо лезть в исходный код и писать скрипт под свою верстку, создавать отдельный файл с компонентом корзины и т.д. Я же предлагаю универсальный метод. Все действия будут описаны ниже, они включают в себя:
1. подключение библиотеки jQuery в header.php
2. обертка компонента корзины в тэг
и все!
Сразу поясню, данный метод чисто мои задумки на универсальность, сам я его не использую, а пишу обновление корзины под каждый конкретный случай верстки и т.д.
Итак приступим:
1. подключаем jQuery, для этого открываем файл /bitrix/templates/ваш_шаблон/header.php и между <head> и </head> вставляем код:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> |
или просто скачиваем библиотеку и поключаем локально.
сразу после подключения вставляем такой код:
<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>
|
2. теперь обновим маленькую корзину. Для этого нужно обернуть вызов компонента нашей корзины. Находим где она подлючается и оборачиваем в <!--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-->
|
Все! Проверяйте, должно все работать!
А теперь разбор полетов:
buy_btns = $('a[href*="ADD2BASKET"]');
buy_btns.each(
function(){
$(this).attr("rel", $(this).attr("href"));
}
);
buy_btns.attr("href","javascript:void(0);");
|
тут мы разом заменяем все сслыки на добавление товара в корзину. Но ссылка нам еще понадобится, копируем ее в атрибут rel. Плюс в том, что если у кого то отключен JS, все будет работать по старому!
$('a[rel*="ADD2BASKET"]').click(
function(){
$.ajax({
type: "GET",
url: $(this).attr("rel"),
dataType: "html",
success: function(out){
$("#bid").html(getBasketHTML(out));
alert("Товар добавлен в корзину");
}
});
}
);
|
Теперь при клике по ссылке посылаем запрос к этой же странице на добавление товара в корзину. Тут минус - страница срабатывает полностью, но без видимой перезагрузки. Тоесть для пользователя все прозрачно.
И самый извращенный момент вырезать из html кода, который нам пришел от Ajax запроса, обновленное тело корзины:
function getBasketHTML(html)
{
txt = html.split('<!--start--><div id="bid">');
txt = txt[2];
txt = txt.split('</div><!--end-->');
txt = txt[0];
return txt;
}
|
тут мы режем html и, обратите внимание, берем элемент массива с индексом 2, потому что в этой функции мы тоже использовали <!--start--><div id="bid"> и первый раз split разрежет по ней. Можно использовать рег. выражения, но я сделал так.
Вариант для добавления товара в корзину с указанием количества(для стандартного шаблона).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
function getBasketHTML(html)
{
txt = html.split('<!--start--><div id="bid">');
txt = txt[2];
txt = txt.split('</div><!--end-->');
txt = txt[0];
return txt;
}
$('input[name*="actionADD2BASKET"]').click(
function(){
parent = $(this).parent();
quantity_val = $('input[name*=quantity]').attr('value'); // quantity - имя input-а для ввода количества товара, задается в настройках компонента
id_val = $('input[name*=id]').attr('value'); // id - имя input-а c id товара
$.ajax({
type: "post",
url: parent.attr('action'),
data: {quantity: quantity_val, id: id_val, actionADD2BASKET: 'В корзину', action: "BUY"},
dataType: "html",
success: function(out){
$("#bid").html(getBasketHTML(out));
}
});
return false;
}
);
}
);
</script>
<!--start--><div id="bid">
<?$APPLICATION->IncludeComponent(
"bitrix:sale.basket.basket.small",
"",
Array(
"PATH_TO_BASKET" => "/personal/basket.php",
"PATH_TO_ORDER" => "/personal/order.php"
),
false
);?>
</div><!--end-->
|
Вот и все. Cпасибо за внимание.
Назад в раздел
Подписаться на новые материалы раздела:
Загрузка...