Mister Karl asked me today if I knew of any methods with OpenCart to add the Quantity field (qty) to the category page, that is the products listed either in a grid or list format. While I have previously achived this with nasty horrible server-side hacks, I thought it was probably more appropriate to find a more consistent solution that would stay present even after updating OpenCart.
Turns out, the nicest place for me to achieve this fix, was in the Theme file itself. This fix works in version 1.5.3.1 of OpenCart and changes only one file.
The file you'll need to edit (assuming you're working with the default theme in OpenCart) is /catalog/view/theme/default/template/product/category.tpl
After you've seen the simple changes made, you should be able to adapt this to any theme you like.
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" />
Change this line to
<input type="text" value="1" class="item-<?php echo $product['product_id']; ?>" /> <input type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');" class="button" />
We've added in a simple text input, given it a class of item-ProductId, and changed the Add to Cart button to call addQtyToCart instead of addToCart
Add a new line after the opening of "script"
function addQtyToCart(product_id) { var qty = $('.item-' + product_id).val(); if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) { qty = 1; } addToCart(product_id, qty); }
Basically, you could do this without the "add qty to cart" function I've made, but I wanted to add in a little bit of error checking before adding something to the cart. If it's not a number, the qty will reset to 1 and continue to add the item anyway. It still uses the function addToCart, but with the additional parameter which defines the quantity to add to the cart.
Hope this helps someone out with quickly adding this to their OpenCart system, I did some googling prior to starting but sadly every solution I found demanded you pay at least $30. Which for an open-source product I thought was a little harsh of the community. Actually I thought it was pretty rude really, and down-right wrong. Don't get me wrong, I work on paid software solutions, but if you're going to use someone else's entire solution and add on a little "spit" of a feature.... Anyway. ENJOY.
it is perfect thank you … but what about add + and – to this is this is possible
Not sure. What if you addToCart(product_id, -1);
thank you for your replay i tried it on other theme but it didnt work i dont know why …
http://www.5odfekra.com/zomaa/index.php?route=product/category&path=17_29
I am trying to add quantity box on category.tpl page as you guide above but one one quantity is adding to the cart please help 🙁
its perfect i change and style and look like very good.
1.6.5.4 versions work excelent
5 stars thank you very much
Hi, I’m using this function and it works great to add products from the category view- but I want to pass options to the cart by building on this function- I’m not having any success fiddling with it. Any help is appreciated!
I have no idea sorry. It’s been a _really_ long time since I’ve used OpenCart. Might have to see if you can’t find someone on the OpenCart forums for assistance.
Great thanks for this works.
I am new in programming, but my site running in open cart 1.4.9.5 witch customize lot of php scripts. i am face problem time to time and find in Google. i think update to new opencart but i not decide witch version select. help me.
website: http://projectpoint.in
Going for the latest version of something open source is really important for a number of reasons, but most importantly you want to ensure you use the latest version for security reasons.
I haven’t touched open cart in a really long time so I can’t specifically tell you much about the newer versions but I believe this adding of qty to a category list page is no longer required as it’s built in now (I think…).
Anyway – Always update your open sourced sites. Always always always.
This worked with no problem for me in 1.5.6.4- I added the js to the common.js file under where the normal add to cart function was, and changed the other items as described even in a custom template with no problem. Thank you very much for the heads up.
Do you have a solution for version 1.5.6?
No, not at this stage. I haven’t done any work with OpenCart for quite some time.
HI I have used this code to add quantity on product page. Working great Thanks!!
But the issue I am facing is Quantity added is not updated in product page .If I click product link after adding quantity.
Product page still shows quantity=1 that is adefautl value.
Please help
Thanks
Ruchika
Great thanks for this works like a charm! Quality that it’s all in the template and not in the core!
“OpenCart Featured Products and News” Module is a jquery based open cart module which is implemented to show the Selected Featured Products and/or News or relevant posts
OpenCart Featured Products and News is very useful and nice plugin and i am also use in my website
http://codecanyon.net/item/opencart-featured-products-and-news/4368564?ref=wpproducts
Спасибо большое, просто и понятно. Thank you very much.
Excellent! Very helpful for me 🙂 Thank you very much! works with 1.5.5.1 version as well.
Hey Excellent! Thanks for the feedback!
Hello Sayem, Please share your .tpl file and common.js fole with me. I also want to add qty box in 1.5.5.1
Hey Dazz – thanks for this, it’s been really helpful – only prob is when the category page has a filter applied, all the new quantity code disappears – any ideas?
Cheers, Alex
Hrmm,
Can’t say I’ve had this feedback before. I haven’t touched OpenCart is a _really_ long time. I would suspect that the view used for the filtered pages is different to that of the normal category listing. If that’s the case, poke around a bit in the template view files to see if you can work out what the category filter controller is calling, and apply the same code on that view as well.
Cheers!
Thanks Daz – will definitely have a poke around and see what I can find! Thanks for your help
Hy, any solution for 1.5.1.3 ? Please i could really need some help. The quantity just wont update. please help
1.5.1.3 installation is over 12 months ago. You should really update to address security concerns among other things.
I believe the code availability to add qty via javascript was only added to OpenCart sometime around 1.5.3.1 (Not sure on specifics, but I knew a long time ago it wasn’t available at all).
If you have to stay on such an old version, you’ll need to review the changes made between the versions and selectively update the code yourself.
hy dazz and thanks for your prompt answer. Yes , i cannot update to an earlier version , i would have done this a long time ago . I know i have to review the code but i’m not quite good in php, java and this kind of stuff . I spend nights to try and make this work , but till now , no success . This could be quite simple for a programmer , but for me is difficult 🙂 I thought you know how to make it work on 1.5.1.3 and that is why i asked. Thanks anyway . If i manage to succed i will post here
Thank you very much 🙂 That helped me a lot. Wish you all the best.
You are fantastic, thank you very much, in my country we don’t have access to USD , and I can’t buy any extension, your solution works like a charm. THANK YOU VERY MUCH.
If you ever need some Spanish translation please let me know.
Is this working for v 1.5.1.3 ? anyone tried it ? thanks
Thanks Dazz, your code save my website! 🙂
Hurray! \o/ Everyone likes saved websites 🙂
Thanks for the code. I tried it on 1.5.4.1 and it didn’t work for me…what did I do wrong? Please help.
Not sure. Only done it on 1.5.3 – but I would assume they would be similar. Triple check the changes you made to ensure they match what we have here.
if yuo have a cache in sys folder the qty will be == 1, if cache clean –> allright… have thing’s ?
remodif common.js, changed code from:
function addToCart(product_id) {
$.ajax({
url: ‘index.php?route=checkout/cart/update’,
type: ‘post’,
data: ‘product_id=’ + product_id,
to
function addToCart(product_id, quantity) {
quantity = typeof(quantity) != ‘undefined’ ? quantity : 1;
$.ajax({
url: ‘index.php?route=checkout/cart/update’,
type: ‘post’,
data: ‘product_id=’ + product_id + ‘&quantity=’ + quantity,
It works!!!! Thank you so much.
awesome!! Using the same code for features, special and other section.. 😉
Awesome
Hello!
This is very god job! Thanks!
Do you have a solution for version 1.5.1.3?
This code adds an item to your cart, but only 1 quantity.
I enter quantity 5, but conveys a cart in the 1 quantity.
Upgrading to the latest version of OpenCart is not a solution for you?
i have also this problem please provide these solution..
Worked a treat dude. I saw all the pay money solutions as well. No way I was going to pay for it before consulting my local Php developer.
(p.s. Finish the CSS on this form already. 😛 )
Glad to hear! Also I’m not really that local anymore =D
Also! WORKING ON THE COMMENT STUFF NOW! Just pushed an update as you can see =D
Just need to finish threaded comments properly (only the first threaded comment has the image/text in the right spot), and then once comments is done, add back simple facebook/google+ like buttons. Any suggestions on those?
Oh dear, okay, something is broke XD
Still needs some work (focusing on the avatar and the border coming out). Biggest grief here is Wordpress’s functions and arguments passed through it’s comment’s function.
I’ll finish him up tomorrow.
Looks pretty epic to me.
What happened to the mobile version? I thought you had one.
Of the site? I do, but it’s not on a different subdomain anymore. Also I don’t have a design for him… *hint-hint*
It’s automatically detected. Boo >_> I’ll look into that further later on.
Well, I still don’t have net so I probably could get onto a design. Got nothing else to do at night.
It’s past monday! You should have intarwebz! OMG dude. I feel so sorry for you. You can come visit me, I’ll lend you wifi.
And I don’t _need_ mobile theme (unless you’re really bored). Less than 1% of visitors are mobile device users.
Then again, maybe that’s why they don’t visit. 🙂
It’s most likely I’m the only one that has come on here with a mobile lately.
Forms look awesome. Forgot all about the Submit button. Made myself laugh.
I love your sense of humour in design ^_^
Just re-enabled cloudfront for CDN of javascript/images – page loads a billion times faster again. ^_^ So proud of my little site.
And now back to work.
Just more testing.
And testing again ^_^