Fly-To-Basket Effect With jQuery

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.

  • Francesco

    This is beautiful and creative.

  • Nice… but buggy… at least under Safari.

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

  • @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?

  • 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!

  • I need dump (schema) of table.

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

  • Excellent! thanks a lot!

  • maria

    anyone tested with magento?

  • John

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

  • Bry

    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

  • Rob

    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.

  • Lio

    Hello bro..

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

    thanks before hehehe lol

  • @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.

  • xaviergnu

    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.

  • @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.

  • v4L

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

  • cajrix

    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?

  • 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

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

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

  • hadiya

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

  • Giu

    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.

  • Mageshkumar

    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

  • Robin Henriksson

    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

  • Dante

    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

  • Very good tutorial

  • vishal

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

    thanks,
    vishal

  • Nice tutorial

  • oscar

    thanks…! (:

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

  • ashok

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

  • pahaya

    cool

  • Charlene

    helped me a lot ! thx !!

  • Ciro

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

  • Great tutorial.

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

  • Hi Frds

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

  • Utham

    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…

  • Narendra

    how to store data into the database using jQuery?

  • @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).

  • Luis

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

  • shihabudheen

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

  • lopar

    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

  • kapur

    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?

Search