Add To Cart Interaction

Add To Cart Interaction

A floating cart that slides in when the user decides to buy an item.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

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.

Join our newsletter

Get our monthly recap with the latest CodyHouse news