Ajax добавление в корзину

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

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. теперь обновим маленькую корзину. Для этого нужно обернуть вызов компонента нашей корзины. Находим где она подлючается и оборачиваем в <div id="bid"> </div>. Примерно это будет выглядеть так:

<!--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, потому что в этой функции мы тоже использовали <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пасибо за внимание.

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

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

Загрузка...