side shopping cart preview
May 26, 2014 | 22 Feedbacks

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.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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.

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.

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.

Changelog

June 8, 2014
  • Fixed bug with transition on firefox - by CodyHouse
May 29, 2014
  • Fixed a bug that showed 2 scrolling bars on ie and firefox when cart was visible - by CodyHouse
May 26, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.