Side Shopping Cart

Side Shopping Cart

This animated side cart is a smart and not obtrusive way to let users jump in and out from the list of products they want to buy, without having to refresh the page or fire a popup.

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 🙌

CSS3 could lead to an inflation of animations and transitions. Sometimes though, this power can be used for a noble intent: a side cart, just a click away from the user, is something smart. A good example is the CreativeDash online store.

The experience is similar to the mobile apps, meaning people are used to see content coming from the side. Besides users can easily remove items from the cart, which I think is something good: the more customers feel in control, the more they trust the seller.

Lets look at the code!

Creating the structure

The HTML is quite basic. The #cd-cart-trigger is used to fire the shopping cart. The product gallery is wrapped inside the <main> element. The empty #cd-shadow-layer is used to blur the background when the cart is visible. The cart items are organized into an unordered list.

<header>
   <!-- logo and menu here -->
   <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
</header>

<main>
   <!-- content here -->
</main>

<div id="cd-shadow-layer"></div>

<div id="cd-cart">
   <h2>Cart</h2>
   <ul class="cd-cart-items">
      <li>
         <!-- ... -->
      </li>

      <li>
         <!-- ... -->
      </li>
   </ul> <!-- cd-cart-items -->

   <div class="cd-cart-total">
      <p>Total <span>$39.96</span></p>
   </div> <!-- cd-cart-total -->

   <a href="#0" class="checkout-btn">Checkout</a>

   <p class="cd-go-to-cart"><a href="#0">Go to cart page</a></p>
</div> <!-- cd-cart -->

Adding style

The cart is placed off the canvas by giving it a position:fixed; and a right: -100%; When the user clicks on the cart icon, we use jQuery to add the .speed-in class to the #cd-cart. This class modifies the right value from -100% to 0. All what remains to do is adding a CSS3 transition to the right value to achieve the smooth animation.

The -webkit-overflow-scrolling: touch; is used to smooth the scrolling on touch devices (webkit browsers). It's recommended when you use the overflow property, which causes scrolling to be buggy.

#cd-cart {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;

  /* header height */
  padding-top: 50px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  transition: right 0.3s;
} #cd-cart.speed-in { right: 0; }

Events handling

We didn't do a lot in jQuery, apart from adding classes according to specific events. One thing to note, though, is that in the starting HTML structure we put the navigation outside the <header>. Since we created this resource starting from mobile, we wanted the menu to slide in from the side, just like the cart - but from the opposite direction. To do so, it was easier for us to move the navigation outside the header. Once the user reaches a viewport size large enough (1200px in our demo), we use jQuery to move the navigation inside the header.

<header>
   <div id="logo"></div>

   <div id="cd-hamburger-menu"><a class="cd-img-replace" href="#0">Menu</a></div>
   <div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>

   <!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>

<nav id="main-nav">
   <ul>
      <li><a href="#0">Home</a></li>
      <li><a href="#0">About</a></li>
      <li><!-- ... --></li>
   </ul>
</nav>
function move_navigation( $navigation, $MQ) {
   if ( $(window).width() >= $MQ ) {
      $navigation.detach();
      $navigation.appendTo('header');
   } else {
      $navigation.detach();
      $navigation.insertAfter('header');
   }
}

Join our newsletter

Get our monthly recap with the latest CodyHouse news