Help With Ajax Cart

JavaScript
1

Hi guys,

I’m normally pretty ok at JQuery but I need some help with the following code. It is to make the product image appear to fly across the screen and into the shopping cart when the user clicks buy.

It is functioning ok but I have changed the layout because I am customizing a template and now where it originally started to animate is not where I have repositioned it. You will see what I mean if you follow the hyperlink below:

http://www.wavemobilephones.com/index.php?route=product/product&path=60_64&product_id=1232

What I need to do is to be able to re-position where the product image flies off from so I would appreciate either a rework of the code or possibly suggesting a way in which I could slow down the process so that I can work it out for myself.


	$('#add_to_cart').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product :input'),
			success: function (html) {
				$('#module_cart .middle').html(html);
			},	
			complete: function () {

				var image = $('#image').offset();
				var cart  = $('#module_cart').offset();
	
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" 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(),
					height : $('#module_cart').height()
				};		
	
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});
				
				location.href = "http://www.wavemobilephones.com/index.php?route=checkout/cart";		
			}			
		});			
	});

thanks

Silversufer

2

So it looks like it’s almost working correctly. The one thing that’s messing it up is the “#product_holder” div as it has position:relative; on it, so the image you’re trying to position absolutely is basing it’s position from that. There are two possible workarounds here, one is that you remove position:relative; from the #product_holder div, which could potentially break things (depending on why you made it relative).

The other solution, which might be better, is to append the image to the <body> instead, that way it’s positioning will be relative to the viewport (like before).

3

Thanks very much John, spot-on, in the end I just calculated the new co-ordinates by trial and error, was easier because I had moved everything around from its original template positioning. Really helped me to understand the JQuery better thanks.