Add to Cart Interaction
Add to Cart Interaction
We’re used to different patterns when it comes to the “add to cart” process. The basic idea behind this pattern is to notify the user that an item has been added to the cart, and provide her/him with a link to proceed to the checkout.
We’ve been experimenting with the idea of hiding the cart by default, and showing it when the user clicks the “add to cart” button. This way the user can either check the cart and proceed to checkout or continue shopping. The cart will stick to the bottom of the page, accessible at any time.
Icons: Nucleoapp.com
Creating the structure
The cart HTML structure is composed of two main elements: a .cd-cart-trigger
for the cart trigger and the cart total, and a .cd-cart
for the cart content.
<div class="cd-cart-container empty">
<a href="#0" class="cd-cart-trigger">
Cart
<ul class="count"> <!-- cart items count -->
<li>0</li>
<li>0</li>
</ul> <!-- .count -->
</a>
<div class="cd-cart">
<div class="wrapper">
<header>
<h2>Cart</h2>
<span class="undo">Item removed. <a href="#0">Undo</a></span>
</header>
<div class="body">
<ul>
<!-- products added to the cart will be inserted here using JavaScript -->
</ul>
</div>
<footer>
<a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
</footer>
</div>
</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->
The unordered list inside the div.body
element is empty by default (empty cart); when a product is added to the cart, a list item element is 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">$25.99</span>
<div class="actions">
<a href="#0" class="delete-item">Delete</a>
<div class="quantity">
<label for="cd-product-'+ productId +'">Qty</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 products added to the cart -->
</ul>
</div>
Adding style
The .cd-cart
and .cd-cart-trigger
elements are both in position fixed and moved outside the viewport (using a translateY
). When an item is added to the cart, the .empty
class is removed from the .cd-cart-container
and the cart is shown.
.cd-cart-trigger,
.cd-cart {
position: fixed;
bottom: 20px;
right: 5%;
transition: transform .2s;
}
.empty .cd-cart-trigger,
.empty .cd-cart {
/* hide cart */
transform: translateY(150px);
}
As for the cart animation: we assign a fixed height and width to the div.wrapper
element (the same of the a.cd-cart-trigger
); when the cart is open, we use the .cart-open
class to animate its height and width while revealing the cart content.
.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 cart: the deleted element has an absolute position, and the cd-item-slide-out
animation is used to create the slide-out effect.
.cd-cart .body li.deleted {
/* this class is added to an item when it is removed form the cart */
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 on ‘Undo’, the .deleted
class is removed and the element is reinserted in the list.
Events handling
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. The product details used are placeholders, which should be replaced by the real product info:
function addProduct() {
//this is just a product placeholder
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">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</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 functions, like the updateCartCount()
or updateCartTotal()
, have been defined to update the cart count and total when new products are added/deleted or when the quantity of a product added to the cart is changed.