Как вывести выбор количества в категории товаров 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"><</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">></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;}
Советую эти стили поправить под ваш шаблон, это самый минимальный (не самый модный) набор для функционирования данного блока.
