Как сделать кнопку «в корзину» с Ajax в 1С Битрикс?

Question

[Александр Каплун]

Доброе время суток,

Есть магазин, в catalog.section есть кнопки "в корзину"

<a href="/catalog/<?=$arElement["IBLOCK_SECTION_ID"]?>/?<?=$arParams["ACTION_VARIABLE"]?>=ADD2BASKET&id=<?=$OFFERS['ID']?>" class="btn btn-primary buy_button" rel="nofollow" onclick="return addToCart(this, 'list', '<?=GetMessage("CATALOG_IN_CART")?>', 'noCart');" id="catalog_add2cart_link_<?=$OFFERS['ID']?>"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> В корзину</a>

как сделать так что бы по нажатии на кнопку не перегружалась страница

Говорят есть поддержка Ajax у addToCart но я не могу найти его описание
так же слышал что есть bx.ajax но я не могу понять как его использовать

Answer 1

[Сергей]

В стандартном шаблоне посмотрите реализацию. Там описаны функции добавления аяксом, но если у вас сильно кастомный каталог будет сложно.
Я обычно переделываю стандартный шаблон и проверяю чтобы стандартная кнопка работала, чего сложно добиться, т..к удалив какойнить id то она уже не работает.

Еще такой способ

Comments

[Александр Каплун]

я видел этот пример, но не смог найти где у меня подключение малой корзины, ни в template шаблона, ни в файлах catalog.section

[Сергей]

Александр Каплун: малая корзина - обычно в шапке рапологается, там где пишут "В корзине 5 товаров" типа этого joxi.ru/1A5WeyYhKJgNnm

[Александр Каплун]

Сергей: это я понял, но я не нашел кода ее подключения, обшарил все файлы

[Сергей]

Александр Каплун: Но на сайте то она видна? Включаете режим правки и наводите на эту корзину и далее как тут joxi.ru/Q2K0dVZS9q5DEA Вообще это нужно чтобы обновлять в этой корзине циферки

[Александр Каплун]

Сергей: если глянешь по ссылке сайт, то там корзина в строке меню, и ее код

if ($arItem["DEPTH_LEVEL"]==1){
  	if ($cnt == 1){
  	 echo '<li class="b-menu-horisontal first">';
    }
  	else{
  	  if ($arItem['TEXT'] == 'Корзина'){
    	  $c='';
    	  if ($GLOBALS['cart']){
      	  $c=' b-cart__noth-empty';
    	  }
    	  echo '<li class="b-menu-horisontal last b-cart-menu'.$c.'">';
    	  $arItem['TEXT'].=' <span class="b-mini b-mini-cart">('.$GLOBALS['cart_count'].')</span>';
  	  }
  	  else{
        echo '<li class="b-menu-horisontal">';    	  
  	  }
  	}

[Сергей]

Александр Каплун: Я могу сказать что это пиздец) Вообщем могу еще такой спосом dev.1c-bitrix.ru/support/forum/messages/forum6/top... посоветовать, это правда на отложенный товар, но есть в php файле DELAY => N то будет что добавляется в корзину и он возвращает количество товаров в корзине, которое вы сможете засунуть в

[Сергей]

в span class="b-mini b-mini-cart"

[Александр Каплун]

Сергей: это ты еще весь код шаблона не видел, я в первые такое вижу

[Александр Каплун]

Сергей: может знаешь как работает bx.ajax

[Сергей]

Александр Каплун: https://dev.1c-bitrix.ru/api_help/main/js_lib/ajax... это просто функция, такая же как в jquery. Если на сайте подключен jquery и вы не работать с битриксовым js то используйте jquery

[Александр Каплун]

Сергей: Такое будет работать?

<script>
$(function()
{
    $('body').on('click', 'a.ajax', function(event) // вешаем обработчик на все ссылки, даже созданные после загрузки страницы
    {
        event.preventDefault(); // предотвращаем штатное действие, то есть переход по ссылке
        $.get($(this).attr('href'), function(data) // отправляем GET запрос на href, указанный в ссылке
        {
            console.log(data); // выводим полученные данные в консоль.
        });
    });
});
</script>

[Александр Каплун]

уже понял что из за обработчика onclick такое не прокатит, без него товар добавляет, но так как страница не обновляется корзина показывает что пуста.
Как правильно вынести onclick в отдельный файл и обратится к нему.

[Сергей]

Александр Каплун: Такой же работает для всех ссылок. Попробуйте реализовать из ссылки что дал в последнем сообщении.

[Александр Каплун]

Сергей: я смог заставить скрипт, из первого примера что Вы давали, работать, но он почему то добавляет в корзину два товара, в чем может быть дело?

<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--><nav id="bid" class="navbar">');
                txt = txt[2];
                txt = txt.split('</nav><!--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>

[Сергей]

Александр Каплун: Добавляет один товар joxi.ru/gmv7Z3Xixn73d2

[Александр Каплун]

Сергей: с этим разобрался, а как ты делаешь что бы по кнопки второй раз нельзя было его добавить?

[Сергей]

Александр Каплун: Я так не делаю, всегда можно добавить еще раз, может человек хочет 3 товара, хотя для этого еще бы инпут с количество сделать.
Но если вам нужно то просто поменяйте href на # и измените текст в кнопке или так еще можно stackoverflow.com/questions/2091168/disable-a-link...

[Александр Каплун]

Сергей: я сделал так что бы у меня срабатывал скрипт на ссылки с классом ajax, можно же просто по success удалить этот класс?

[Сергей]

Александр Каплун: Можно, но лучше еще сделать, чтобы нельзя было нажать на нее, если убрать класс, то она будет работать по старому с перезагрузкой страницы

[Александр Каплун]

Сергей: можно ей попутно ссылку грохнуть, я это делал через

<script>jQuery(document).ready(function(){jQuery("'.implode(', ', $arProductsInBasket).'").attr("href", "#").addClass("in_basket").text("В корзине");});</script>

как я понимаю, теперь мне нужно как то запихнуть это в success, но у меня не выходит

[Александр Каплун]

пробую так, не выходит

success: function(out){
   $(this).removeClass('ajax');
   $("#bid").html(getBasketHTML(out));
   alert("Товар добавлен в корзину");
}

[Сергей]

Александр Каплун: $(this) уже не кнопка, а элемент из аякса, Необходимо заранее сделать переменную типа var this_link = $(this) и использовать эту переменную

[Александр Каплун]

Сергей: получилось

Answer 2

[werba]

<button style='width:100%; margin:5px auto;' class="product__btn btn btn--bg-green btn--color-white" type='submit' onclick="$.post('?action=ADD2BASKET&ajax_basket=Y&id=<?=$arItem["ID"]?>&quantity=1', function(data) {
if (data.STATUS == 'OK'){    
BX.onCustomEvent('OnBasketChange');    
}
});">

В корзину

</button>

Comments

[moschenskiy]

У меня заработало только так:

<button class="button-new button-blue" style='width:100%; margin:5px auto; cursor: pointer;' class="product__btn btn btn--bg-green btn--color-white" type='submit' onclick="$.post('<?=$arResult["ADD_URL"]?>&ajax_basket=Y&quantity=1', function(data) {
                    var obj  = JSON.parse(data);
              	    if (obj.STATUS == 'OK'){    
                    BX.onCustomEvent('OnBasketChange');    
                    }
                    });">
В корзину
</button>

[Vasiliyyyy]

А как в этом случае сделать так, чтобы после добавления товара в корзину, вид кнопки изменился или добавился новый класс (типа была белая кнопка с иконкой Добавить в корзину, а после добавления товара в корзину применился бы, либо добавился новый класс (где кнопка уже будет зеленая и с другой иконкой)) И действие на кнопке было уже - перейти в корзину (урл).

Ибо этот код рабочий, спасибо, но нет обратной связи, не понятно вообще добавилось что-то или нет (alert конечно не вариант )), чисто для тестирования )