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?”