Flying product Images to shopping cart using jquery effect

Abhigyan Singh 12th Jul 2020

This tutorial going to show you how to create flying product items to the shopping cart in your Ecommerce Website. When a visitor click on 'add to cart' button, the container of the product will fly into the cart on the header. This effect is very attractive in ecommerce portal. Here we use jquery image effect to fly image into shopping cart. Lets create a simple working example.

Step 1 - create the HTML and include files

First of all, let's build our basic HTML to make a product list page. We are going to use Bootstrap (https://getbootstrap.com). We created a simple Bootstrap page. The head section only contains the title and include the bootstrap.min.css and our style.css (and some IE only script). At the end of the body tag we are including jquery, bootstrap.min.js and our script.js file. After that we wrote a simple navigation bar with a brand name, some example links and the shopping cart link on the right side. This link is going to take us to the cart page, but the link label only show the price of the cart. Then we made a container with a Products title and then a row with products. Every single product has an image, title, price, short description and an Add to Cart button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo of Flying products image to shopping cart in jquery</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">DiscussDesk</a>
</div>

<div class="collapse navbar-collapse" id="collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-price="0">
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <strong>$0</strong></a></li>
</ul>
</div>
</div>
</nav>

<div class="container">
<h1 class="product-title">Products</h1>
<div class="row">
<div class="col-sm-3 product" data-price="5">
<a href="#"><img src="images/product.jpg" alt="" class="img-responsive"></a>
<div class="title">
Product 1
<span>$5</span>
</div>
<div class="description">
This amazing item is what you wanted since you borned.
</div>
<button class="btn btn-default btn-block"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
</div>

<div class="col-sm-3 product" data-price="8">
<a href="#"><img src="images/product.jpg" alt="" class="img-responsive"></a>
<div class="title">
Product 2
<span>$8</span>
</div>
<div class="description">
This amazing item is what you wanted since you borned.
</div>
<button class="btn btn-default btn-block"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
</div>

<div class="col-sm-3 product" data-price="2">
<a href="#"><img src="images/product.jpg" alt="" class="img-responsive"></a>
<div class="title">
Product 3
<span>$2</span>
</div>
<div class="description">
This amazing item is what you wanted since you borned.
</div>
<button class="btn btn-default btn-block"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
</div>

<div class="col-sm-3 product" data-price="10">
<a href="#"><img src="images/product.jpg" alt="" class="img-responsive"></a>
<div class="title">
Product 4
<span>$10</span>
</div>
<div class="description">
This amazing item is what you wanted since you borned.
</div>
<button class="btn btn-default btn-block"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Cart</button>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Step 2 - writing javascript codes

Firstly create the document.ready function - this function is only triggered when the page is loaded completely. Next step is to check whether product buttons are exists (so we are on the products page). After that create a function on click event for buttons under the product class. When the button is clicked, we need to get the offset of the product (distance from page top and left). Then make a clone of that product box which position is fixed and set the left, top, width and height attributes to appear on the right position, then append to the container of the products.

$(document).ready(function() {

if ( 0 < $('.product button').length ) {
$('.product button').click(function() {
var offset = $(this).parent().offset();
$(this).parent().clone().addClass('product-clone').css({
'left' : offset.left + 'px',
'top' : parseInt(offset.top-$(window).scrollTop()) + 'px',
'width' : $(this).parent().width() + 'px',
'height' : $(this).parent().height() + 'px'
}).appendTo($('.product').parent());

var cart = $('nav .navbar-right strong').offset();
$('.product-clone').animate( { top: parseInt(cart.top-$(window).scrollTop()) + 'px', left: cart.left + 'px', 'height': '0px', 'width': '0px' }, 800, function(){
$(this).remove();
var price = parseInt($('nav .navbar-right').attr('data-price'));
var productPrice = parseInt($(this).attr('data-price'));
var cartPrice = parseInt(price+productPrice);
$('nav .navbar-right strong').html('$' + cartPrice);
$('nav .navbar-right').attr('data-price', cartPrice);
});
});
}

});

Now we have a cloned product box above our product box. Now let's measure the offset of the cart link in the header. After that animate the cloned box to fly to cart's offset and set the height and weight to 0px so the box will minimizing. When the animate function ran, we need to remove the cloned box and calculate the new price of the cart. Simply get the current price of the cart and the price of the product and then and them together. Next step is to write the new price into html and refresh data prices.

Summary

We made a simple product listing page with a navigation bar. Every product has an Add to Cart button. When a visitor click the button, the product box will fly to the cart link on the navigation bar. This code is working with fixed navigation bars as well.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

ALSO ON DISCUSS DESK