Tuesday, 3 April 2018

How to Increase / decrease qty directly on cart page in magento 1.9

How to Increase / decrease qty directly on cart page in magento 1.9

First, I give an id (form-update-post) to the form of the cart page : (app/design/frontend/rwd/default/template/checkout/cart.phtml)

<form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="form-update-post">

    Then, I add two buttons, and I add an id to the qty field of the items : (checkout/cart/item/default.phtml)

<a href="javascript:decreaseQty(<?php echo $_item->getId() ?>)" class="decrement_qty"><span class="fa fa-minus">-</span></a>
<input id="quantity-item-<?php echo $_item->getId() ?>" name="cart[<?php echo $_item->getId() ?>][qty]"
   data-cart-item-id="<?php echo $this->jsQuoteEscape($_item->getSku()) ?>"
   value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" />
<a href="javascript:increaseQty(<?php echo $_item->getId() ?>)" class="increment_qty"><span class="fa fa-plus">+</span></a>

The last step is to add those Javascript functions in the cart page : (checkout/cart.phtml)

<script type="text/javascript">
    function increaseQty(id){
        var input = jQuery("#quantity-item-"+id);
        input.val(parseInt(input.val())+1);
        var form = jQuery("#form-update-post");
        if(form !== undefined){
            form.submit();
        }
    }

    function decreaseQty(id){
        var input = jQuery("#quantity-item-"+id);
        if(input.val() > 1){
            input.val(input.val()-1);
        }
        var form = jQuery("#form-update-post");
        if(form !== undefined){
            form.submit();
        }
    }
</script>

No comments:

Post a Comment