Fly-To-Basket Effect With jQuery

21°

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.

Search