When a customer views their cart, each product that they have added will be listed. By default, Magento provides info for each product, e.g. name, image, quantity, price. Customers can change the quantity in the text box and submit the “Update Shopping Cart” button. That is a lot of effort for the user, we want to make this process as smooth as possible.
We can make it easier by adding +1 and -1 links to change the quantity of each item. We will do this with some very simple JavaScript which takes the current value and adjusts it. Once this has been done, we submit the form through JavaScript to reduce customer effort.
In my implementation I have used images for the links, but obviously you could use text, e.g (↑ ↓). The following two code snippets should surround the input quantity box on the shopping cart/basket page:
<input 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="cart[<?php echo $_item->getId() ?>][qty]"/>
This can be found in app/design/frontend/[interface_name]/[theme_name]/template/checkout/cart/item/default.phtml
Increase by one:
<a onclick="changeItemQuantity( <?php echo $_item->getId() ?>, 1 ); return false;" href="#"><img alt="add-arw" src="<?php echo $this->getSkinUrl('images/add-arw.png') ?>"></a>
Decrease by one:
<a onclick="changeItemQuantity( <?php echo $_item->getId() ?>, -1 ); return false;" href="#"><img alt="add-arw" src="<?php echo $this->getSkinUrl('images/add-arw.png') ?>"></a>
Now the JavaScript function. We do not want it duplicated for every item so you can either put it in your theme’s JavaScript file or just below the table in the parent template – app/design/frontend/[interface_name]/[theme_name]/template/checkout/cart.phtml
After the quantity is changed, we submit the cart form so that the totals are kept up to date. When decreasing quantity, Magento removes the item after form submission if the quantity is 0.
function changeItemQuantity( id , num ) { var qty_id = "cart[" + id + "][qty]"; var currentVal = parseInt( $(qty_id).value ); if ( currentVal != NaN ) { $(qty_id).value = currentVal + num; $("products-table-basket").submit(); } }
There, a tiny bit of JavaScript which will help to ease the customer’s journey to purchasing from your Magento Store!
Many thanks for this code, is it possible to have to same thing for my code, i have added a text box and i want to add increase and decrease button in product layer view !!
Can you help me plz
Yes, that would be even easier to accomplish as you won’t need to track which product the code is related to like you do for the cart.
The first line is your input box, add the increase and decrease links which are my next two snippets. You won’t need to get the product_id, as long as the links and input do have an ID.
Then, in the changeItemQuantity function you won’t need to submit the form. You will need to change the input name that you are looking at. So change the qty_id variable appropriately.
Hope that helps.
Tom
Thanks for the tutorial mate, i get the follow error message
$(“products-table-basket”) is null
I also tried to give the cart an id of products-table-basket but that didn’t work also
Also, do you have a snippet that also updates the price when updating quantity?
Can you help me? Thanks in advance!
Ah yes, in the latest version of Magento they’ve removed the id from the /checkout/cart/updatePost/ form. You should just be able to add it back in, worked for me.
When you get that working, the form submit submits that update post form and so the page will reload with the new prices.
its good … but not changing total price of each product and subtotal price. plz let me know how to do completely dynamic.
Hi, you’ll need to ensure the update cart form is submitted after changing any values,
e.g. $(“products-table-basket”).submit();
Although you’ll need to ensure the form has id=”products-table-basket”
Hi men, i know the post is old, but is possible to apply your code for a combo box from 1 to 10 to select items?
Thanks!!!!!
Hi, no, a combo box works differently because you need to select an option with the select box rather than just increasing it’s value. You should be able to find some javascript via a google search to do it though.
Hi! Thank you very much for your answer, i try to find some javascript to do it with the combobox but i dont find antithing.
Thanks again!!