quick-add-to-cart
August 6, 2015 | 14 Feedbacks

Quick Add To Cart

A handy snippet to let users customize a product directly from the products gallery, and add it to the cart.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Taking advantage of bigger screens shouldn’t be limited to the use of bigger images/elements. We can put those extra pixels to work by enhancing the user experience with additional features.

The standard UX for a product gallery is: user clicks on a product he likes, then navigates to the single product page. From here he’s supposed to select some options, and finally add the product to the cart. Nothing is broken in this process. However, a returning customer, who’s familiar with the products line, may find it handy to select and buy a product directly from the gallery!

By showing customers a “quick add to cart” panel while they interact with a product preview, we can reduce the number of steps that separate a user from purchasing an item, and, potentially, increase our conversion rate.

Icons from our Nucleo library.

Creating the structure

The main HTML structure is an unordered list. Each list item contains an unordered list (product image slider), a div.cd-customization (with the Add To Cart button and the product customization options) and a div.cd-item-info (with product title and price).

Adding style

Let’s start from the product slider. By default, the list items are in absolute position and translated to the right (outside their .cd-gallery parent) so they are not visible. We then used 2 classes to properly style them: .selected (added to the first list item – visible product image) and .move-left ( product image on the left – not visible).

About the product customization options: the .cd-customization element is shown when a user hovers over the product; it’s in absolute position and placed at the bottom of its .cd-single-item parent element.
To create the customization options (color and size), we used two different <ul> elements, both wrapped in a div[data-type="select"] (div.size and div.color). The <ul> element is in absolute position and centered relative to its parent while the div[data-type="select"] has a fixed height (34px) and an overflow: hidden. Each list item inside the unordered list has a height equal to the div[data-type="select"] so that, by default, only the selected option is visible.
When a user clicks one of the two customization options, the overflow property of the div[data-type="select"] is set to visible so that the entire <ul> element is shown.

To make sure that the selected <li> item is always visible, we had to rearrange the list items inside their <ul> parent according to the selected option. To do that, we created the .selected-n class (where n is the item selected). For example, the .selected-3 class is added to the div[data-type="select"] when the third list item is selected:

About the Add To Cart animation: the .add-to-cart button is composed by an <em> (button text message) and a svg (check icon). By default, the svg is not visible (it’s moved to the right, outside the button).
When the product is added to the cart, the .is-added class is added to the .add-to-cart button: the <em> (text) is hidden (moved to the left), while the svg is moved  back inside the button, and the drawing animation starts:

About the svg drawing animation, we used the two svg attributes stroke-dasharray and stroke-dashoffset. The first one lets you specify dash length and gaps, while the second one lets you change where the dasharray starts. In our case, we set stroke-dasharray=”19.79 19.79″ and stroke-dashoffset=”19.79″ (where 19.76 is the path length):

and then animate the dashoffset value to 0 to create the drawing animation.

If you’re interested in more details about animating svg icons, you can give a look at what we did in the article Animated SVG Icon.

Note: to animate the dashoffset value, we could have used css transitions (rather then using the animate() jQuery method), but unfortunately IE11 seems to have a bug with transitions on some svg properties.

Last note for touch devices: we used Modernizer to target touch devices and add a .cd-customization-trigger (settings icon) to trigger the.cd-customization element visibility.

Events handling

When a user interacts with one of the product customization options (e.g, the colors option), the .hover class is added to the corresponding .cd-single-item element. This class sets the .cd-customization element to visible, so that it doesn’t disappear if the cursor leaves the product (we assumed that the user is interested in the product since he has interacted with it, and doesn’t want to lose the options if he accidentally leaves the product). For the same reason, the .hover class is removed from all the other products (so that user can focus only on the product he is interacting with). The resetCustomization() function has been defined to do that:

Besides, we used jQuery to implement the product slider (different color images) and the updateCart() function (to update the number of products added to the cart).

Changelog

Aug 6, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • aifaz

    after clicking add to cart button the right sign appear is cool, but remains same and saying add to cart again or instead it should display counter to increase the quantity.

  • Sivo

    I would totally agree with Aifaz, on the UX point of view, the text remaining as “Add to cart” after have done the action is going to confuse the user. Maybe something like “Added to cart” with some kind of color change or whats over as Aifaz says, adding some kind of counter, would be great.

    :)

  • http://codyhouse.co/ Sebastiano Guerriero

    @disqus_sS7UHcAPLH:disqus @aifaz:disqus interesting point guys! Although keep in mind this nugget is a starting point: in production it needs to be updated according to the website goal. e.g. there are some products for which a counter doesn’t make sense. Or you may want to develop a dropdown cart that shows up after you hit the “add to cart” button.

  • http://www.antonbacaj.com Anton Bacaj

    This example is too contrived, plus it is lacking on the UX.

    1. I couldn’t tell where my shopping cart was.
    2. Even when the check icon appeared on the button, I was not sure if the item was in my cart, again because it was hard to locate the shopping cart.

    • http://codyhouse.co/ Sebastiano Guerriero

      hey @abacaj:disqus! The shopping cart is just a placeholder, we just put an icon in fixed position since the resource is focused on the “quick add to cart” feature. In production each website would have a different way to implement a shopping cart (that we’re not covering in this resource).

    • http://www.theefunklord.com/ Thee

      A person complaining about a free resource (that is partially meant to be a jumping off point for more ideas) is funny to me.

      Hence the use of a “demo” button, and not “production-ready plug-in/feature” button.

      Perhaps a different type of shop would have the need for a different kind of UX. Think about it. That part you should worry about….or pay the folks that have given you free code to do it for you.

      • http://www.antonbacaj.com Anton Bacaj

        Man you have no idea what you’re talking about.

        I wasn’t complaining about the resource, I was criticizing it.

        Nobody cares if this is “production” ready or not. Most of the people here are gonna copy and paste this. My point was to criticise this so users can see that it is not perfect and that they should not just copy and paste it.

        • http://www.theefunklord.com/ Thee

          “I wasn’t complaining about the resource, I was criticizing it.”

          And that makes your points even more irrelevant.

          I’m glad you think your critiques are of such a high value that “most people” need to see your opinions. Here’s an idea- instead of ripping other people’s work, that they chose to share with you- go start your own site, with your perfect code. I probably won’t visit, but i’m sure others might, because you’re perfect.

          OR, choose a less aggressive tone when trying to get your point across. The DEMO was created for everyone, not just you.

  • kszere

    Please add to the price has changed for the selected product options.

    Colors and size :)

  • http://www.multireflex.com Managyck

    Brilliant and thanks a lot for your work. My shop is nearly ready, I made it as Php with some little .js and my .css changes of course. It works perfectly. Thanks Claudia again for your amazing work helping us to write good code grammar!
    just in case you are interesting… http://dienchan.club/dienshop
    _patryck

    • http://apostoiis.github.io Apostolis Taxidaridis

      Can I contact you somewhere please? Thanks!

  • Maxwell Chiareli

    Cool, thanks.
    Could I ask how do u guys make the images to place at the top of the posts?

    • http://codyhouse.co Claudia Romano

      Thanks! We use Adobe Photoshop

  • Winny_The_Fucking_Pooh

    Pretty nice, but the task is not completed. We can’t see what products we add to basket because the cart icon can’t be clicked