Last Updated:

Animated interaction with the site basket

A user who has decided to buy a product on your website. A shopping cart on a shopping site is an integral design of an online store. Sometimes developers do not pay much attention to this section, so it remains a faded link in the design. We decided to fix this problem and create a wonderful design, when you click on the cart icon, the cart will turn around, without going to another page, with detailed information and the ability to continue shopping.

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

This solution is cross-browser, so it will be correctly displayed in various browsers, which is important now. And so, let's get started.

Step 1. HTML

The structure of the HTML markup of the cart consists of two main elements: a .cd-cart-trigger for launching the cart, as well as a .cd-cart for its contents.

<div class="cd-cart-container empty">
<a href="#0" class="cd-cart-trigger">
Basket
<ul class="count">
<li>0</li>
<li>0</li>
</ul> <!-- .count -->
</a>
<div class="cd-cart">
<div class="wrapper">
<header>
<h2>Basket</h2>
<span class="undo">Product removed. <a href="#0">Cancel?</a></span>
</header>
<div class="body">
<ul>
<!-- Products will be added using JavaScript -->
</ul>
</div>
<footer>
<a href="#0" class="checkout btn"><em>Checkout</em></a>
</footer>
</div>
</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->

The unordered list inside the div.body element is empty by default (when the Recycle Bin is empty). when the product is added to the cart, the list items are inserted using JavaScript.

<div class="body">
<ul>
<li class="product">
<div class="product-image">
<a href="#0"><img src="img/thumb.jpg" alt="placeholder"></a>
</div>
<div class="product-details">
<h3><a href="#0">Product name</a></h3>
<span class="price">UAH25.99</span>
<div class="actions">
<a href="#0" class="delete-item">Delete</a>
<div class="quantity">
<label for="cd-product-'+ productId +'">Quantity</label>
<span class="select">
<select id="cd-product-'+ productId +'" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<!-- ... -->
</select>
</span>
</div>
</div>
</div>
</li>
<!--other items added to cart -->
</ul>
</div>

With the markup, we figured out, now we will proceed to the next step, in which we will talk about adding visual design to our elements.

Step 2. CSS

In styles, the .cd-cart and .cd-cart-trigger elements are responsible for committing the basket to the page and moving materials outside the viewport (using translateY) when an item is added to the cart, with the .empty class being removed from the .cd-cart-container element of the recycle bin.

.cd-cart-trigger,
.cd-cart {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.empty .cd-cart-trigger,
.empty .cd-cart {
/* скрыть корзину */
transform: translateY(150px);
}

As for the animation of adding products to the cart, we set a fixed height and width to the div.wrapper value (we do the same for the value of the a.cd-cart-trigger); When the recycle bin is open, we use the .cart-open class to animate its height and width by revealing the contents of the cart.

.cd-cart .wrapper {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
overflow: hidden;
height: 72px;
width: 72px;
border-radius: 6px;
transition: height .4s .1s, width .4s .1s, box-shadow .3s;
transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
background: #ffffff;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}
.cart-open .cd-cart .wrapper {
height: 100%;
width: 100%;
transition-delay: 0s;
}

The .deleted class is used to remove an item from the Recycle Bin: the deleted item has an absolute position, and the cd-item-slide-out is used to create a slide effect.

.cd-cart .body li.deleted {
position: absolute;
left: 1.4em;
width: calc(100% - 2.8em);
opacity: 0;
animation: cd-item-slide-out .3s forwards;
}
@keyframes cd-item-slide-out {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(80px);
opacity: 0;
}
}

If the user clicks Cancel, the .deleted class is deleted.

Step 3. JavaScript

When the user clicks on the .cd-add-to-cart button, the addProduct() function is used to insert a new list item inside the .body > ul element. In the description of the goods, we use our own text, which you will replace with yours:

function addProduct()
 {
//product information

var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder "></a></div><div class="product-details">
<h3><a href="#0">Product name</a></h3>
<span class="price"> Price</span>
<div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product -'+ productId +'">Quantity</label>
<span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1"> 1</option>
<option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5 ">5</option>
<option value="6">6</option><option value="7">7</option>
<option value="8">8</option>
<option value= "9">9</option>
</select>
</span>
</div>
</div>
</div>
</li>');
cartList.prepend(productAdded);
}

Additional features, such as updateCartCount() or updateCartTotal(), have been defined to update the cart counter when new products are added or removed from the cart, and when the number of products added to the cart has been changed.