Add to cart interaction
June 28, 2016 | 36 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?

    • biju420

      yes i also want to know how too add this in 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.

          • Jaber Salehi

            What if users leave the website after adding a product, Or maybe he want to access that cart in another device, I think the best choice is to send the info to database after he clicks on add,

  • 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.

    • varun

      1. Create another addToCartBtn like below code
      // Previous code
      var addToCartBtn = $(‘.cd-add-to-cart’);
      // Added code
      var addToCartBtn2 = $(‘.cd-add-to-cart-2′);

      2. Create another function like
      // Previous code
      addToCartBtn.on(‘click’, function(event){
      // Added code
      addToCartBtn2.on(‘click’, function(event){

      3. Create another trigger function
      // Previous Code
      function addToCart(trigger) {
      var cartIsEmpty = cartWrapper.hasClass(’empty’);
      //update cart product list
      //update number of items
      //update total price
      updateCartTotal(‘price’), true);
      //show cart

      // Added code
      function addToCart2(trigger) {
      var cartIsEmpty = cartWrapper.hasClass(’empty’);
      //update cart product list
      //update number of items
      //update total price
      updateCartTotal(‘price’), true);
      //show cart

      4. Create a function addProduct2() after addProduct() function

      //Added Code
      function addProduct2() {
      //this is just a product placeholder
      //you should insert an item with the selected product info
      //replace productId, productName, price and url with your real product info

      productId = productId + 1;
      var productAdded = $(‘Product 2150.00DeleteQty123456789‘);

      5. Update the second product button as below

      //Add To Cart

      It works… If you have any problem mail to [email protected]

  • zapcriativo

    How to use the value with real currency format, with comma?

    I tried inserting replace .replace (‘$’, ”) with .replace (‘$’, ‘.’, ‘,’), But returned NaN.

  • Vitali

    Why there’s only one product example? Where do you put the next product? Bad demo.

  • Ahad Arzi

    Hi, I have problem. How can i change the cart bucket image into some other image, I have tried in css , html. I never mind any solutions. Can you help me please.

  • Ramses Garcia

    Can i integrate this with products that have been call with a loop made with php? i want to add to the cart products that are shown with the result of a query