Add to cart code in javascript

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

  • ⭐️ Icons: Nucleo, icon organizer & icon library

👋 Important: this experiment is built using the CodyHouse Framework.

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__content for the cart content.

 

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.

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 = '
  • Add to cart code in javascript

    Product Name

    $25.99
    Delete
  • '; 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.

    Level up your CSS skills

    Each month we email a 1-minute CSS tutorial to 20K developers

    Awesome! We just sent you a confirmation link by email

    Error - please try again or contact us

    Your email address is already subscribed

    How do I add items to my cart in HTML?

    Allow the user to empty the cart by one click..
    Step 1: Creating a card. HTML: ... .
    Step 2: Adding card header. HTML: ... .
    Step 3: Adding a product details. HTML: ... .
    Step 4: Creating a counter. HTML: ... .
    Step 5: Adding a price section. HTML: ... .
    Step 6: Duplicate cart item. ... .
    Step 7: Creating a checkout section..

    How do I create an add to cart function?

    Step 1: On “add to cart” action the sessionStorage object builds the purchased item array. Step 2: Then, it gets the buyer's payment details on a checkout form. Step 3: Can renders payment options like PayPal with the request parameter array. This array contains purchased items and the buyer's payment details.