How to add qty plus minus buttons in shopify?

Sorry this is not a detailed description but a summary with all code

Add available quantities first – as shown in this article – How to show stock quantities in all variants of shopify

^The above part is utmost necessary. because the following functions use previous js variables.

So here we go. Good Luck!!

javascript on the product page

<script>
  $(document).ready(function($){
        
    var  $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
    setTimeout(function(){$j(qtyminus).removeClass("hidden");
    $j(qtyplus).removeClass("hidden");
    },8000);
    $j(qtyminus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      if(qtyvalue<2){checkFreeze(); return;}
       $j(qtyinput).val(qtyvalue-1);
                checkFreeze();    });
    $j(qtyplus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      //    console.log(qtyvalue + " -- - -" + maxallowed);
      if(maxallowed<=qtyvalue){
        checkFreeze(); return;}
    $j(qtyinput).val(qtyvalue+1);
           checkFreeze();         });
   
  });
        </script>

html tags on product page. make sure you add these AROUND quantity input

<a id=qtyminus class="freeze fa fa-minus hidden"></a>
<input class="select-on-focus" min=1 type="text" size="3" id="quantity" name="quantity" value="1" {% if issingle %}max="{{ current_variant.inventory_quantity }}" {% endif; %}/>
<a id=qtyplus class="{% if current_variant.inventory_quantity==1 %}freeze {% endif; %}fa fa-plus hidden"></a>
              

javascript function inside your theme.js. Reason: so that this gets loaded aka defined before updateSku is called()

function checkFreeze(){
    $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
  //alert("max is "+maxallowed);
      if(maxallowed==0 || maxallowed===undefined){        
             $j(qtyplus,qtyminus).addClass("freeze");
        $j(qtyinput).val(0);
        return;
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>=maxallowed){//newval=1;
        $j(qtyinput).val(maxallowed);
             $j(qtyplus).addClass("freeze");  
        }
      else{
        if(qtyvalue<1)
        $j(qtyinput).val(1);
      $j(qtyplus).removeClass("freeze");
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>1){
         
      $j(qtyminus).removeClass("freeze");}
      else {
             $j(qtyminus).addClass("freeze");     
                  }
    };

changes in function updatesku. Add these lines inside the function. Make sure you have already followed part1

if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
    else $("#quantity").attr('max',0);
    $(document).ready(function(){checkFreeze();});

After making changes as discussed in part1 and this article, the final updatesku function looks somewhat this

_.updateSku = function(variant, $container){
  $container.find('.sku .sku__value').html( variant ? variant.sku : '' );
  $container.find('.sku').toggleClass('sku--no-sku', !variant || !variant.sku);
  if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=bomb>Sold Out!</span></p>");
  else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=fire>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
  else $("#stockstatus").html("<p class=grass><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
  else $("#quantity").attr('max',0);
  $(document).ready(function(){checkFreeze();});
}

CSS – can be added in custom.css

#qtydiv a{border: 1px solid #777;
    border-radius: 3px;
    font-size: 16px;
    padding: 0;
    line-height: 30px;
    width: 30px;
    background: #efefef;
    color: #444;
    height: 30px;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
  margin:0 5px;}
#qtydiv a.freeze{cursor:not-allowed;
  border: 1px solid #eee;
    color: #bcbcbc;}

How to add qty plus minus buttons in shopify?

Add available quantities first – as shown in this article – How to show stock quantities in all variants of shopify

Comments

One response to “How to add qty plus minus buttons in shopify?”

Leave a Reply Cancel reply