Количество увеличения / уменьшения количества в WooCommerce с использованием jQuery

Question

Я использую следующее для добавления кнопок + и - в мой магазин WooCommerce. Он работает, за исключением того, что после нажатия он изменит каждое количество товара в корзине, а не только указанный товар c. Я не могу решить это.

Вот HTML:

<div class="quantity">
<label for="quantity5432">Quantity</label>
<input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>

<div class="quantity-nav">
<div class="quantity-button add-action add-up">+</div>
<div class="quantity-button add-action add-down">-</div>
</div>

А вот jQuery

$(document).ready(function() {
  const minus = $('.add-down');
  const plus = $('.add-up');
  const input = $('.qty');
  minus.click(function(e) {
    e.preventDefault();
    var value = input.val();
    if (value > 1) {
      value--;
    }
    input.val(value);
  });

  plus.click(function(e) {
    e.preventDefault();
    var value = input.val();
    value++;
    input.val(value);
  })
});```

Answer 1

Вы можете настроить свой сценарий так, чтобы он указывал на указанный c вход для класса .qty, выбрав этот вход в минусе и добавив click() событий в зависимости от местоположения щелчка.

$(document).ready(function() {
  const minus = $('.add-down');
  const plus = $('.add-up');
  minus.click(function(e) {
    e.preventDefault();
    const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
    var value = input.val();
    if (value > 1) {
      value--;
    }
    input.val(value);
  });

  plus.click(function(e) {
    e.preventDefault();
    const input = $(this).closest(".quantity-nav").prev(".quantity").find(".qty");
    var value = input.val();
    value++;
    input.val(value);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
  <label for="quantity5432">Quantity</label>
  <input type="number" id="quantity5432" class="qty" step="1" min="0" name="cart[73d][qty]" value="0">
</div>
<div class="quantity-nav">
  <div class="quantity-button add-action add-up">+</div>
  <div class="quantity-button add-action add-down">-</div>
</div>
<div class="quantity">
  <label for="quantity5433">Quantity</label>
  <input type="number" id="quantity5433" class="qty" step="1" min="0" name="cart[73e][qty]" value="0">
</div>

<div class="quantity-nav">
  <div class="quantity-button add-action add-up">+</div>
  <div class="quantity-button add-action add-down">-</div>
</div>