Opencart
CMS Opencart. Добавляем плюс минус в поле количество товара в карточке товара.

Добрый день!

Я сегодня пишу свой первый пост, надеюсь никто не закидает меня камнями… Недавно наткнулся на интересную статью и решил ее перевести для вас. Да и для себя оставить, как заметку для использования в дальнейшем. Речь пойдет о том, как добавить плюс и минус в поле количество товара на странице товара.

Поле с количеством товара выводится html тегом input, в данное поле на данный момент вводится количество товара благодаря клавиатуре. А сейчас мы это исправим, добавив плюс и минус.

Для внедрения данного функционала нам потребуется править следующие файлы шаблона CMS Opencart:

  1. catalog/view/theme/имя-шаблона/template/common/header.tpl
  2. catalog/view/theme/имя-шаблона/template/product/product.tpl
  3. catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css

Внимание! Перед работай обязательно, делайте резервные копии файлов.

Выше перечислены файлы, которые мы будем редактировать, как они перечислены, так и будем править. Поехали:

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

<div> <?php echo $text_qty; ?>
<input type="text" name="quantity" size="2"
value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2"
value="<?php echo $product_id; ?>" /> &nbsp;
<input type="button" value="<?php echo $button_cart; ?>
" id="button-cart" class="button" />
<span>&nbsp;&nbsp;<?php echo $text_or; ?>&nbsp;&nbsp;</span>
<span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');">
<?php echo $button_wishlist; ?></a><br />
<a onclick="addToCompare('<?php echo $product_id; ?>');">
<?php echo $button_compare; ?> </a> </span> </div> 

В выше приведенном коде нам нужна по сути только данная строка:

<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />

и заменяем её на:

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

После выше описанных действий, у вас должно получится следующее:

Сейчас наши плюс и минус не кликабельны, но это не надолго ведь мы преступаем к следующему шагу.

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/имя-шаблона/stylesheet/stylesheet.css и добавляем нашемуinput нужные стили. В используемом мною шаблоне я задал следующие стили:

.my_quantity {
margin: 0 20px 0 0 !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
width: 100px!important;
float: left;
border: 1px solid #E0E0E0 !important;
padding: 2px 0 2px 7px;
}
.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;
}
.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: 11px !important;
background: #388BBE;
color: #fff !important;
}

А вот и результат:

Как я и писал, вы можете использовать свой стиль кнопок минус и плюс. По Сути дела данный скрипт вы можете применить не только для CMS Opencart, но и для любой другой, где есть поле ввода input.

Задавайте вопросы!

13.05.2015 23:16
18866

8 комментариев

14.05.2015 16:13
Отличная статья, у меня все получилось! Спасибо:)
Андрей
21.10.2015 02:15
+1
В выше приведенном коде нам нужна по сути только данная строка:

/>

не эта.

<input type=«text» name=«quantity» size=«2»
value="<?php echo $minimum; ?>" />

вот эта
22.10.2015 13:35
Да все верно, опечатка при написании. Спасибо, что сообщили нам.
Андрей
13.05.2016 23:30
+1
Во второй строке кода для замены надо убрать лишние символы ( */ )
А в остальном спасибо за подсказку. У себя добавил, работает!
PS
Моя строка для замены выглядела так:
/>
Андрей
13.05.2016 23:31
+1
Во второй строке стилей
16.05.2016 19:43
Спасибо, поправил.
Данный символ все равно не влиял бы ни на что. Но все же плюс за внимательность!
snya
09.08.2016 14:33
подскажите, как сделать + — в самой корзине?
Max
28.11.2016 02:35
Подскажите, как ограничить, чтобы нельзя было плюсовать больше, чем есть на складе?
Загрузка...