Fly-To-Basket Effect With jQuery

22°

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:

[sourcecode language=”html”]

Product1
Krups Coffee Maker
$95

[/sourcecode]

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:

[sourcecode language=”php”]

Your Basket
  •  

[/sourcecode]

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)

[sourcecode language=”javascript”]
$(“#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(‘‘);

$.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();
}

}
});

});

});
[/sourcecode]

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.

44 Comments
  1. Reply Francesco July 29, 2009 at 3:24 AM

    This is beautiful and creative.

  2. Reply Nils Riedemann July 29, 2009 at 4:09 AM

    Nice… but buggy… at least under Safari.

    Double Click => 3 Items
    Tripple Click => 7 Items

  3. Reply Umut M. July 29, 2009 at 4:17 AM

    @Nils,
    Nice catch. An easy fix can be disabling the button until the function is completed.

    But, thinking why this may happen and couldn’t findout of something solid, any ideas?

  4. Reply Jonathan Foucher Web Design July 29, 2009 at 9:04 AM

    Same with Firefox. You need to wait for the function to complete before accepting another click. I’ve already seen the same type of problems occur with jQuery, although in different contexts. I think it’s probably a bug in jQuery rather than in the code presented here.
    A workaround is to put an apropriate timer in place at the first click, and then only do the second click actions if the timer has expired.
    Anyway, good snippet!

  5. Reply gecko July 30, 2009 at 9:37 PM

    I need dump (schema) of table.

  6. Reply Umut M. July 30, 2009 at 11:41 PM

    @gecko,
    The dump file exists in the download package.

  7. Reply AbhiTechBlog July 31, 2009 at 8:26 AM

    Excellent! thanks a lot!

  8. Reply maria July 31, 2009 at 3:57 PM

    anyone tested with magento?

  9. Reply John August 13, 2009 at 4:38 AM

    Doesn’t seam to support keyboard access, which is kind of silly as you would be ruling out a proportion of your users.

  10. Reply Bry August 16, 2009 at 6:05 AM

    Hi there, great cart WRD thanks for posting this and all the other great stuff on your site…can i ask a favour? can you please add a checkout facility to the cart…with a form for details or at least let me know how I could add that to the cart. I would really appreciate it. Thanks B

  11. Reply Rob August 30, 2009 at 2:47 PM

    Nice tutorial. Although these look good I personally don’t it’s wise to depend on users having JavaScript active on such an important part of your site, as if a user doesn’t have js turned on you’re ruling out some users – just my personal view.

    This also crashes my Firefox if I click multiple times 🙁 E.g. to test added 32 times 🙂 Think you definately need a function to either disbale the button or start a timer.

  12. Reply Lio September 26, 2009 at 11:09 PM

    Hello bro..

    im confuse to download this, would you explain to me ow to download it?

    thanks before hehehe lol

  13. Reply Umut M. September 27, 2009 at 2:30 AM

    @Lio,

    After subscribing to the RSS feed, while reading th elatest WRD post, at the bosttom of the post, you’ll a title named “Special Downloads”, you can find the download link there.

  14. Reply xaviergnu September 30, 2009 at 3:22 AM

    hi all!

    tnx for a great script, however I have an issue with posting vars from products page.

    I’m having a variables from form (checkboxes, radio buttons, dropdown menus…) that calculates price of a product and then I have to POST it to DIV on a right hand box basket.

    Is it possible to change present link (a href=”inc/functions.php?action=addToBasket&productID=1″ rel=”nofollow”) to ‘submit’ button of a form with all values from it?

    tnx in advance,

    X.

  15. Reply Umut M. September 30, 2009 at 5:00 AM

    @xaviergnu,

    With the click of the submit button, with a function like:
    $(“.button”).click(function() {

    you can pass all your form parameters with jQuery “ajax” like:
    $.ajax({
    type: “GET”, …..

    Suggest digging: http://docs.jquery.com/Ajax/jQuery.ajax

    Cheers.

  16. Reply v4L September 30, 2009 at 7:44 AM

    very nice….=) i like this tutorial so much….

  17. Reply cajrix October 2, 2009 at 3:23 AM

    Nice… but buggy… at least under Safari.

    Double Click => 3 Items
    Tripple Click => 7 Items

    — did anyone solve the problem?
    it looks ok in chrome, but in firefox, ie it add 2 items, can u help me?

  18. Reply yalamber subba October 8, 2009 at 10:54 PM

    is there any way we can limit the quantity of items to add in the basket? I need this feature in this implementation. It would be nice feature if any one could make it. thanks

  19. Reply indialike December 16, 2009 at 5:52 AM

    Very nice and useful tutorials to web designers,
    Thanks for posting.

  20. Reply satish December 29, 2009 at 2:28 AM

    Very nice man , its for a great help for me.

  21. Reply hadiya May 1, 2010 at 1:57 PM

    thank u it;s amazing >>>>.
    how can i add Quantity to the basket

  22. Reply Giu May 29, 2010 at 4:10 AM

    This is nice, but how can I limit to just one item to the basket. In the case that the items are unique, is there a way to disable button “add to basket” after one click and the resume the button if it will be removed from the basket?
    Thaks for helping me.

  23. Reply Mageshkumar June 2, 2010 at 5:26 AM

    This is nice, but how can i create the Order Id,that means if one person selecting more that products means ,for that i have to create order id,indeed i tried up my level, i didn’t get any can help me……

    Sample:

    Person-1

    Id Product Name No.of Items Price OrderId

    1 Krups Coffee Maker(2 items) – $190 5001
    2 Keurig Cup(7 items) – $266 5001

    Person-1

    Id Product Name No.of Items Price OrderId

    1 Coffee Pro (6 items) – $774 5002
    2 Keurig Cup (7 items) – $266 5002
    3 Coffee Maker (29 items) – $2755 5002

  24. Reply Robin Henriksson June 6, 2010 at 4:03 PM

    Hello!

    When i have implemeted the code on my site, and uses the link to add a product to my basket, it makes to entries in the table, do you know why?

    Thanks in advance
    Robin

  25. Reply Dante June 18, 2010 at 10:05 AM

    A solution to the fact that it crashes when clicked multiple times can be seen here : http://stackoverflow.com/questions/3064886/disable-link-while-animated-basket

    thanks to EndangeredMassa

  26. Reply werq July 25, 2010 at 11:37 AM

    Very good tutorial

  27. Reply vishal September 4, 2010 at 2:39 AM

    Hello,
    if you add” total:” at the end of basket, it will looks more professional, please do it.

    thanks,
    vishal

  28. Reply Arif October 19, 2010 at 1:41 AM

    Nice tutorial

  29. Reply oscar December 6, 2010 at 12:48 PM

    thanks…! (:

  30. Reply Umut M. December 7, 2010 at 4:45 AM

    The error in the demo and download is fixed. A silly typo 🙂

  31. Reply ashok April 5, 2011 at 7:23 AM

    i want to add total in basket ….how to do…

  32. Reply pahaya May 5, 2011 at 11:02 PM

    cool

  33. Reply Charlene May 8, 2011 at 9:18 PM

    helped me a lot ! thx !!

  34. Reply Ciro August 27, 2011 at 11:48 AM

    Excelente!!!!GOOD JOB, tranks for share it

  35. Reply jayendra November 17, 2011 at 4:44 AM

    Great tutorial.

  36. Reply Deby November 21, 2011 at 2:30 AM

    Sorry for someone can show me how to get solution if I get the something wrong an error, insert query failed ?

  37. Reply Shanmuga Sundaram March 19, 2012 at 11:16 AM

    Hi Frds

    I want Fly to Basket Effect ( without php ) with asp.net

  38. Reply Utham April 20, 2012 at 3:36 AM

    Very great post… finally I got what I am looking for… I implemented this effect in my application.. But the code is not exact mentioned above… I just copied the LOGIC not the CODE.
    Working in IE, Chrome, Firefox…

  39. Reply Narendra May 2, 2012 at 10:47 AM

    how to store data into the database using jQuery?

  40. Reply Umut M. May 3, 2012 at 5:34 AM

    @Narendra,

    It is a good idea to send an Ajax request to a PHP file with jQuery and saving the data to db using PHP (or any other scripting language).

  41. Reply Luis May 8, 2012 at 12:11 PM

    When de page reload de items into the basket disappear. Solution or suggestions?

  42. Reply shihabudheen May 30, 2012 at 2:10 AM

    Excellent…i like very much..thank you a lot

  43. Reply lopar September 10, 2012 at 11:34 AM

    Hello, It looks great. Is it for jquerry 1.3.2 ? My question is – what code should I remove so I can use only the js script? I need only the fly effect, no need to connect to database at all.
    Thank you

  44. Reply kapur April 4, 2016 at 12:59 AM

    Hi, i am using the script to fly product in cart. It’s running ok in firefox but in chrome and safari
    var basketX = $(“#basketTitleWrap”).offset().left;
    var basketY = $(“#basketTitleWrap”).offset().top;

    calculation is showing different value. I think firefox is showing right values. Can you please tell me the trick?

Leave a reply

Search