Open Cart version 2, Quantity filed on Category Vi

Question

I am working with Opencart 2.0 and I am trying to get the quantity field to work from the category page as well as the product pages. I managed to do this fine previously with version 1.5 but the code has changed a lot since. With Opencart V 1.5 I used the solution provided by Siven Sadiyan (http://siven76.com/2013/04/29/opencart-add-a-quantity-box-on-product-list-pages/) who's solution worked beautifully, and just required a tweak to common.js and category.tpl and I was able to apply this to various other pages too such as search results and modules. I have been unable so far to modify this to suit Opencart version 2.0+ as the code and terms have changed. I have tried several extensions but there seems to be little working solutions at the moment except for hard coding it and manually, and so far it is not going well for me! All I am looking for is functionality and I am not worried about the layout.

The common.js file has changed since the solution to the previous version of Opencart and I know it involves the following code (ps, scroll to top is removed from the below code but only one line has changed from the original):

 // Cart add remove functions
 var cart = {
     'add': function(product_id, quantity) {
         jQuery.ajax({
             url: 'index.php?option=com_mijoshop&route=checkout/cart/add&format=raw&tmpl=component',
             type: 'post',
             data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
             dataType: 'json',
             beforeSend: function() {
                 jQuery('#cart > button').button('loading');
             },
             success: function(json) {
                 jQuery('.alert, .text-danger').remove();

                jQuery('#cart > button').button('reset');

                if (json['redirect']) {
                    location = json['redirect'];
                }

                if (json['success']) {
                    jQuery('#content_oc').parent().before('<div class="shopnotification"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button      type="button" class="close" data-dismiss="alert">&times;</button></div>');

                    jQuery('#cart-total,#cart > a > span').html(json['total']);

                    jQuery('.shopnotification').fadeIn(1000).delay(3000).fadeOut(1500);

                    jQuery('#cart > ul,#module_cart > ul').load('index.php?option=com_mijoshop&route=common/cart/info&format=raw&tmpl=component ul li');
                }
             }
         });
     },

The second file is category.tpl code (which I presume when successfully changed can be altered in other areas):

 <div class="button-group">
     <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
     <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
     <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
 </div>

Anyone with a solution for this it would be appreciated! I will post back if I get any luck myself but I'm low on coffee after a long head scratch!

Answer 1

Thank you Xyph3r on Opencart forums, your old post re version 1.5 gave me clues to an alternative that works great for Opencart version 2! Link to my clues: http://forum.opencart.com/viewtopic.php?f=20&t=99990 For others, this is what I did, and it can be adapted into a vqmod or ocmod so updates don't overwrite this but here are the basics: Category.tpl: Find the line:

 <div class="button-group">
     <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>

Change this to:

 <input type="text" value="1" size="2" class="item-<?php echo $product['product_id']; ?>" />
 <div class="button-group">
     <button type="button" value="<?php echo $button_cart; ?>" onclick="addQtyToCart('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>

At the bottom of the file, add the following lines before the echo footer so the end of the file looks like this:

 <script type="text/javascript"><!--
 function addQtyToCart(product_id) {
     var qty = $('.item-' + product_id).val();
     if ((parseFloat(qty) != parseInt(qty)) || isNaN(qty)) {
         qty = 1;
     }
     cart.add(product_id, qty);
 }
 //--></script> 
 <?php echo $footer; ?>

Hope this helps others. Note this only puts the quantity field above the existing buttons add to cart, wish list and compare, it won't look pretty so that's all down to you and your style (theme)!