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

Здравствуйте. Не понимаю в чём причина.
Есть числовой 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 меняется, как и при работе со стандартными стрелками:
10djgs2

Но! При добавлении в корзину учитываются только значения, добавленные стрелками. Если же вводить количество посредствам + или -, в корзину добавляется только 1 единица товара. Как настроить нормальное добавление через + и -?
  • Вопрос задан
  • 50 просмотров
Решения вопроса 1
@MEDIOFF
Python Developer
Во первых,прочитай что делает функция 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;
    });
  }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vladchv
@vladchv
WordPress Developer
У кнопки "Добавить в корзину" есть 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());
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы