Добавляем кнопки “- + ” для выбора количества товара (vamshop)
Сейчас я раскажу, как реализовал выбор количества товара на странице товара с помощью кнопок “плюс-минус”, а не просто вписывание в поле ввода количества другого значения, отличного от 1.
Задача, в общем-то, тривиальная, давно решенная, нужно только это решение прикрутить к вамшопу. Итак, что делаем:
1. Открываем templates/наш шаблон/module/product_info/product_info_v1.html.
2. Добавляем рядом с меткой ввода количества товара span’ы, которые будут кнопками прибавления и убавления. Вот таким образом
<span class="minus">-</span> {$ADD_QTY} <span class="plus">+</span> |
3. Открываем templates/наш шаблон/jscript/general.js.php. Добавляем скрипт:
<?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO)) { ?> <script type="text/javascript"> $(document).ready(function() { $('.minus').click(function () { var $input = $(this).parent().find('input[type=text]'); var count = parseInt($input.val()) - 1; count = count < 1 ? 1 : count; $input.val(count); $input.change(); return false; }); $('.plus').click(function () { var $input = $(this).parent().find('input[type=text]'); $input.val(parseInt($input.val()) + 1); $input.change(); return false; }); }); </script> <?php } ?> |
4. Добавляем стилевое оформление кнопок. Для этого открываем templates/наш шаблон/stylesheet.css. Добавляем, например, вот так:
.minus, .plus { background:#bdbdbd; display:inline-block; height:21px; width:24px; font-size:20px; line-height:18px; text-align:center;padding:3px 0 0; cursor:pointer;margin-right:3px;} .minus {padding:1px 0 0; height:23px;} |
После этого, на странице товара можно не только вписывать количество для заказа руками, но и прибавлять и убавлять, нажимая на кнопки «+» и «-».
-
пишет:Олег
Сделал так в корзине – почему то не работает, то есть работает, нажимаю пересчитать возвращается значение которое было. Не подскажете, что я не так делаю?