Добавить кнопки количества?

Question

Добавить кнопки количества?

Форум поддержки » Вопросы и ответы

Какой код подправить в стандартной теме Дфолт 2.0 чтобы добавить кнопки увеличения и уменьшения количества заказываемого товара на странице товара и в корзине как на прилагаемом изображении:

2 ответа

+3

Игорь 17 апреля 2015 16:11 #

Спасибо за совет, этот код уже раскомментирован, интересуют именно кнопки +/-
После выхода темы Mobile, посетила идея что эти кнопки можно позаимствовать оттуда если немного покопошиться в коде, или если посоветуете что то конкретное, не копошиться, а сразу действовать.

ответить

+1

Надежда 3 апреля 2018 10:50 #

Подскажите пожалуйста, как в корзине эти кнопки сделать, в product.cart все получилось, а в cart не получается

ответить

Добавить ответ

**Алексей** · Answer 1

В файле шаблона темы product.cart.html раскомментируйте блок

{*

UNCOMMENT FOR QUANTITY INPUT

× <input type="text" name="quantity" value="1">

</span>

*}

Это добавит поле с вводом количества. +/- можете добавить через JS.

Для корзины редактируется файл cart.html

**IdeaMustBe** · Answer 2

В конце шаблона product.cart.html добавляем:

<script>  

  $(function(){  

  $('#uBkp input[type="text"]').before('<div id="uBest-minus">-</div>');  

  $('#uBkp input[type="text"]').after('<div id="uBest-plus">+</div>');  

  $('div#uBest-plus').click(function() {  

  uTovar = +$('#uBkp input[type="text"]').val();  

  $('#uBkp input[type="text"]').val(uTovar + 1)  

  });  

  $('div#uBest-minus').click(function() {  

  uTovar = +$('#uBkp input[type="text"]').val();  

  if (uTovar > 1) {  

  $('#uBkp input[type="text"]').val(uTovar - 1)  

  }  

  });  

  });  

  </script>

А код:

<span class="qty">
× <input style="text-align:center;" type="text" name="quantity" value="1"> шт.
</span>

заменяем на:

<div id="uBkp">
                <span class="qty">
                    × <input style="text-align:center;" type="text" name="quantity" value="1"> шт.
                </span>
</div>

Стили кнопок настраиваем в CSS #uBest-minus и #uBest-plus