Bitrix подарки sale.gift.basket аяксом Часть 2.

Здесь появляется возможность добавить подарок в корзину аяксом, без перехода на сам товар.

Для этого в карточках выведем кнопку «Выбрать», добавим к нему урл и навесим обработчик, к-й аяксом добавит товар в корзину, отрисует позицию и пересчитает всю  сумму.  Согласитесь, не трудно же?

1. Находим в шаблоне sale.gift.basket кнопку BUY_LINK. Добавляем класс add_to_basket ссыль


href="action=add&id=<? echo $arItem['ID']; ?>

Стоит заметить, что кнопок там будет 2 — одна товар, 2-я — торговое предложение.

2. Шаблон компонента sale.basket.basket, script.js Переходим в нашу ф-ю gift_ajax(). Биндим на эти кнопки с классом add_to_basket события клик, но с таймаутом. Таймаут, т.к. подарки добавляются не сразу, нужна задержка.


   setTimeout(function(){
                $('.add_to_basket').on('click', function(ev){
                    ev.preventDefault()
                    var that = this
                    BX.ajax({
                        url: '/local/templates/mytemplate1/components/bitrix/sale.basket.basket/temp1/add_gift_ajax.php?' + $(this).attr('href'),
                        method: 'get',
                        onsuccess: function(resp){
                          ...

3. При клике будет происходить 2-й аякс на файл add_gift_ajax.php. Создаем его. Код есть в гитхабе. Там просто добавляется наш подарок в корзину


        if($_GET['id'] != '' && $_GET['action'] == 'add'){
            $basketID = Add2BasketByProductID($_GET['id'], 1);

4. После получения ответа и добавления подарка в корзину, отрисовываем его. В моем случае корзина была в хлам кастомная, и таблица там сильно отличалась от стандартной. Поэтому вставлять строку с товаром стандартным методом updateBasketTable() не канало. Я написал отд. ф-ю addRowGift, к-я вставляла строку с подменой id, name, price и прочих данных. Чтобы строка с товаром была рабочей(кнопки удалить, плюсануть кол-во). Тут немного надо повозиться с кавычками.
Если таблица стандартная, делаем так.


                        onsuccess: function(resp){
                             postData = {
                            'basketItemId': resp.basketID,
                            'sessid': BX.bitrix_sessid(),
                            'site_id': BX.message('SITE_ID'),
                            // 'props': property_values,
                            'action_var': 'action',
                            'action': 'select_item',
                            'select_props': BX('column_headers').value,
                            'offers_props': BX('offers_props').value,
                            'quantity_float': BX('quantity_float').value,
                            'count_discount_4_all_quantity': BX('count_discount_4_all_quantity').value,
                            'price_vat_show_value': BX('price_vat_show_value').value,
                            'hide_coupon': BX('hide_coupon').value,
                            'use_prepayment': BX('use_prepayment').value
                            }    
                            // если кастомная таблица
                            addRowGift(that, resp)
                            // если стандартная, надо получить данные строки таблицы в нужном формате. 
                            BX.ajax({
                                url: '/bitrix/components/bitrix/sale.basket.basket/ajax.php',
                                method: 'POST',
                                data: postData,
                                dataType: 'json',
                                onsuccess: function(result)
                                {
                                    // result.DELETE_ORIGINAL = 'N'
                                     updateBasketTable(resp.basketID, result)
                                },
                                onerror: function(err){
                                    console.log(2)
                                    console.log(err)
                                }
                            });
                        },


И моя ф-я добавления

function addRowGift(el, result){
    $("#basket_items").prepend('<tr id="'+ result.basketID +'" data-elementid="'+ result.basketID +'" data-elementname="'+ $(el).data('name') +'">    <td>        <input type="checkbox" name="DELETE_'+ result.basketID +'" id="DELETE_'+ result.basketID +'" value="Y">    </td>    <td class="picture ">        <img alt="" class="outline" src="'+ $(el).data('src') +'" style="width: 160px;height: 106px;">                                                                </td>    <td class="item">        <a target="_blank" class="item-name product-name1" href="/spalnye_prinadlezhnosti/podushka/podushka_dekorativnaya_smile/">                            '+ $(el).data('name') +'                                       </a>        <!-- свойства -->        <ul class="sku-props">            <!-- <li>Декор : <span class="fa fa-check"></span></li> -->        </ul>        <br>    </td>    <td class="empty-col">      '+ $(el).data('discount') +'%    </td>    <td class="quantity custom ">        <span class="minus js-minus fa fa-minus"></span>        <input disabled="" type="text" maxlength="2" class="quantity_number js-quantity form-control" size="2" value="1" id="QUANTITY_INPUT_'+ result.basketID +'" name="QUANTITY_INPUT_'+ result.basketID +'" data-ratio="1" onchange="updateQuantity(\'QUANTITY_INPUT_'+result.basketID+'\', '+result.basketID+', 1, false)">        <span class="plus js-plus fa fa-plus"></span>        <input type="hidden" id="QUANTITY_'+ result.basketID +'" name="QUANTITY_'+ result.basketID +'" value="1">    </td>    <td class="custom summa" id="sum_'+ result.basketID +'">        '+ $(el).data('price') +' </td>    <td class="control">        <a class="aprimary text-nowrap delete-item" data-id="'+result.basketID+'" href="/cart/?action=delete&amp;id='+result.basketID+'">          <span class="fa fa-times"></span>        </a><br>    </td></tr>')
   // пересчитать сумму    
   recalcBasketAjax({})
}

Leave a comment

Your email address will not be published.


*