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.

Fly-To-Basket Effect With jQuery DemoDownload

Sponsors Of E-Commerce Week:

SSLmatic - Cheap SSL Certificates

The HTML

HTML For The Product's Wrapper:

view sourceprint?
1.<div class="productWrap">
2.    <div class="productImageWrap"><img alt="Product1" src="images/product1.jpg" /></div>
3.    <div class="productNameWrap">Krups Coffee Maker</div>
4.    <div class="productPriceWrap">
5.        <div class="productPriceWrapLeft">$95</div>
6.        <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>
7.    </div>
8.</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:

view sourceprint?
1.<div id="basketWrap">
2.    <div id="basketTitleWrap">Your Basket</div>
3.    <div id="basketItemsWrap">
4.        <ul>
5.            <li>&nbsp;</li>
6.            <!--?php getBasket(); ?--></ul>
7.    </div>
8.</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)

view sourceprint?
01.$("#basketItemsWrap li:first").hide();
02. 
03.$(".productPriceWrapRight a img").click(function() {
04.    var productIDValSplitter    = (this.id).split("_");
05.    var productIDVal            = productIDValSplitter[1];
06. 
07.    var productX        = $("#productImageWrapID_" + productIDVal).offset().left;
08.    var productY        = $("#productImageWrapID_" + productIDVal).offset().top;
09. 
10.    if( $("#productID_" + productIDVal).length > 0){
11.        var basketX         = $("#productID_" + productIDVal).offset().left;
12.        var basketY         = $("#productID_" + productIDVal).offset().top;
13.    } else {
14.        var basketX         = $("#basketTitleWrap").offset().left;
15.        var basketY         = $("#basketTitleWrap").offset().top;
16.    }
17. 
18.    var gotoX           = basketX - productX;
19.    var gotoY           = basketY - productY;
20. 
21.    var newImageWidth   = $("#productImageWrapID_" + productIDVal).width() / 3;
22.    var newImageHeight  = $("#productImageWrapID_" + productIDVal).height() / 3;
23. 
24.    $("#productImageWrapID_" + productIDVal + " img")
25.    .clone()
26.    .prependTo("#productImageWrapID_" + productIDVal)
27.    .css({'position' : 'absolute'})
28.    .animate({opacity: 0.4}, 100 )
29.    .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
30.                                                                                                                                                                                                                                                                                                                $(this).remove();
31. 
32.        $("#notificationsLoader").html('<img src="images/loader.gif">');
33. 
34.        $.ajax({
35.            type: "POST",
36.            url: "inc/functions.php",
37.            data: { productID: productIDVal, action: "addToBasket"},
38.            success: function(theResponse) {
39. 
40.                if( $("#productID_" + productIDVal).length > 0){
41.                    $("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
42.                    $("#productID_" + productIDVal).before(theResponse).remove();
43.                    $("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
44.                    $("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
45.                    $("#notificationsLoader").empty();
46. 
47.                } else {
48.                    $("#basketItemsWrap li:first").before(theResponse);
49.                    $("#basketItemsWrap li:first").hide();
50.                    $("#basketItemsWrap li:first").show("slow");
51.                    $("#notificationsLoader").empty();
52.                }
53. 
54.            }
55.        }); 
56. 
57.    });
58. 
59.});

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