OpenCart Community

Posted: **Sat Apr 03, 2010 10:53 am**

Dear All,
I add the "Add to cart" button on the product list page successfully, then I see many people want to use this button..
I'm using open cart v 1.4.5.

First:
modify OPENCART_ROOT/catalog/controller/product/category.php
Add

Code: Select all

$this->data['action'] = HTTP_SERVER . 'index.php?route=checkout/cart';

after

Code: Select all

$this->data['continue'] = HTTP_SERVER . 'index.php?route=common/home';

find this:

Code: Select all

this->data['products'][] = array(

and add

Code: Select all

'id'    => $result['product_id'],

between

Code: Select all

$this->data['products'][] = array(

and

Code: Select all

'name'    => $result['name'],

so that the catalog page can use product id field.

Second:
OPENCART_ROOT\catalog\view\theme\default\template\module\cart.tpl
add

Code: Select all

	$('.add_to_cart').each(function(){
	    var _pa = $(this);
	    var _pid = _pa.attr('rel');
	    _pa.click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product_'+_pid+' :input'),
			success: function (html) {
				$('#module_cart .middle').html(html);
			},	
			complete: function () {
				var image = $('#image_'+_pid).offset();
				var cart  = $('#module_cart').offset();
	
				$('#image_'+_pid).before('<img src="' + $('#image_'+_pid).attr('src') + '" id="temp_'+_pid+'" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
	
				params = {
					top : cart.top + 'px',
					left : cart.left + 'px',
					opacity : 0.0,
					width : $('#module_cart').width(),  
					heigth : $('#module_cart').height()
				};
				$('#temp_'+_pid).animate(params, 'slow', false, function () {
					$('#temp_'+_pid).remove();
				});
			}
		});
            });
	});

in the

Code: Select all

$(document).ready(function () {

ao that you can use ajax add to cart function.

third:
OPENCART_ROOT\catalog\view\theme\default\template\product\category.tpl
after

Code: Select all

<?php if ($products[$j]['rating']) { ?>
          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
          <?php } ?>

add the following code:

Code: Select all

<form action="<?php echo $action; ?>" method="post" id="product_<?php echo $j;?>">
<input type="hidden" name="quantity" size="3" value="1" />
<a onclick="" id="add_to_cart_<?php echo $j;?>" rel="<?php echo $j;?>" class="button add_to_cart"><span>Add to Cart</span></a>
<input type="hidden" name="product_id" value="<?php echo $products[$j]['id']; ?>" />
</form>

ok, it's done, I tested. but don't test without ajax add to cart.

Have fun.

Ady

Posted: **Sun Apr 04, 2010 4:49 pm**

This is a great feature, but only for options that have no options.

Posted: **Wed Apr 07, 2010 6:24 pm**

Could any one tell me the better way, or we can have this option with the OC next vasion

Posted: **Tue May 18, 2010 1:51 am**

Thanks for this solution, here is how to disable it when a product has options;

Follow the first post but with the following change.

in OPENCART_ROOT/catalog/controller/product/category.php

Where you find:

Code: Select all

this->data['products'][] = array(

add this to the line ABOVE:

Code: Select all

$options = $this->model_catalog_product->getProductOptions($result['product_id']);

then add this as in the original thread but with an extra line:

Code: Select all

'id'    => $result['product_id'],
'options' => $options,

Then in OPENCART_ROOT/catalog/view/theme/default/template/product/category.tpl

Use an if statement to ignore products with options

Code: Select all

<?php if (!$products[$j]['options']) { ?>
<form action="<?php echo $action; ?>" method="post" id="product_<?php echo $j;?>">
<input type="hidden" name="quantity" size="3" value="1" />
<a onclick="" id="add_to_cart_<?php echo $j;?>" rel="<?php echo $j;?>" class="button add_to_cart"><span>Add to Cart</span></a>
<input type="hidden" name="product_id" value="<?php echo $products[$j]['id']; ?>" />
</form>
<?php } ?>

You could add an 'else' statement and display a View Options button in it's place:

Code: Select all

<?php if (!$products[$j]['options']) { ?>
<form action="<?php echo $action; ?>" method="post" id="product_<?php echo $j;?>">
<input type="hidden" name="quantity" size="3" value="1" />
<a onclick="" id="add_to_cart_<?php echo $j;?>" rel="<?php echo $j;?>" class="button add_to_cart"><span>Add to Cart</span></a>
<input type="hidden" name="product_id" value="<?php echo $products[$j]['id']; ?>" />
</form>
<?php } 
else { ?>
<a class="button" style="text-decoration:none;" href="<?php echo $products[$j]['href']; ?>"><span>View Options</span></a>
<?php } ?>

If you use Latest Products on the Home Page then make these same changes to OPENCART_ROOT/catalog/controller/common/home.php and OPENCART_ROOT/catalog/view/theme/default/template/common/home.tpl

Posted: **Fri Aug 06, 2010 10:03 pm**

readyman wrote:This is a great feature, but only for options that have no options.

Yer, my pet gripe about shopping cart software is options on the category page.
No one seems to want to provide this feature

except Magento but then we know why we don't choose magento

Thank-you trait. I successfully applied your solution to 1.48b
Although 1.48b has an add to cart button on the category page, I also needed a qty text box and I don't know how to modify 1.48b to add a qty box on the category page. Your solution helped me. Thank-you.

Back to digging in these forums to find a solution for options on the category page

Posted: **Sat Aug 07, 2010 12:20 am**

We are looking to add a grid/list switcher button. in "list" mode we will see about adding an option to show options

Posted: **Sat Aug 07, 2010 3:03 am**

Qphoria wrote:We are looking to add a grid/list switcher button. in "list" mode we will see about adding an option to show options

I think most of us want to get this feature.

Thanks for your hard work.

Posted: **Wed Aug 11, 2010 2:52 pm**

Hi, i've successfully added the buttons. Thank you! However, the ajax is not working in the category page when i click the add to cart button. my version is 1.4.7. I do not know how to troubleshoot this...anyone? tq.

Posted: **Wed Aug 11, 2010 11:52 pm**

Search this forum for the topic "How to add ADD TO CART button on home page and catgory"
Use that thread for the code. It's very similar to this one except this one is missing something in the img tag that makes the product fly to the cart. I think that's what it was.

Now the next bit - I don't know 1.4.7 so in theme/defult/template/module/cart.tpl
look for

$(document).ready(function () {

and add the code to it.

What I'm trying to say is in the other thread, mondy says to put the code for the $(document).ready(function () at the end of the theme/defult/template/module/cart.tpl

But in 1.4.8b there is already a $(document).ready(function (), so instead of adding it to the end of the .tpl, we have to insert it in the middle of the function, like trait tells us to do here.
If 1.4.7 doesn't have a $(document).ready(function () in the cart.tpl, then do exactly as the other thread says, otherwise insert it where trait tells us here (using the other threads code).

Sometimes our answers lie in more than one thread

Posted: **Wed Sep 01, 2010 11:07 pm**

Any one i m getting this error when i click on the add to cart button i see this error in the cart on left...

Notice: Undefined index: product_id in C:\catalog\controller\module\cart.php on line 110Notice: Undefined index: quantity in C:\catalog\controller\module\cart.php on line 110 item 0

Posted: **Fri Jan 28, 2011 4:28 am**

I am also getting the undefined index error for product_id and quantity? Why is this? thanks!

Posted: **Mon May 02, 2011 11:01 pm**

this is nice... i tried it in 1.4.9.4 and it works.

how about adding a qty box?

Posted: **Tue May 03, 2011 12:15 am**

nice. i tried it using 1.4.9.4 and it works.
how about adding a qty box?

Posted: **Tue May 03, 2011 6:40 am**

hmm, if you want to have a look I made a contribution doing that... you can find it searching b2b list view template in extensions store.
You can check the behaviour in the demo site
Let me know!
M

Sent from my Nexus One using Tapatalk

Posted: **Fri May 06, 2011 1:27 am**

Hi there,

Just started using opencart and its really cool!

I've managed to follow this correctly however i also added this to featured and latest products modules in homepage.

Thing is... I have three featured items displaying first and then some latest products. All works well, except the first three LATEST products that show up in the cart as the three FEATURED products... although they are not the same and the links go to different products.

I can't change the code myself to find out whats happening, ive tried but dont have enough knowledge yet

I'm using 1.4.9.4. Any ideas??

@mytindahan - You can just remove the 'type="hidden"' from this line:
<input type ="hidden" name="quantity" size="1" value="1" />

It will then show a quantity box.

OH, also what does "<?php echo $action; ?>" do?
With firebug it reads "Notice: Undefined variable: action in featured_home.tpl on line 27"

Posted: **Fri May 06, 2011 2:15 am**

Ok i just solved this. For anyone caring here it is:

Change the previous form code to this:

Code: Select all

<form action="<?php echo $action; ?>" method="post" id="product_<?php echo $products[$j]['id'];?>">
<input type ="hidden" name="quantity" size="1" value="1" />
<a onclick="" id="add_to_cart_<?php echo $products[$j]['id'];?>" rel="<?php echo $products[$j]['id'];?>" class="button add_to_cart"><span><?php echo $button_add_to_cart; ?></span></a>
<input type ="hidden" name="product_id" value="<?php echo $products[$j]['id']; ?>" />
</form>

Posted: **Sat May 07, 2011 1:54 am**

i followed some that were discussed here and get some of the codes in product/product to add the qty box in product/category. it works for my site but can somebody teach me how to get the same animation of adding product to cart just like the default animation in product/product? see my site at http://mytindahan.net

i am not actually a coder; i just follow my instinct and some common sense...

Posted: **Wed May 11, 2011 5:19 pm**

by the way, the aniation that i was referring in my above post is the ajax effect of adding the product.

pardon my ignorance

Posted: **Fri May 13, 2011 11:18 pm**

hi there.

i got a problem with the quantity input (i am using 1.4.9.4):
when i make the input visible (<input type ="TEXT" name="quantity" size="1" value="1" />) i can NOT put more than 1 item in the cart. e.g. if i fill in "5" it still puts "1" item in the cart.

anyone experienced this 'feature' before?
any ideas for a nice workaround?

thanks in advance!

Posted: **Fri Jul 22, 2011 11:13 pm**

gujjar wrote:Any one i m getting this error when i click on the add to cart button i see this error in the cart on left...

Notice: Undefined index: product_id in C:\catalog\controller\module\cart.php on line 110Notice: Undefined index: quantity in C:\catalog\controller\module\cart.php on line 110 item 0

did you ever figure this out? im getting one that ive been stuck on for days:

Undefined index: product_id in /home/www/hoodloops.com/catalog/controller/module/cart.php on line 118Notice: Undefined index: quantity in /home/www/hoodloops.com/catalog/controller/module/cart.php on line 118

any help - lmk thanx!!

OpenCart Community

add "add to cart" button on catalog product list, on home

add "add to cart" button on catalog product list, on home

Re: add "add to cart" button on catalog product list, on home

Re: add "add to cart" button on catalog product list, on home

Re: add "add to cart" button on catalog product list, on home

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom

Re: add "add to cart" button on catalog product list, on hom