Opencart 2 кнопки «+» и «-» количества

В стандартном шаблоне Opencart 2 в карточке товара, количество товара предлагается вводить с клавиатуры, что на мой взгляд не очень удобно и красиво. Сегодня мы добавим возможность ввода количества заказываемого товара нажатием кнопок + и — в карточке товара и таким же способом изменять количество отобранного к заказу товара в корзине. Вот так это выглядит сначала:

Карточка товара

Корзина:

1. Добавляем стили для отрисовки кнопок в файле /public_html/catalog/view/theme/default/stylesheet/stylesheet.css в конце файла дописываем:

/* + и - добавляем */
	
.my_quantity {
margin: 0px 10px 0px 0 !important; 
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 2px !important;
width: 120px!important;
float: none;
border: 1px solid #E0E0E0 !important;
padding: 2px 0 6px 10px;
}
.quant {
background: none !important;
border: 0px solid #E0E0E0 !important;
border-left: medium none;
border-right: medium none;
display: inline;
height: 15px;
line-height: 21px;
margin: 0;
padding: 0 5px;
text-align: center;
vertical-align: middle;
width: 42px;
font-weight: bold;
}
.my_minus {
padding: 0px 7px 1px 8px;
}
.my_plus {
padding: 0px 6px 1px 6px;
}
.my_minus, .my_plus {
position: relative;
display: inline;
height: 21px;
width: 21px;
line-height: 18px;
margin: 0;
vertical-align: middle;
border: none;
box-shadow: none;
font-weight: normal;
cursor: pointer;
-webkit-border-radius: 11px !important;
-moz-border-radius: 11px !important;
-ms-border-radius: 11px !important;
-o-border-radius: 11px !important;
border-radius: 2px !important;
background: #b619d7;
color: #fff !important;
}

2. Открываем файл catalog/view/theme/имя-шаблона/template/common/header.tpl и подключаем скрипт для работы добавленных кнопок «+ и -, перед закрывающим тегом </head>:

<script type="text/javascript" >
$(document).ready(function() {
$('.my_minus').click(function () {
var $input = $(this).parent().find('.quant');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.my_plus').click(function () {
var $input = $(this).parent().find('.quant');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
</script>

3. Открываем файл catalog/view/theme/default/template/product/product.tpl и находим строки с выводом поля для ввода количества, добавления в закладки и сравнения, с кодом кнопки «Купить», ищем строку:

<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />

Меняем ее на код:

<div class="my_quantity"> 
<span class="my_minus">-</span>
<input type="text" name="quantity" class="quant" value="1" size="5" id="input-quantity"class="form-control"/>
<span class="my_plus">+</span>
</div>

4. Теперь займемся корзиной, /public_html/catalog/view/theme/default/template/checkout/cart.tpl ищем:

<input type="text" name="quantity[<?php echo $product['cart_id']; ?>]" value="<?php echo $product['quantity']; ?>" size="1" class="form-control" />

и заменяем на строки:

<div class="my_quantity"> 
<span class="my_minus">-</span>
<input type="text" name="quantity[<?php echo $product['cart_id']; ?>]" class="quant" value ="<?php echo $product['quantity']; ?>" size="5" id="input-quantity"class="form-control"/>
<span class="my_plus">+</span>
</div>

После этого карточка товара выглядит так:

Корзина:

На мой взгляд более дружелюбно.

Посмотреть можно на сайте.