Добавляем кнопки «- + » для выбора количества товара (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 пишет:

    В коде сверху стоит условие — выод скрипта только на карточке товара:
    < ?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO)) { ?>
    Добавьте сверху через or корзину, вот так должно быть:
    < ?php if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO) or strstr($PHP_SELF, FILENAME_SHOPPING_CART)) { ?>

    • Олег пишет:

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

      • eugenem пишет:

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

        • Олег пишет:

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

Добавить комментарий

Ваш e-mail не будет опубликован.