Кнопки плюс минус количества товара в JoomShopping 5

Стандартный элемент ввода количества товаров в JoomShopping 5 — это обычное числовое поле. Хотя оно функционально, с точки зрения UX его можно значительно улучшить. Сегодня мы заменим его на современный с кнопками "+" и "-", который стал уже стандартом в интернет-магазинах.

Ищем участок кода в файле /components/com_jshopping/templates/default/product/product_default.php:

<div class="prod_qty_input">
<input type="<?php print $this->prod_qty_input_type?>" name="quantity" id="quantity" oninput="jshop.reloadPrices();" class="inputbox" value="<?php print $this->default_count_product?>" min="0" ><?php print $this->_tmp_qty_unit;?>
</div>

Заменяем на новый:

<div class="prod_qty_input qty-with-buttons">
    <span onclick="var qty_el = document.getElementById('quantity'); var qty = qty_el.value; if(!isNaN(qty) && qty > 1) qty_el.value--; jshop.reloadPrices(); return false;" class="quantity-minus">−</span>
    <input type="<?php print $this->prod_qty_input_type?>"name="quantity" id="quantity" onkeyup="jshop.reloadPrices();" class="inputbox" value="<?php print $this->default_count_product?>"min="0" style="width: 50px; text-align: center;">
    <span onclick="var qty_el = document.getElementById('quantity'); var qty = qty_el.value; if(!isNaN(qty)) qty_el.value++; jshop.reloadPrices(); return false;" class="quantity-plus">+</span>
    <?php print $this->_tmp_qty_unit; ?>
</div>

Добавляем стили кнопок:

.prod_qty_input.qty-with-buttons {
    display: inline-flex;
    align-items: center;
}
.quantity-minus, .quantity-plus {
    cursor: pointer;
    padding: 5px 12px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    user-select: none;
    font-weight: bold;
}
.quantity-minus {
    border-right: none;
    border-radius: 3px 0 0 3px;
}
.quantity-plus {
    border-left: none;
    border-radius: 0 3px 3px 0;
}
.quantity-text input {
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    height: 31px;
    padding: 0;
}

Код уже протестирован и работает с JoomShopping 5.