Как вывести выбор количества в категории товаров Opencart 2

CMS Opencart 2.x

В некоторых интернет-магазинах важно, чтоб выбор количества товаров был не только на странице карточки товара, но и в категории (в группах товаров). Это актуально для сайтов, которые занимаются продажей оптом. Для магазинов, которые, как правило, продают не по одному товару (например, для интернет-магазинов товаров для маникюра или художников).

Также очень важно, чтоб покупатель мог добавлять количество товара не в простом текстовом поле, а с помощью кнопок «+» «-«. Особенно это актуально для мобильных пользователей.

Итак, начнем.

Добавляем выбор товара на страницу категорий товаров Opencart 2

Открываем контроллер категории:

catalog/controller/product/category.php

Находим строку:

$data['products'][] = array(

Сразу после неё добавляем:

'quantity' => $result['quantity'], 'minimum' => $result['minimum'],

Открываем файл шаблона категории:

catalog/view/theme/тема/template/product/category.tpl

Где «тема» — это название шаблона вашего магазина. Если используется стандартная тема, то «тема» = «default».

Находим строку (отвечающую за вывод блока с кнопками «купить», сравнение и добавление в избранное):

<div class="button-group">

И перед ней добавляем вывод поля количества:

<div class="quantity_div"> <span class="minus">&lt;</span> <input type="text" name="quantity" class="quantity_input" size="2" value="<?php echo $product['minimum']; ?>" data-maximum="<?php echo $product['quantity']; ?>" /> <span class="plus">&gt;</span> </div>

Далее находим код js, который отвечает за добавление товара в корзину:

onclick="cart.add('<?php echo $product['product_id']; ?>');"

Меняем всю эту конструкцию на:

onclick="cart.add('<?php echo $product['product_id']; ?>', $(this).parent().parent().find('.quantity_input').val());"

Теперь открываем шаблон подвала сайта и добавляем туда js код, который будет отвечать за корректную работу кнопок «+» «-«:

catalog/view/theme/тема/template/common/footer.tpl

«тема» — используемый шаблон магазина

Находим строку:

</body>

И сразу после неё добавляем:

<script> function quantity_control() { $('.quantity_input').each(function() { $(this).attr('readonly', 'readonly'); var minimum = $(this).val(); var maximum = $(this).attr('data-maximum'); if(maximum <= 0) { $(this).val('0'); $(this).parent().parent().find('.button-group').children().first().attr('disabled', 'disabled'); if ($('.form-group').length !=0) { $(this).parent().parent().find('#button-cart').attr('disabled', 'disabled'); } var text = 'данный товар закончился.'; } else { var text = 'данного товара осталось всего ' + maximum + ' шт!' } $(this).next().click(function () { if ((~~$(this).prev().val()+ ~~minimum) <= ~~maximum) { $(this).prev().val(~~$(this).prev().val()+ ~~minimum); } else { if ($(this).parent().find('.stock_warning').length ==0) { $(this).parent().append($('<span class="stock_warning">На нашем складе ' + text + '</span>').fadeIn()); } $(this).parent().find('.stock_warning').fadeIn().delay('2000').fadeOut(); } }); $(this).prev().click(function () { if ($(this).next().val() > ~~minimum) { $(this).next().val(~~$(this).next().val()- ~~minimum); } }); }); } $(document).ready(function() { quantity_control(); }); </script>

Осталось только добавить стили наших кнопок.

Открываем файл:

catalog/view/theme/тема/stylesheet/stylesheet.css

«тема» — используемый шаблон магазина

И в самый конец добавляем:

.quantity_div {display:block; width:80px; height:26px; position:relative; padding:0; text-align:center; margin: 10px auto; line-height:normal!important;}
 .form-group .quantity_div {display:inline-block; vertical-align:middle;}
 .quantity_input {text-align:center; width:28px; height:24px !important; margin:0 -3px !important; border:solid 1px #d2d2d2 !important; border-radius:0 !important; box-shadow:inset 1px 1px 1px #ddd; background:#fff !important; color:#555 !important; font-family:Arial;}
 .plus, .minus {display:inline-block; vertical-align:top; height:24px !important; padding:3px 5px 3px !important; color:#888; border:solid 1px #d2d2d2; background:#fff;}
 .minus{border-radius:3px 0 0 3px; border-right:none;} .plus{border-radius:0 3px 3px 0; border-left:none;}
.stock_warning {position:absolute; z-index:999; left:-49px; bottom:35px; width:180px !important; padding:10px !important; background:#fefefe; background: linear-gradient(to bottom, #fefefe 0%, #f0f0f0 100%); box-shadow: 1px 1px 10px #ddd; line-height:15px; border:solid 1px #ddd; border-radius:10px; display:block; color:#f00 !important; font-size:12px;}

Советую эти стили поправить под ваш шаблон, это самый минимальный (не самый модный) набор для функционирования данного блока.