Добавляем кнопки “- + ” для выбора количества товара (vamshop)

09.11.2013 | Написав

Сейчас я раскажу, как реализовал выбор количества товара на странице товара  с помощью кнопок “плюс-минус”, а не просто вписывание в поле ввода количества другого значения, отличного от 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;}

После этого, на странице товара можно не только вписывать количество для заказа руками, но и прибавлять и убавлять, нажимая на кнопки «+» и «-».

Рубрика: Веброзробка
Позначки:
5 коментарів читачів статті "Добавляем кнопки “- + ” для выбора количества товара (vamshop)"
  • Олег пишет:

    Сделал так в корзине – почему то не работает, то есть работает, нажимаю пересчитать возвращается значение которое было. Не подскажете, что я не так делаю?

  • eugenem пишет:

    В коде сверху стоит условие – выод скрипта только на карточке товара:

    Добавьте сверху через or корзину, вот так должно быть:

    • Олег пишет:

      скрипт подключён, цифры в инпуте меняются, нажимаю пересчитать возвращается к тому что было, ввожу вручную значение в поле – всё нормально пересчитывается.

      • eugenem пишет:

        Сложно сказать, у меня работает. Не на одном сайте испробовано. Например, вот тестовая сборка с моими доработками http://vamshop-test.pp.ua/_bootstrap/ . Проблем там нет.

        • Олег пишет:

          разобрался, заработало.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.