Saturday, 20 February 2016

Add Plus And Minus to Qty box of product view page

Open addtocart.phtml file from app/design/frontend/default/youtheme/template/catalog/product/view

Copy this two div for + and -

<div class="qty-changer">
<a class="qty_dec" id="min" href="javascript:void(0)"><i class="fa fa-minus"></i></a></div>
<div class="qty-changer">
<a class="qty_inc" id="add" href="javascript:void(0)"><i class="fa fa-plus"></i></a></div>


Copy this script and paste in bottom of addtocart.phtml

<script>
jQuery(document).ready(function()
{
    var basePrice = parseFloat(jQuery("#qty").text());
    jQuery("#add").click(function()
    {
        changeValue(1);
    });

    jQuery("#min").click(function()
    {
        var qtyval = document.getElementById('qty').value;
        if(qtyval>1){
            changeValue(-1);
        }
    });

    function changeValue(sign)
    {
        jQuery("[name='qty']").val(parseInt(jQuery("[name='qty']").val()) + sign);
        var countValue = jQuery("[name='qty']").val();
        var newValue = (basePrice * countValue).toFixed(2);
        jQuery("#qty").text(newValue);
    }
});
</script>




No comments:

Post a Comment