Animation of adding products to the cart using jQuery


In order for the client to understand that the product that he wanted to buy in the online store was added to the cart, you need to clearly show it. You can make a color change button to add goods to the cart, or change the text.
And you can do it through the animation of the object. And there is already enough imagination. You can make the product card itself fly into the cart and more.

Let me give you an example of such a small animation implemented using jQuery.
The add to cart button should be wrapped.
We write such a JavaScript code in which, by clicking on the button to add goods to the cart, an object is created that flies to the cart.

$('.addToCart').click(function(e){ /* Click on the "Add to Cart" button */
	var butWrap = $(this).parents('.but-wrap'); /* Remember the button wrapper */
  	butWrap.append('<div class="animtocart"></div>'); /* Add a circle to the wrapper, which will be animated and fly away from the button to the basket */
    $('.animtocart').css({ /* Assign styles to the circle and mouse cursor position */
    	'position' : 'absolute',
      	'background' : '#FF0000',
      	'width' :  '25px',
      	'height' : '25px',
      	'border-radius' : '100px',
      	'z-index' : '9999999999',
      	'left' : e.pageX-25,
    	'top' : e.pageY-25,
    });
	var cart = $('.cart').offset(); /* We get the location of the basket on the page so that the circle flies there */
	$('.animtocart').animate({ top: cart.top + 'px', left: cart.left + 'px', width: 0, height: 0 }, 800, function(){ /* We make an animation of the flight of the circle from the button to the basket and at the end, delete it */
		$(this).remove();
    });
});

For example, you can create such HTML code

<div class="product"> <!-- Card Product -->
	<img src="http://waarmedia.com/english/file/2019/04/nuts.jpg" alt="" class="product-img">
	<span class="product-name">Nuts</span>
	<div class="but-wrap">
		<div class="addToCart">add to cart</div>
	</div>
</div>

<div class="cart">Cart</div> <!-- Cart -->

and this CSS

body{
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}
.cart{
  position: absolute;
  display: table;
  width: auto;
  height: auto;
  box-sizing: border-box;
  background: #C94449;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  top: 10px;
  right: 10px;
}
.product{
  position: relative;
  display: table;
  width: 300px;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #262626;
  border-radius: 10px;
}
	.product-img{
	  position: relative;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	  box-sizing: border-box;
	  margin-bottom: 10px;
	}
	.product-name{
	  position: relative;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	  text-align: center;
	  margin-bottom: 10px;
	}
	.but-wrap{
	  position: static;
	  display: inline-block;
	  width: 100%;
	  height: auto;
	}
	  .addToCart{
		position: relative;
		display: table;
		width: auto;
		height: auto;
		box-sizing: border-box;
		background: #FF0000;
		border-radius: 5px;
		padding: 8px 14px;
		font-size: 15px;
		color: #fff;
		margin: auto;
		cursor: pointer;
	  }

The result should be like this




Connect

If you have any questions, want to get individual advice or you have an interesting offer, you can contact via the feedback form.

Or write to the email info@bobreod.ru





By submitting the form, you agree to our privacy policy