Magento – Product Qty Increment / Decrement buttons at checkout page

magento-1.7template

I am trying to add my own logic behind the [-] and [+] buttons at the checkout page:

enter image description here

Using the template path helper module, I have found the template that is providing the layout for the basket item rows, which is:

app/design/frontend/MY-TEMPLATE/default/template/checkout/cart/item/default.phtml

This is the code that is rendering the input field for entering the qty (from the template):

<td class="a-center td-4">
    <div class="quantity"> 
        <input readonly name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" />
        </div>  <!-- /.quantity -->
        <a href="<?php echo $this->getDeleteUrl()?>" title="<?php echo $this->__('Remove')?>" class="btn-remove btn-remove2"><?php echo $this->__('Remove')?></a>
    </td>

I cannot find the html/js code that is injecting the [-] and [+] buttons on this template file.

However if I "Inspect" the element (in firefox) I can see the following:

enter image description here

Any idea where these qty inc/dec buttons are coming from – on this page/template?

Best Answer

Try this code

<td class="a-center td-4">
    <div class="quantity"> 
        <a href="javascript:" id="subtractQty" class="style-button">-</a>
        <input readonly name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" id="qty"/>
        <a href="javascript:" id="addQty" class="style-button">+</a>
    </div>  <!-- /.quantity -->
    <a href="<?php echo $this->getDeleteUrl()?>" title="<?php echo $this->__('Remove')?>" class="btn-remove btn-remove2"><?php echo $this->__('Remove')?></a>
</td>

Add this script

<script type="text/javascript">
    jQuery("#addQty").click(function() {
        var value = parseInt(jQuery("#qty").val())+ parseInt(1);    
        jQuery("#qty").val(value);                                  
    });

    jQuery("#subtractQty").click(function() {
        if(jQuery("#qty").val() > 1 ) {
            var value = parseInt(jQuery("#qty").val())- parseInt(1);    
            jQuery("#qty").val(value);      
        }
    });
    jQuery("#qty").blur(function(){
        if(jQuery("#qty").val() == "" || jQuery("#qty").val() == 0 ) 
            jQuery("#qty").val(1);
    });                                 
    jQuery(document).ready(function () {
        jQuery("#qty").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });
    });
</script>
Related Topic