Увеличение / уменьшение количества при нажатии кнопки с использованием JavaScript - PullRequest
Новая
       10

Увеличение / уменьшение количества при нажатии кнопки с использованием JavaScript

0 голосов
/ 10 июня 2018

Попытка использовать JavaScript для увеличения / уменьшения количества при нажатии кнопки.

JavaScript уже был написан (и работает), в результате чего новое значение может быть введено в текстовое поле, а значение в текстовом поле отражаетновое значение и общее количество обновлений (в зависимости от цены * количество).

Сценарий для вышеупомянутого: 

<script>
  (function() {
    const className = document.querySelectorAll('.quantity-no')

    Array.from(className).forEach(function(element) {
      element.addEventListener('change', function() {
        const id = element.getAttribute('data-id')

        axios.patch(`/cart/${id}`, {
          quantity: this.value
        })

        .then(function (response) {
          // console.log(response);
          window.location.href = '{{ route('cart.index') }}'
        })

        .catch(function (error) {
          // console.log(error);
          window.location.href = '{{ route('cart.index') }}'
        });
      })
    })
  })();
</script>

Кнопки увеличения / уменьшения обновляют значение в текстовом поле, но изменяютколичество не отражается в сумме (на основе цены * количество).

Код для вышеупомянутого: 

<script>
  function decrementQuantity(qty, rowId) {
    var inputQuantityNo = $('.quantity-no' + rowId);
    var newQuantity = parseInt($(inputQuantityNo).val()) - 1;

    axios.patch(`/cart/${id}`, {
      quantity: newQuantity.value
    })

    .then(function (response) {
      window.location.href = '{{ route('cart.index') }}'
    })

    .catch(function (error) {
      window.location.href = '{{ route('cart.index') }}'
    });
  }
</script>

Я не удосужился написать сценарий для приращения.

Вот другой применимый код: 

<div class="col-2">
 <div class="quantity d-flex align-items-center">
  <div class="dec-btn" onclick="decrementQuantity($item->qty, $item->rowId)"> - </div>
  <input type="text" value="{{ $item->qty }}" class="quantity-no" data-id="{{ $item->rowId }}">
  <div class="inc-btn" onclick="incrementQuantity($item->qty, $item->rowId"> + </div>
 </div>
</div>
...