Доброго времени суток всем, последнюю неделю я чесал затылок, пытаясь разобраться в этой проблеме. В основном я использую в своем приложении библиотеку корзины покупок Codeigniter 3. Поскольку у него есть стандартное добавление в корзину и удаление продуктов из корзины, я попытался пойти на шаг вперед и попытался реализовать кнопку увеличения количества с помощью AJAX, чтобы сделать его еще лучше.

Итак, в моем представлении корзины у меня есть кнопка «минус» (для уменьшения количества на 1), за которой следует ввод, отображающий значение количества, и, наконец, кнопка «плюс» для увеличения количества на 1.

Моя проблема в том, что одна кнопка работает безупречно, а другая просто не работает. Если я изменю свою логику для этой кнопки с минусом, чтобы добавить 1 к количеству вместо вычитания 1, она все равно будет работать, как задумано.

Когда я нажимаю кнопку (add_one_product), мне не удается увеличить мое количество на 1, вместо этого он обновляет мою страницу и выдает мне следующие ошибки в консоли:

  1. [Устарело] Синхронный XMLHttpRequest в основном потоке не рекомендуется из-за его отрицательного воздействия на работу конечного пользователя. Для получения дополнительной помощи посетите https://xhr.spec.whatwg.org/.

  2. [Нарушение] Добавлен непассивный прослушиватель событий для блокирующего прокрутку события touchstart. Чтобы сделать страницу более отзывчивой, можно пометить обработчик событий как «пассивный». См. https://www.chromestatus.com/feature/5745543795965952.

  3. [Нарушение] обработчик загрузки занял 2308 мс.

Я читал о синхронном XHR, ошибках прослушивателя событий с touchstart и т. Д., Но я все еще не могу понять, как это исправить.

Здесь я делюсь своим кодом, надеясь, что кто-то с лучшим глазом и большим опытом, чем я, может помочь указать, чего мне не хватает.

Это мой контроллер:

    function show_cart() {
        $output = '';
        $no = 0;
        foreach ($this->cart->contents() as $items) {
            $no++;
            $output .='
                    <tr>
                        <th class="text-center" scope="row">
                            <div class="row">
                                <div class="col-lg-3 col-md-3 offset-lg-2 offset-md-2 p-0" style="background-image: url('.base_url($items['thumbnail']).'); background-size: cover;">
                                </div>
                                <div class="col-lg-6 col-md-6 p-3" style="text-align:left; margin-left:20px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px; text-transform: uppercase;">
                                    '.$items['name'].'<br><br>
                                    <button type="button" id="'.$items['rowid'].'" class="remove_cart btn  btn-sm px-0" style="font-weight: 700; color: #892826;text-decoration: underline;font-size: 12px;font-family: ProximaNova;letter-spacing: 1px; background-color: white;">Remove</button>
                                </div>
                            </div>
                        </th>
                        <td class="font-weight-bold" style="padding-top: 40px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px;">RM&nbsp'.number_format($items['price'],2).'</td>
                        <td>
                            <div class="input-group w-30" style="padding-top: 25px;">
                                <span class="input-group-btn">
                                    <button type="button" id="'.$items['rowid'].'" class="remove_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-minus"></span>
                                    </button>
                                </span>
                                <input type="text" style="border: 1px solid #892826" name="qty" class="form-control input-number text-center" value="'.$items['qty'].'" min="0" max="100">
                                <span class="input-group-btn">
                                    <button type="button" id="'.$items['rowid'].'" class="add_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        <td class="font-weight-bold" style="padding-top:40px;font-size: 17px;font-family: ProximaNova;letter-spacing: 1px;">RM&nbsp'.number_format($items['subtotal'],2).'</td>
                    </tr>
            ';
        }
            $output .= '
            <tr>
                <th style="width:10%;"></th>
                <td style="width:10%;"></td>
                <td style="width:10%;"></td>
                <td style="width:70%;"><h3 style="margin-right: 60px; font-size: 24px; font-weight:bold;margin-top:5px;font-family: ProximaNova;letter-spacing: 1px;">'.'TOTAL: RM '.number_format($this->cart->total(),2).'</h3></td>
            </tr>
            ';
        return $output;
    }

    function add_one_product() {

        $rowid = $this->input->post('row_id');
        $cart=$this->cart->contents();

        foreach ($cart as $items) {
            if($rowid == $items['rowid']){
                $qty = $items['qty'];
            }
        }

        $data = array(
            'rowid' => $rowid,
            'qty' => $qty + 1,
        );
        $this->cart->update($data);
        echo $this->show_cart();
    }

    function remove_one_product() {

        $rowid = $this->input->post('row_id');
        $cart=$this->cart->contents();

        foreach ($cart as $items) {
            if($rowid == $items['rowid']){
                $qty = $items['qty'];
            }
        }

        $data = array(
            'rowid' => $rowid,
            'qty' => $qty - 1,
        );
        $this->cart->update($data);
        echo $this->show_cart();
    }

На этом этапе кнопки и функции с классами и именами add_one_product и remove_one_product идентичны, за исключением соглашения об именах и операции + 1 против -1, которую он выполняет для количества продуктов в корзине.

В функции show_cart также вызываются кнопки, и, чтобы улучшить видимость, я снова скопирую их здесь:

<div class="input-group w-30" style="padding-top: 25px;">
  <span class="input-group-btn">
    <button type="button" id="'.$items['rowid'].'" class="remove_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-minus"></span>
    </button>
  </span>
  <input type="text" style="border: 1px solid #892826" name="qty" class="form-control input-number text-center" value="'.$items['qty'].'" min="0" max="100">
  <span class="input-group-btn">
    <button type="button" id="'.$items['rowid'].'" class="add_one_product btn btn-default btn-number" style="border: 1px solid #892826; color: white; background: #892826;"><span class="glyphicon glyphicon-plus"></span>
    </button>
  </span>
</div>

И, наконец, в нижнем колонтитуле jquery:

  $(document).ready(function(){
    $(document).on('click','.remove_one_product',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/remove_one_product');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
          $('#cart-counter').load(location.href + " #cart-counter");
          $('#nav-tab').load(location.href + " #nav-tab");
          $('#nav-home-tab').load(location.href + " #nav-home-tab");
          $('#nav-profile-tab').load(location.href + " #nav-profile-tab");
        }
      });
    });
  });

  $(document).ready(function(){
    $(document).on('click','.add_one_product',function(){
      var row_id=$(this).attr("id");
      $.ajax({
        url : "<?php echo base_url('products/add_one_product');?>",
        method : "POST",
        data : {row_id : row_id},
        success :function(data){
          $('#product_detail_cart').html(data);
          $('#cart-counter').load(location.href + " #cart-counter");
          $('#nav-tab').load(location.href + " #nav-tab");
          $('#nav-home-tab').load(location.href + " #nav-home-tab");
          $('#nav-profile-tab').load(location.href + " #nav-profile-tab");
        }
      });
    });
  });

Я понимаю, что это длинный пост, спасибо тем, кто нашел время, чтобы его прочитать. Приветствуется любая помощь и конструктивная критика.

0
HarisM 1 Дек 2020 в 12:16

1 ответ

Лучший ответ

Это одна из самых глупых ошибок, которые я допустил до сих пор, и я думаю, что обязательно сделаю еще больше в будущем, но чтобы помочь спасти всех, у кого есть аналогичная проблема, моя проблема заключалась в том, что я написал конфигурацию для remove_one_product, но я забыл написать то же самое для add_one_product.

< EM> Facepalm

0
HarisM 1 Дек 2020 в 10:30