Plus (+) Minus (-) Quantity Selector on Supply Theme Using Cart Page

[ben33]

Hi all,

I'm looking to replace the text box quantity selector with a plus minus quantity selector in supply theme on product page and cart page through the standard non-ajax cart page. It would be great if someone can help me with a step by step on putting in the html, CSS and JS code at the right files specifically to the supply & brooklyn theme. Appreciate the help here. Thanks.

[mannyb12]

Did you ever find a solution?

[Jasoliya]

Follow this:

Add this html in section->product-template.liquid and section->cart-template.liquid

<div class="qtydiv">
        <label for="Quantity" class="quantity-selector">Quantity</label>
        <div class="qtybox">
          <span class="btnqty qtyminus icon icon-minus">-</span>
          <input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="">
          <span class="btnqty qtyplus icon icon-plus">+</span>
        </div>
</div>

Add this css in Asset->theme.scss->at end of file:

.qtydiv label{display: block;margin-bottom: 12px;letter-spacing: 2.8px;color: #747a7b;}
.qtydiv .btnqty{display: inline-block;cursor: pointer;user-select: none;font-size: 25px;padding: 5px;}
.qtydiv .btnqty.qtyminus{margin-right: 8px;}
.qtydiv .btnqty.qtyplus{margin-left: 8px;}
.qtydiv .quantity-input{border: none;border: none;padding: 8px;text-align: center;width: 50px;outline: none;display: inline-block;}
.qtydiv {display: inline-block;padding-right: 15px;padding-top: 10px;}

Add this Js in Asset->theme.js- >at end of file

 $('.qtybox .btnqty').on('click', function(){
          var qty = parseInt($(this).parent('.qtybox').find('.quantity-input').val());
          if($(this).hasClass('qtyplus')) {
            qty++;
          }else {
            if(qty > 1) {
              qty--;
            }
          }
          qty = (isNaN(qty))?1:qty;
          $(this).parent('.qtybox').find('.quantity-input').val(qty);
        }); 

[cpoveda89]

Hi! Thank you for these codes, they seem pretty good. I paste them all except the first one, because I can't find where to paste them. Which code should I erase to paste this one?

[Jasoliya]

You can find quantity from page and comment it and paste my code 

[Florian_T]

Hi Jasoliya

Thanks for your input! I don't get your last message:
"You can find quantity from page and comment it and paste my code "

How do you "comment" it? I'm not a developper at all sorry 😅

[Jasoliya]

Hi @Florian_T 

Go to Section->product-template.liquid and find below code and comment it:

<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">

[smilemerry007]

Hi, Jasoliy,

I followed your steps  in my Minimal theme.

Your instruction is very helpful.

But finally I get additional + and - , like below image, please note the red circle.

Could you kindly tell me how to remove the additional smaller ? Many thanks! 

[Jasoliya]

 You can remove "-" and "+" from <span>

 <span class="btnqty qtyminus icon icon-minus">-</span>
 <span class="btnqty qtyplus icon icon-plus">+</span>

Remove "-" and "+" from above html.

[smilemerry007]

Wow, I got it.  you are really the BIGGEST one!   Many thanks for your help!