Как сделать добавление нескольких элементов в корзину на кастомном input?

Question

[Егор Довыденко]

Здравствуйте. Не понимаю в чём причина.
Есть числовой input для выбора количества единиц товара для добавления в корзину. Пример на странице товара: ТУТ
Сделал кастомные кнопки + и - единиц.
Стандартные скрыл путём css:

.infocard__btn .quantity input[type=number]::-webkit-inner-spin-button,
.infocard__btn .quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.infocard__btn .quantity input[type=number]{
  -moz-appearance: textfield;
}

Пока закомментил этот код, чтобы Вы понимали смысл проблемы.
При нажатии на + или - значение input меняется, как и при работе со стандартными стрелками:


Но! При добавлении в корзину учитываются только значения, добавленные стрелками. Если же вводить количество посредствам + или -, в корзину добавляется только 1 единица товара. Как настроить нормальное добавление через + и -?

Comments

[Стефан]

Скиньте js работы с кнопками

[Егор Довыденко]

MEDIOFF,

<button class="number-minus" type="button" onclick="this.nextElementSibling.stepDown(); this.nextElementSibling.onchange();">-</button> 
<input type="number" class="input input--quantity inputQuantity" value="1" min="1" max="999">
<button class="number-plus" type="button" onclick="this.previousElementSibling.stepUp(); this.previousElementSibling.onchange();">+</button>

Answer 1

[Стефан]

Во первых,прочитай что делает функция stepUp() и stepDown(), во вторых - this.previousElementSibling.onchange() - не функция, и консоль вам об этом кричит, в третих - напиши нормальный код, что то типо такого:

const inp = document.querySelector("input");
const buttons = document.querySelectorAll("button");

inp.addEventListener("change", () => {
  console.log(inp.value);
});

buttons.forEach((btn, i) => {
  if (i === 0) {
    btn.addEventListener("click", () => {
      inp.value = Number(inp.value) - 1;
    });
  } else {
    btn.addEventListener("click", () => {
      inp.value = Number(inp.value) + 1;
    });
  }
});

Answer 2

[Владислав Черненко]

У кнопки "Добавить в корзину" есть data-quantity="", нужно его менять при смене значения в Input-е.
Что-то типа такого:

$(".woocommerce").on("change input", ".quantity .qty", function() {
    var add_to_cart_button = $(this).parents( ".catalog-item" ).find(".add_to_cart_button");
    add_to_cart_button.data("quantity", $(this).val());
    add_to_cart_button.attr("href", "?add-to-cart=" + add_to_cart_button.attr("data-product_id") + "&quantity=" + $(this).val());
    add_to_cart_button.attr("data-quantity", $(this).val());
});