In this 3rd day of the “WRD E-Commerce Week“, we will be adding a chic fly-to-basket effect to our previously created Ajaxed shopping cart using jQuery.

Rather than the complete HTML structure & PHP code that adds/removes the products, we'll be focusing on the details related with  the effect.

Fly To Basket With jQuery

To findout the details of the complete HTML structure & PHP code, please check our post: Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP. And, a full working example can be found in the download package.

Download

The HTML

HTML For The Product's Wrapper:

<div class="productWrap">
	<div class="productImageWrap"><img alt="Product1" src="images/product1.jpg" /></div>
	<div class="productNameWrap">Krups Coffee Maker</div>
	<div class="productPriceWrap">
		<div class="productPriceWrapLeft">$95</div>
		<div class="productPriceWrapRight"><a href="inc/functions.php?action=addToBasket&amp;productID=1" onclick="return false;"> <img alt="Add To Basket" height="32" id="featuredProduct_1" src="images/add-to-basket.gif" width="111" /> </a></div>
	</div>
</div>

The part we'll focus is the contents inside <div class="productPriceWrapRight"> which wraps the “add-to-basket” button.

The Highlights:

  • a link with onClick="return false; value which means it won't be active if JavaScript is active (to make the script unobtrusive)
  • add-to-basket image has an unique ID: id="featuredProduct_1" which we'll use to understand the button of which product is clicked

HTML For The Basket:

<div id="basketWrap">
	<div id="basketTitleWrap">Your Basket</div>
	<div id="basketItemsWrap">
		<ul>
			<li>&nbsp;</li>
			<!--?php getBasket(); ?--></ul>
	</div>
</div>

The Highlights:

  • we have an empty <span> with id="notificationsLoader" to show a loading image
  • we keep an empty div to be able to insert any data before/after them
  • we call a PHP function: <?php getBasket(); ?> to get the basket data when the page is first loaded.

The JavaScript (jQuery)

$("#basketItemsWrap li:first").hide();

$(".productPriceWrapRight a img").click(function() {
	var productIDValSplitter 	= (this.id).split("_");
	var productIDVal 			= productIDValSplitter[1];

	var productX 		= $("#productImageWrapID_" + productIDVal).offset().left;
	var productY 		= $("#productImageWrapID_" + productIDVal).offset().top;

	if( $("#productID_" + productIDVal).length > 0){
		var basketX 		= $("#productID_" + productIDVal).offset().left;
		var basketY 		= $("#productID_" + productIDVal).offset().top;
	} else {
		var basketX 		= $("#basketTitleWrap").offset().left;
		var basketY 		= $("#basketTitleWrap").offset().top;
	}

	var gotoX 			= basketX - productX;
	var gotoY 			= basketY - productY;

	var newImageWidth 	= $("#productImageWrapID_" + productIDVal).width() / 3;
	var newImageHeight	= $("#productImageWrapID_" + productIDVal).height() / 3;

	$("#productImageWrapID_" + productIDVal + " img")
	.clone()
	.prependTo("#productImageWrapID_" + productIDVal)
	.css({'position' : 'absolute'})
	.animate({opacity: 0.4}, 100 )
	.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
																																																																												$(this).remove();

		$("#notificationsLoader").html('<img src="images/loader.gif">');

		$.ajax({
			type: "POST",
			url: "inc/functions.php",
			data: { productID: productIDVal, action: "addToBasket"},
			success: function(theResponse) {

				if( $("#productID_" + productIDVal).length > 0){
					$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
					$("#productID_" + productIDVal).before(theResponse).remove();
					$("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
					$("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
					$("#notificationsLoader").empty();

				} else {
					$("#basketItemsWrap li:first").before(theResponse);
					$("#basketItemsWrap li:first").hide();
					$("#basketItemsWrap li:first").show("slow");
					$("#notificationsLoader").empty();
				}

			}
		});  

	});

});

Highlights:

  • splitting the ID of the clicked “add-to-basket” image which is “featuredProduct_1″ from the “_” character & get the databaseID of the product
  • using jQuery's offset, we get the current x-y position of the product
  • run a “if-then-else” clause which:
    • if that product is already in the basket: if( $("#productID_" + productIDVal).length > 0){ (if an element with that ID exists in the basket), if exists, then we get the x-y positions of that element using “offset” again, so we can target that element while flying our product
    • if that product isn't in the basket: then we get the x-y positions of a static element in the basket HTMl area (#basketTitleWrap in our case)
  • very important: we create 2 variables; gotoX & gotoY by subtracting the element in the basket's position from the product's position. And we get the distance product needs to animate (fly) in x's & y's
  • again create 2 variables named newImageWidth & newImageHeight which are x times (3 in our case) smaller the size of our product's image. This is used to create a resizing effect while flying the product to the basket
  • and, let's fly the product: targeting the product image to be flied; $("#productImageWrapID_" + productIDVal + " img"). We clone it with jQuery's clone, place inside the same element where the original image exists with prependTo & set it's position to absolute. The next thing, we decrease its opacity so it starts in a little transparent look before the animation. And, we fly it by mentioning the marginLeft & marginTop values we calculated. At the same time, we make it more transparent & resize it. Also, we set the duration of the animation (1200 in our case).
  • As a callback function (after the animation ends), we remove the cloned image from the DOM, show the Ajax loader & post a query to our PHP page. That's all.

P.S. To make the example work on your side, you should be creating a new database with the jBasket.sql file inside the download package & configure the database connection information inside “inc/db.php” file.

Answerbase E-Commerce
WebResourcesDepot Feed