Как сделать счётчик товаров + — в карточке товара minishop?

Question

[Windramix]

Есть стандартный вывод

<div class="input-group">
       <input type="number" name="count" id="product_price" class="form-control col-md-6" value="1"/>
 </div>

Задача сделать её в таком виде


Пытался найти статью связанное с этой задачей, но нашёл только как сделать её в корзине

Comments

[Александр Васильев]

надо вешать события клика на "+" и "-" , для изменения значения в этом input, с условием значения не менее 1.
стрелки input number скрывать как-то так

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]:focus,
input[type=number]:hover {
    -moz-appearance: number-input
}

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

Answer 1

[Антон Тарасов]

Такой компонент видели? https://modstore.pro/packages/integration/msmcd
Можно посмотреть как устроен, или сделать по аналогии

Comments

[Windramix]

спасибо посмотрю

Answer 2

[Danny Arty]

Обычная верстка + немного js.
Добавляешь две кнопки, обязательно указав у них атрибут type="button" и вешаешь в js слушатель клика. По клику меняешь значение в инпуте и триггеришь событие change. Все.

Comments

[Windramix]

Да уже это понял что можно так сделать, осталось теперь найти мне js готовый просто в нём я не очень =)

<div class="btn-count">
                        <span class="input-group-btn">
                            <button type="button" class="btn-number btn-minus" disabled="disabled" data-type="minus">-</button>
                        </span>
                        <input type="text" name="count" id="count-108" class="form-control input-number" value="1" data-min="1" data-max="99999999">
                        <span class="input-group-btn">
                            <button type="button" class="btn-number btn-plus" data-type="plus">+</button>
                        </span>
                    </div>

Получилось у меня вот это найти и оно работает, только плюсики пока не работают осталось js

[Danny Arty]

Windramix, нативный js или jquery?

[Windramix]

Danny Arty, Попробовал сделать на jq но всё плохо, пытаюсь что-то найти на js

[Danny Arty]

Windramix,

$(document).ready(function() {
    $(document).on('click', '.btn-number', function() {
        let field = $(this).closest('.btn-count').find('input[name="count"]'),
            fieldVal = parseInt(field.val());      

        if ($(this).hasClass('btn-minus')) {
            if (fieldVal == 0) {return;}
            else {
                field.val(fieldVal - 1)
            }
        } else {
            field.val(fieldVal + 1)
        }
        field.trigger('change');
    });
});

[Windramix]

Danny Arty,

[Danny Arty]

Windramix, поправил

[Windramix]

Danny Arty, cпасибо работает!!!

Мы с товарищем дошли до вот такого js

const inp = document.querySelector("input-number")
let result = inp.value;


const increment = document.getElementById("btn-minus")
const decrement = document.getElementById('btn-plus')


increment.addEventListener("click", function(){
    result = Number(inp.value) + 1;
    inp.value = result
})

decrement.addEventListener('click', function(){
    result = Number(inp.value) - 1;
    inp.value = result
})

Но он почему-то не работает... если его в отдельном проекте сделать то всё норм=) а тут он не хочет получать изначальное значение с input по этому он не понимает что к нему прибавлять или уменьшать.

В общем ваш вариант поставил точку в этом вопросе =)

[Danny Arty]

Windramix, возможно потому, что у вас несколько инпутов с таким классом на странице и он выбирает первый. На деле нужно вешать слушатель на каждый, то бишь в цикле.