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;}
One thought on “How to add qty plus minus buttons in shopify?”