Add to cart javascript code

The unordered list inside the .cd-cart__body element is empty by default [empty cart]; when a product is added to the cart, a list item element is inserted using JavaScript.

  

    

      

        
          
        
      

      

        
Product Name

        $25.99

        

          Delete

          

            Qty

            
              
                1
                2
                
              

              
            
          
        
      
    

    
  

Adding style

The .cd-cart__content 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 .cd-cart--empty class is removed from the .cd-cart element and the cart is shown.

.cd-cart__trigger,
.cd-cart__content {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transition: transform .2s;
}

.cd-cart--empty .cd-cart__trigger,
.cd-cart--empty .cd-cart__content { // hide cart
  transform: translateY[150px];
}

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

.cd-cart__layout {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  height: 72px;
  width: 72px;
  border-radius: var[--radius];
  transition: height .4s .1s, width  .4s .1s, box-shadow .3s;
  transition-timing-function: cubic-bezier[.67,.17,.32,.95];
  background: var[--cd-color-3];
  box-shadow: 0 4px 30px rgba[#000, .17];
}

.cd-cart--open .cd-cart__layout {
  height: 100%;
  width: 100%;
  transition-delay: 0s;
}

The .cd-cart__product--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.

.cd-cart__product--deleted { // this class is added to an item when it is removed form the cart
  position: absolute;
  left: 0;
  width: 100%; 
  opacity: 0;
  animation: cd-item-slide-out .3s forwards;
}

@keyframes cd-item-slide-out {
  0% {
    transform: translateX[0];
    opacity: 1;
  }
  100% {
    transform: translateX[80px];
    opacity: 0;
  }
}

If the user clicks on 'Undo', the .cd-cart__product--deleted class is removed and the element is reinserted in the list.

Events handling

When the user clicks the .js-cd-add-to-cart button, the addProduct[] function is used to insert a new list item inside the .cd-cart__body > ul element. The product details used are placeholders, which should be replaced by the real product info:

function addProduct[target] {
  // this is just a product placeholder
  var productAdded = '
Product Name
$25.99
Delete
Qty123456789
';
  cartList.insertAdjacentHTML['beforeend', productAdded];
};

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.