Add to cart interaction
June 28, 2016 | 29 Feedbacks

Add to Cart Interaction

A floating cart that slides in when the user decides to buy an item.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

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.


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.

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.

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.

As for the cart animation: we assign a fixed height and width to the div.wrapper element (the same of the; when the cart is open, we use the .cart-open class to animate its height and width while revealing the cart content.

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.

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:

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.


Jul 15, 2016
  • Minor bug fixed
Jun 28, 2016
  • 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.

  • Savion Terrance Smith

    Can you integrate this with paypal? Like when you click on Checkout it will take you to the paypal checkout screen with the details of what’s in the cart?

    • ThatOneHispanicKid

      yea, it can be done. but it can take me 2hrs to do. donate 6$ to my paypal, and i will have it for u!

      • Vishnoi Sunny

        How i can add promo code option to it.

      • Kon Rad

        I want to make a custom job with this script. Retreive products from database like name, price, quantity and send it via email to customer and me. Send me a PM with Your price for this. Thanks!

      • Antonio Quintas

        I wish you do the same for me. Can you?

  • Arkaprava Majumder

    was checking everyday, when the new inspiration will come up.

  • Stewart Grainger

    If you change the the amount from the default 25.99, to say 6.00, then it does not work, the item is added, but throws a jQuery exception:

    TypeError: (Number(…) + price).toFixed is not a function

    bool ? cartTotal.text( (Number(cartTotal.text()) + price).toFixed(2) ) : cartTo…

    main.js (line 168, col 27)

    • Claudia Romano

      Thanks for the heads-up! Fixed now ;)

      • Stewart Grainger


  • Vishnoi Sunny

    How i can add promo code or subscription system to it??

  • 5kibbi

    How can i put the cart data to an e-mail form?

  • Stewart Grainger

    Is there any way to retain the information, when I use postback on the page in, ie paging, the items are removed from the basket, can the data be retained using cookies, sessions or couchdb?

  • Ahmed Hashem
    • kord designer

      No body :| . As you are programmer control this issue ! this is just a blue print.

    • Aminul Islam

      Seriously you want 1000 items?

    • Farzad

      Surely you can :)

      Change the followings:

      .cd-cart-trigger .count {width:28px; >>to>> width: auto; **and add** min-width: 28px; text-align: center;}
      .cd-cart-trigger .count li { (position:absolute; >>to>> position:relative; **and add** padding: 4px;}

      This should do the job, hope it helps :)


  • placidb

    Why would you choose to hide the number of cart items in the expanded view, when you choose to place this highest in the visual hierarchy in the collapsed view?

  • Juan Daniel Acevedo

    Can be integranted to woocommerce theme?

  • Sudarshan Arumugam

    I need to to make a small change i.e., when the quantity of the product is increased the count should not increase it should increase only when a different product is added . Can any one guide me how …? thank you

  • Riandy Febrianto

    how to save a session cart when page is reloading?

    • larpo

      cookie, local storage, db – take your pick

      • Vishnoi Sunny


        • larpo

          Sorry – I meant: write some javascript that passes the content of the cart into local storage (client storage held by the user’s browser) then update that with javascript every time they add or remove an item from cart. Lastly, retrieve that content from local storage on page load.

  • Farzad

    Love it <3
    Thank you

  • Darryn Hart

    hi I am trying to use this how do I access the items in the shoping cart, I am trying to use aspx to fetch the shopping cart and put it in the DB. I mean once you have added all the items I cant retrieve the Shopping cart to put it in the form load, any help Please

  • Kon Rad

    I want to make a custom job with this script. Retreive products from
    database like name, price, quantity (done) and send it via email to customer and me based on the products in cart. Send me a PM with Your price for this. Thanks!

  • Antonio Quintas

    How can I put many product placeholder in the javascript.?
    I want insert this script in a shop online
    Can you teach me?

  • sina

    how can it possible to undo multiple step ago?

  • Conny.F

    Hi, have been sitting for hours trying to understand how to enable multiple products but i just don’t, im working on a phony webshop for a school project and i think im in way over my head on the js side, i’ve managed not to completely screw the js up (though i made some serious attempts at it) and still come up dry, closest to multiple products i managed to get was doubles (triples and quadruples). More in depth, when i click on the link that trigger the addProduct function it just puts everything in the basket and it only counts for one item. So i hope you can spare some time to give me some guidence for a multiple product setup, would really appreciate it. Thanks.