Question about writing AJAX Shopping Cart buttons

I am wanting to write a module for an AJAX style shopping cart/add to cart similar to the one on Bass Pro Shops. Not a big fan of their entire checkout process, but the add to cart function is cool. Anyway, back on track...

Where are the handlers for the add to cart buttons? I read in another thread that an AJAX approach would require rewriting handlers for each occurrence of the add to cart button, but where are they all located? And is there a way to override those functions without changing core components of the cart?

Thanks in advance for the help!

OK, I have made some modifications, added some JS to submit the form with ajax. I'm positive that I am going about this the wrong way, but here is the code.

<script type='text/javascript'>

$("form#addProduct").submit(function(){
	var product_id = $('input[name="products_id"]').val();
	var cart_quantity = $('input[name="cart_quantity"]').val();
	var securityToken = $('input[name="securityToken"]').val();
	var url = $("#addProduct").attr('action'); 

	
	/*
	$("#ajaxCart").animate({
		top: "0",
		opacity: 1
		}, 1000)
*/
	//alert(securityToken+product_id);
	
	var data= new Array();
	data['product_id'] = product_id;
	data['cart_quantity'] = cart_quantity;
	data['securityToken'] = securityToken;
	
	$.ajax({
		type: 'POST',
		url: url,
		data: data,
		success: function( data ) {
			//this is a result
			$("#ajaxCart").animate({
				top: "=+350",
				opacity: "1"
				}, 1000, function(){
					$("#ajaxCart").html("added to cart");
				})
			
		}
	});
	
	return false;
});
$("#hideCart").click(function(){
	$("#ajaxCart").animate({
		top: "-350",
		opacity: 1
		}, 1000)
	return false;
});
</script>

I have modified the zen_draw_form function as well to accept another parameter (id) so that the call can be made on the form submission.

Now, I keep getting a 302 moved temporarily when it is submitted. I am positive this is how it is supposed to work, but how can I send the add to cart info to a script to process it without getting these errors.

Thanks!

Here is a link to the current implementation.

http://design.uniqueoutdoorproducts.com/

Anybody?

OK, changed several things with the above code to accomodate the cart section already being active, refreshing the cart quantity in the displayed area, and I was trying to make it possible to add more than 1 of the item to the shopping cart. FAIL!!

What would the variable I need to pass in to make it add more than 1 product? Here is what I have tried, and it doesn't work.

<script type='text/javascript'>
var shoppingCart = false;

$("form#addProduct").submit(function(){
	var product_id = $('input[name="products_id"]').val();
	var cart_quantity = $('input[name="cart_quantity"]').val();
	var securityToken = $('input[name="securityToken"]').val();
	var url = "http://design.uniqueoutdoorproducts.com/index.php?action=buy_now&cart_quantity="+cart_quantity+"&products_id="+product_id; //$("#addProduct").attr('action'); 

	
	/*
	$("#ajaxCart").animate({
		top: "0",
		opacity: 1
		}, 1000)
*/
	//alert(securityToken+product_id);
	
	var data= new Array();
	data['product_id'] = product_id;
	data['cart_quantity'] = cart_quantity;
	data['securityToken'] = securityToken;
	
	$.ajax({
		type: 'POST',
		url: url,
		data: data,
		success: function( data ) {
			var shoppingCartUpdate = $(data).find('div#ajaxCartContainer');
			$('div#ajaxCartContainer').html(shoppingCartUpdate);

			//this is a result
			if(!shoppingCart){
			$("#ajaxCart").animate({
				top: "+=250",
				opacity: "1"
				}, 1000, function(){
					shoppingCart = true;
					//$("#ajaxCart").html("Successfully added to Cart");
				})
			}
			
		}
	});
	
	return false;
});
$("#showHideCartButton").click(function(){
	if(shoppingCart){
		$("#ajaxCart").animate({
			top: "-250"
			}, 1000)
		shoppingCart = false;
	} else {
		$("#ajaxCart").animate({
			top: "0"
			}, 1000)
		shoppingCart = true;
	}
	return false;
});
</script>

I have also tried changing the action to add_product, but that breaks even adding a single item to the cart. Really running into a wall here, any help would be appreciated.

Thanks!

184 views and no response?

skrillnet:

184 views and no response?

I can't say that I'm surprised.

What you are asking is way beyond the skills of the typical user to these forums, and as for the rest of us, you have shown more than enough knowledge to be able to figure out what you need to do for yourself. In fact you are probably already way ahead in finding a solution than any of us (if for no other reason than you have been actively working with this part of the code).

I'm not suggesting that you'll find no one here willing and able to help, and I know for a fact that if any of us can spot an 'easy' solution we will happily provide it, but if I were you, I wouldn't be holding my breath. I for one am confident that you'll eventually find a solution without our help.

Cheers
Rod

OK, I figured it was something like that. Thank you for your input!

I have dabbled with an ajax add to cart function using jquery. I think you are trying to reinvent the wheel here. You should look more at integrating a jquery plugin with the existing core code. It's much much easier. Check out the cjloader mod to take advantage of it's autoloader function. This is nice because you can specify on what pages certain scripts and files load to reduce overhead on all of the other pages. For instance, loading the jscript only on the product info page and category listing page (the main pages where the add to cart buttons are displayed). There are a bunch of cool little visual plugins like the ui bounce transfer that make the button move to visually show an action is taking place.

skrillnet:

Now, I keep getting a 302 moved temporarily when it is submitted. I am positive this is how it is supposed to work, but how can I send the add to cart info to a script to process it without getting these errors.

This is probably happening because it's going to https. If you change the link to NONSSL that might solve the problem. I was getting this with an ajax form when it was submitted and it drove me crazy until I really paid attention to what firebug was telling me.:wacko::D Once I changed the redirect link to NONSSL the 302 went away and it worked properly.

got this guy working over the weekend. As always Occam's Razor is correct, I just needed to change the jQuery ajax to post and then send the serialized form data to the usual Zen Cart processing page.

It was much easier than what I had tried to do initially, and I actually did install the cjloader to use with the Fast and Easy Checkout plugin.

Thinking about turning this into a mod. Here is a link to a working example.

design.uniqueoutdoorproducts.com

Let me know what you think, or if you can get it to break. I have tried as many options as I can. I think the only thing I haven't tried is a product with attributes. I will add one to the cart later today and check it out. But so far, I'm pretty happy with the customer interaction and animations.

Any suggestions?

Thanks!

lankeeyankee:

This is probably happening because it's going to https. If you change the link to NONSSL that might solve the problem. I was getting this with an ajax form when it was submitted and it drove me crazy until I really paid attention to what firebug was telling me.:wacko::D Once I changed the redirect link to NONSSL the 302 went away and it worked properly.

Actually turned out to be a permissions error, I was logged in as root when uploading files and didn't chown/chgrp the files.