OpenCart — поле количества товара в карточке товара — добавляем плюс и минус
В процессе работы над последним магазином (wordpress + woocommerce) столкнулась с пожеланием заказчика сделать выбор количества товара с использованием кнопок «плюс» и «минус». Что же, заказчик хочет, надо делать. Итак, для реализации желаемого, воспользовалась вот этим методом, с использованием своих классов и стилей.
Давайте же попробуем придать полю «Количество» немного иной вид и функционал и в магазине на OpenCart — добавим ему кнопки «плюс и минус». По умолчанию, данное поле — простой input, в который вводим количество с помощью клавиатуры, нет ни стрелочек, ни плюсов с минусами, ни выпадающего списка с вариантами количества. В общем, простое поле для ручного ввода количества.
Для работы нам потребуются следующие файлы шаблона:
catalog/view/theme/имя-шаблона/template/common/header.tpl
catalog/view/theme/имя-шаблона/template/product/product.tpl
catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css
1. Открываем файл catalog/view/theme/имя-шаблона/template/product/product.tpl и находим строки с выводом поля для ввода кол-ва, добавления в закладки и сравнения, с кодом кнопки «Купить»:
|
1 2 3 4 5 6 7 8 9 |
<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; ?>" /> <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> <span> <?php echo $text_or; ?> </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> |
и меняем его на
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div><?php //echo $text_qty; ?> <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> <input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" /> <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> <span> <?php echo $text_or; ?> </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> |
Привожу весь код целиком для удобства правки, в действительности же, меняется всего одна строка
|
1 |
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" /> |
на
|
1 2 3 4 5 |
<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>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
При этом не забудьте сменить классы в скрипте (.quant, .my_minus, .my_plus), если вы изменили их на свои в product.tpl. Если первый код размещали без изменений, то и в скрипте ничего менять не надо.
3. Открываем файл со стилями — catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css и добавляем нашему инпуту нужные стили. В используемом мною шаблоне я задала следующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.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; } |
В последнем блоке добавленных стилей (.my_minus, .my_plus) Вы можете изменить цвет кнопок, высоту поля, закругленность углов.
В итоге, в магазине заказчика на WordPress, поле количества приобрело нужный вид
На OpenCart (все действия производила на версии 1.5.6.4, но версия не столь важна, важен сам принцип) получилась следующая картина
Естественно, стандартного inputa для ввода количества вполне достаточно, но не редко же хочется чего-то эдакого, как-то да выделить свой магазин. В общем, кому идея пришлась по душе, дерзайте и не забудьте поделиться идеей с другими — комментарии и лайки приветствуются :)
Здравствуйте.Я как раз искал такое.У меня продуктовый магазин и удобно добавлять товар таким способом.У меня вопрос а пойдет для Ostore 1.5.5.1.2 ?
Добрый день,
уверенна, что и на ocstore пойдет, главное внимательно подходите к коду.
У меня на третьем коде все встало.Не могу изменить ни размер ни цвет.Если даже его(код)удаляю.+ — работает,но цвет серый.Какая моя ошибка.Я добавлял этот код в input.
Дайте ссылку на товар, где Вы реализовали «плюс/минус», посмотрю.
А я все назад восстановил
Вот ссылка опять попробовал сделать. https://pokupajdoma.com/detskie-tovary/sredstva-gigieny/vlazhnye-salfetki-aura-antibakterialnye-20-sht.html
И еще у меня появилось в закладки или в сравнение.А у вас такого нет.
Посмотрела Вашу карточку товара, не обнаружила стилей, которые Вы задали кнопкам, поэтому они и отображаются по умолчанию серым цветом, так как всем span в карточке товара задан серый цвет. Пропишите стили, чтобы было видно, что там не так стало.
А что касается закладок и сравнений, то видимо, Вы копировали весь код целиком, но до этого у Вас не было строк с выводом закладок и в сравнения или они были закомментированы (шаблон шаблону рознь). Если Вам не нужны в магазине закладки и сравнения, то из первого кода уберите строки
Спасибо большое .буду разбираться
Удачи в настройке!
Спасибо! отличное решение! работает на 155512
скажите, а как такое же сделать в корзине для покупок, там тот же input остался
Отличный сайт, нашел его недавно, Вы весьма и весьма помогаете в изучении и настройке своего сайта.
На данный момент стоит задача, с которой к сожалению не получается справиться из-за отсутствия некоторых базовых знаний. Так вот, не могу сделать возможным покупку товара равную 2-ум единицам, с минимальным кол-вом все понятно, с выпадающим списком вместо ручного вбивания в карточке товара тоже понятно(это не устраивает), однако хотелось бы реализовать возможность нажатия на + или — , что бы добавлялось или уменьшалось каждый раз на 2 единицы, исходя из этого хотелось бы что бы и в модулях типа «акции» , «рекомендации» при нажатии на кнопку купить, в корзину автоматически добавлялось каждый раз 2 единицы товара. Однако, данная функция, нужна лишь для определенной группы товаров, в других случаях, единица товара должна остаться.
В общем, сижу, разбираюсь, копаю код, буду рад, если Вы чем-нибудь поможете в решении данной задачи! Спасибо за ценный ресурс!
Получилось. Великолепные инструкции. Пойду разбираться, как такую же красоту добавить в корзину.
Спасибо за отзыв!
Не подскажете, что нужно сделать, чтобы кнопки заработали в корзине? Картинки появились. Но, вероятно, надо подправить еще что-то, чтобы они стали работать. Как я понимаю, скрипт должен работать на все файлы, так как он в head. Буду благодарна.
Юленька, Вы — прелесть. Спасибо большое, очень выручили!!!
Спасибо за позитивный комментарий!))
Здравствуйте подскажите пожалуйста,было все в порядке с полем ввода количества товара.Было удобного размера, видно было цифры которые вводищь.Что то изменил и теперь цифры как будто урезаны:( Подскажите как исправить проблему?
Здравствуйте подскажите пожалуйста,было все в порядке с полем ввода количества товара.Было удобного размера, видно было цифры которые вводищь.Что то изменил и теперь цифры как будто урезаны:( Подскажите как исправить проблему?Вот к примеру здесь https://stroymarket-online.com.ua/lakokrasochnie_materiali/gruntuyuchaya_kraska/ceresit-2119
Вижу, Вы вопрос уже решили.
Все круто! У меня сторонний шаблон, движок opencart 2.0.0.1 , решение однозначно рабочее, плюс,минус выводится в карточке товара, стили меняются, но вот не хочет он подключаться в header.tpl, ни как, что делать?
Юля прошлый мой комментарий вы так и не опубликовали, я разобрался с подключением, все работает и на opencart 2.0.0.1. -подтверждаю!
Спасибо вам..
Иногда не хватает времени модерировать комментарии) Рада, что разобрались с проблемой!
Юля подскажите пожалуйста как сделать тоже самое только для корзины, ни как не получается воплотить в реальность…..
К сожалению, сейчас колоссальная нехватка времени, а здесь парой слов не отделаешься. Не обещаю, но как появится свободная минута, постараюсь написать.
Юля, наблюдается такая история, если заменить строку
<input type="text" name="quantity" size="2" value="» />
на то что у вас указанно, то перестают работать вкладка отзывы, она просто не открывается..
подскажите как исправить?
Виктор, использовала этот метод на паре магазинов — с отзывами порядок.
Здравствуйте. Подскажите пожалуйста будит ли данный метод работать на ocStore-2.1.0.2.1?
Здравствуйте! Может кто знает как подружить этот метод с filterpro? После загрузки filterpro.min.js, скрипт перестает работать (((
Работает на 2.1.0.2.1
подскажите, почему добавляет по 4 единицы?