Shopping cart

eCommerce shopping cart

Set of design blocks dedicated to building eCommerce shopping cart.

See also a page fully composed of the following elements.

Shopping cart Demo

Shopping cart basic example

Cart (2 items)
Blue denim shirt

Shirt - blue

Color: blue

Size: M

(Note, 1 piece)

Red hoodie

Shirt - red

Color: red

Size: M

Do not delay the purchase, adding items to your cart does not mean booking them.

Expected shipping delivery

Thu., 12.03. - Mon., 16.03.

We accept
Visa American Express Mastercard PayPal acceptance mark
The total amount of
  • Temporary amount $53,98
  • Shipping Gratis
  • The total amount of

    (including VAT)

    $53,98


        <!--Section: Block Content-->
        <section>

          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-lg-8">

              <!-- Card -->
              <div class="mb-3">
                <div class="pt-4 wish-list">

                  <h5 class="mb-4">Cart (<span>2</span> items)</h5>

                  <div class="row mb-4">
                    <div class="col-md-5 col-lg-3 col-xl-3">
                      <div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
                        <a href="#!">
                          <div class="mask">
                            <img class="img-fluid w-100"
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
                            <div class="mask rgba-black-slight"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="col-md-7 col-lg-9 col-xl-9">
                      <div>
                        <div class="d-flex justify-content-between">
                          <div>
                            <h5>Blue denim shirt</h5>
                            <p class="mb-3 text-muted text-uppercase small">Shirt - blue</p>
                            <p class="mb-2 text-muted text-uppercase small">Color: blue</p>
                            <p class="mb-3 text-muted text-uppercase small">Size: M</p>
                          </div>
                          <div>
                            <div class="def-number-input number-input safari_only mb-0 w-100">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                class="minus decrease"></button>
                              <input class="quantity" min="0" name="quantity" value="1" type="number">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                class="plus increase"></button>
                            </div>
                            <small id="passwordHelpBlock" class="form-text text-muted text-center">
                              (Note, 1 piece)
                            </small>
                          </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                          <div>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase mr-3"><i
                                class="fas fa-trash-alt mr-1"></i> Remove item </a>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase"><i
                                class="fas fa-heart mr-1"></i> Move to wish list </a>
                          </div>
                          <p class="mb-0"><span><strong id="summary">$17.99</strong></span></p class="mb-0">
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr class="mb-4">
                  <div class="row mb-4">
                    <div class="col-md-5 col-lg-3 col-xl-3">
                      <div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
                        <a href="#!">
                          <div class="mask">
                            <img class="img-fluid w-100"
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
                            <div class="mask rgba-black-slight"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="col-md-7 col-lg-9 col-xl-9">
                      <div>
                        <div class="d-flex justify-content-between">
                          <div>
                            <h5>Red hoodie</h5>
                            <p class="mb-3 text-muted text-uppercase small">Shirt - red</p>
                            <p class="mb-2 text-muted text-uppercase small">Color: red</p>
                            <p class="mb-3 text-muted text-uppercase small">Size: M</p>
                          </div>
                          <div>
                            <div class="def-number-input number-input safari_only mb-0 w-100">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                class="minus"></button>
                              <input class="quantity" min="0" name="quantity" value="1" type="number">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                class="plus"></button>
                            </div>
                          </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                          <div>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase mr-3"><i
                                class="fas fa-trash-alt mr-1"></i> Remove item </a>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase"><i
                                class="fas fa-heart mr-1"></i> Move to wish list </a>
                          </div>
                          <p class="mb-0"><span><strong>$35.99</strong></span></p class="mb-0">
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="text-primary mb-0"><i class="fas fa-info-circle mr-1"></i> Do not delay the purchase, adding
                    items to your cart does not mean booking them.</p>

                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="mb-3">
                <div class="pt-4">

                  <h5 class="mb-4">Expected shipping delivery</h5>

                  <p class="mb-0"> Thu., 12.03. - Mon., 16.03.</p>
                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="mb-3">
                <div class="pt-4">

                  <h5 class="mb-4">We accept</h5>

                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg"
                    alt="Visa">
                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/amex.svg"
                    alt="American Express">
                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg"
                    alt="Mastercard">
                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png"
                    alt="PayPal acceptance mark">
                </div>
              </div>
              <!-- Card -->

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4">

              <!-- Card -->
              <div class="mb-3">
                <div class="pt-4">

                  <h5 class="mb-3">The total amount of</h5>

                  <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                      Temporary amount
                      <span>$25.98</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                      Shipping
                      <span>Gratis</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                      <div>
                        <strong>The total amount of</strong>
                        <strong>
                          <p class="mb-0">(including VAT)</p>
                        </strong>
                      </div>
                      <span><strong>$53.98</strong></span>
                    </li>
                  </ul>

                  <button type="button" class="btn btn-primary btn-block">go to checkout</button>

                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="mb-3">
                <div class="pt-4">

                  <a class="dark-grey-text d-flex justify-content-between" data-toggle="collapse" href="#collapseExample"
                    aria-expanded="false" aria-controls="collapseExample">
                    Add a discount code (optional)
                    <span><i class="fas fa-chevron-down pt-1"></i></span>
                  </a>

                  <div class="collapse" id="collapseExample">
                    <div class="mt-3">
                      <div class="md-form md-outline mb-0">
                        <input type="text" id="discount-code" class="form-control font-weight-light"
                          placeholder="Enter discount code">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Card -->

            </div>
            <!--Grid column-->

          </div>
          <!-- Grid row -->

        </section>
        <!--Section: Block Content-->

      

Adding Shadows

Cart (2 items)
Blue denim shirt

Shirt - blue

Color: blue

Size: M

(Note, 1 piece)

Red hoodie

Shirt - red

Color: red

Size: M

Do not delay the purchase, adding items to your cart does not mean booking them.

Expected shipping delivery

Thu., 12.03. - Mon., 16.03.

We accept
Visa American Express Mastercard PayPal acceptance mark
The total amount of
  • Temporary amount $53,98
  • Shipping Gratis
  • The total amount of

    (including VAT)

    $53,98


        <!--Section: Block Content-->
        <section>

          <!--Grid row-->
          <div class="row">

            <!--Grid column-->
            <div class="col-lg-8">

              <!-- Card -->
              <div class="card wish-list mb-3">
                <div class="card-body">

                  <h5 class="mb-4">Cart (<span>2</span> items)</h5>

                  <div class="row mb-4">
                    <div class="col-md-5 col-lg-3 col-xl-3">
                      <div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Sample">
                        <a href="#!">
                          <div class="mask waves-effect waves-light">
                            <img class="img-fluid w-100"
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg">
                            <div class="mask rgba-black-slight waves-effect waves-light"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="col-md-7 col-lg-9 col-xl-9">
                      <div>
                        <div class="d-flex justify-content-between">
                          <div>
                            <h5>Blue denim shirt</h5>
                            <p class="mb-3 text-muted text-uppercase small">Shirt - blue</p>
                            <p class="mb-2 text-muted text-uppercase small">Color: blue</p>
                            <p class="mb-3 text-muted text-uppercase small">Size: M</p>
                          </div>
                          <div>
                            <div class="def-number-input number-input safari_only mb-0 w-100">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                class="minus"></button>
                              <input class="quantity" min="0" name="quantity" value="1" type="number">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                class="plus"></button>
                            </div>
                            <small id="passwordHelpBlock" class="form-text text-muted text-center">
                              (Note, 1 piece)
                            </small>
                          </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                          <div>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase mr-3"><i
                                class="fas fa-trash-alt mr-1"></i> Remove item </a>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase"><i
                                class="fas fa-heart mr-1"></i> Move to wish list </a>
                          </div>
                          <p class="mb-0"><span><strong>$17.99</strong></span></p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <hr class="mb-4">
                  <div class="row mb-4">
                    <div class="col-md-5 col-lg-3 col-xl-3">
                      <div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
                        <img class="img-fluid w-100"
                          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Sample">
                        <a href="#!">
                          <div class="mask waves-effect waves-light">
                            <img class="img-fluid w-100"
                              src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg">
                            <div class="mask rgba-black-slight waves-effect waves-light"></div>
                          </div>
                        </a>
                      </div>
                    </div>
                    <div class="col-md-7 col-lg-9 col-xl-9">
                      <div>
                        <div class="d-flex justify-content-between">
                          <div>
                            <h5>Red hoodie</h5>
                            <p class="mb-3 text-muted text-uppercase small">Shirt - red</p>
                            <p class="mb-2 text-muted text-uppercase small">Color: red</p>
                            <p class="mb-3 text-muted text-uppercase small">Size: M</p>
                          </div>
                          <div>
                            <div class="def-number-input number-input safari_only mb-0 w-100">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
                                class="minus"></button>
                              <input class="quantity" min="0" name="quantity" value="1" type="number">
                              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
                                class="plus"></button>
                            </div>
                          </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                          <div>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase mr-3"><i
                                class="fas fa-trash-alt mr-1"></i> Remove item </a>
                            <a href="#!" type="button" class="card-link-secondary small text-uppercase"><i
                                class="fas fa-heart mr-1"></i> Move to wish list </a>
                          </div>
                          <p class="mb-0"><span><strong>$35.99</strong></span></p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="text-primary mb-0"><i class="fas fa-info-circle mr-1"></i> Do not delay the purchase, adding
                    items to your cart does not mean booking them.</p>

                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="card mb-3">
                <div class="card-body">

                  <h5 class="mb-4">Expected shipping delivery</h5>

                  <p class="mb-0"> Thu., 12.03. - Mon., 16.03.</p>
                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="card mb-3">
                <div class="card-body">

                  <h5 class="mb-4">We accept</h5>

                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/visa.svg"
                    alt="Visa">
                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/amex.svg"
                    alt="American Express">
                  <img class="mr-2" width="45px"
                    src="https://mdbootstrap.com/wp-content/plugins/woocommerce-gateway-stripe/assets/images/mastercard.svg"
                    alt="Mastercard">
                  <img class="mr-2" width="45px"
                    src="https://z9t4u9f6.stackpathcdn.com/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png"
                    alt="PayPal acceptance mark">
                </div>
              </div>
              <!-- Card -->

            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-lg-4">

              <!-- Card -->
              <div class="card mb-3">
                <div class="card-body">

                  <h5 class="mb-3">The total amount of</h5>

                  <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
                      Temporary amount
                      <span>$25.98</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                      Shipping
                      <span>Gratis</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
                      <div>
                        <strong>The total amount of</strong>
                        <strong>
                          <p class="mb-0">(including VAT)</p>
                        </strong>
                      </div>
                      <span><strong>$53.98</strong></span>
                    </li>
                  </ul>

                  <button type="button" class="btn btn-primary btn-block waves-effect waves-light">go to checkout</button>

                </div>
              </div>
              <!-- Card -->

              <!-- Card -->
              <div class="card mb-3">
                <div class="card-body">

                  <a class="dark-grey-text d-flex justify-content-between" data-toggle="collapse" href="#collapseExample1"
                    aria-expanded="false" aria-controls="collapseExample1">
                    Add a discount code (optional)
                    <span><i class="fas fa-chevron-down pt-1"></i></span>
                  </a>

                  <div class="collapse" id="collapseExample1">
                    <div class="mt-3">
                      <div class="md-form md-outline mb-0">
                        <input type="text" id="discount-code1" class="form-control font-weight-light"
                          placeholder="Enter discount code">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Card -->

            </div>
            <!--Grid column-->

          </div>
          <!--Grid row-->

        </section>
        <!--Section: Block Content-->

      

Implementation example

In this section we will build working shopping cart example step by step.

Basic layouts

Let's start with creating a simple layout:


        <body class="skin-light">
          <!--Main Navigation-->
          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-md navbar-light fixed-top scrolling-navbar">
              <div class="container-fluid">
                <!-- Brand -->
                <a class="navbar-brand" href="https://mdbecommerce.com/">
                  <i class="fab fa-mdb fa-3x" alt="mdb logo"></i>
                </a>
                <!-- Collapse button -->
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
                  aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <!-- Links -->
                <div class="collapse navbar-collapse" id="basicExampleNav">
                  <!-- Right -->
                  <ul class="navbar-nav ml-auto">
                    <li class="nav-item dropdown dropdown-hover" >
                      <a class="nav-link waves-effect cart" id="navbarDropdownMenuLink3" data-toggle="dropdown">
                        <span class="badge badge-pill red"></span>
                        <i class="fas fa-shopping-cart pl-0"></i>
                      </a>
                      <div id="dropdown-cart" class="dropdown-menu dropdown-menu-right p-3">
                        
                      </div>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                        <i class="united kingdom flag m-0"></i>
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#!">Action</a>
                        <a class="dropdown-item" href="#!">Another action</a>
                        <a class="dropdown-item" href="#!">Something else here</a>
                      </div>
                    </li>
                    <li class="nav-item">
                      <a href="#!" class="nav-link waves-effect">
                        Shop
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="#!" class="nav-link waves-effect">
                        Contact
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="#!" class="nav-link waves-effect">
                        Sign in
                      </a>
                    </li>
                    <li class="nav-item pl-2 mb-2 mb-md-0">
                      <a href="#!" type="button"
                        class="btn btn-outline-info btn-md btn-rounded btn-navbar waves-effect waves-light">Sign
                        up</a>
                    </li>
                  </ul>
                </div>
                <!-- Links -->
              </div>
            </nav>
            <!-- Navbar -->
            <div class="jumbotron color-grey-light mt-70">
              <div class="d-flex align-items-center h-100">
                <div class="container text-center py-5">
                  <h3 class="mb-0">Shopping cart</h3>
                </div>
              </div>
            </div>
          </header>
          <!--Main Navigation-->
        </body>
      

Add product to cart

Below is an example of the implementation of the function that adds a product to the cart. Each product should have its own id - corresponding product id in the database. We will save the product id and quantity in local storage


        $('.add-to-cart').on('click', (e) => {
          addToCart(e.currentTarget)
        })

        const addToCart = (product) => {
          const productId = $(product).attr('productId');
          const isAlreadyInCart = $.grep(productsInCart, el => {return el.id == productId}).length;
  
          if (isAlreadyInCart) {
            $.each(storageData, (i, el) => {
              if (productId == el.id) {
                el.itemsNumber += 1;
              }
            })
          } else {
            const newProduct = {
              id: Number(productId),
              itemsNumber: 1
            }
  
            storageData.push(newProduct);
          }
  
          updateCart();
          updateProductList();
        }
      

Product list

In this example we use static .json file to import product list. But in real production application you probably get product list from database.


        [
          {
            "id": 1,
            "category": "jeans",
            "name": "Ripped jeans",
            "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.jpg",
            "size": "XL",
            "color": "blue",
            "price": 20.99
          },
          {
            "id": 2,
            "category": "jeans",
            "name": "Boyfriend jeans",
            "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.jpg",
            "size": "S",
            "color": "blue",
            "price": 24.99
          },
          {
            "id": 3,
            "category": "shirts",
            "name": "Ripped sweatshirt",
            "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg",
            "size": "XL",
            "color": "white",
            "price": 29.99
          },
          {
            "id": 4,
            "category": "jackets",
            "name": "Denim Jacket",
            "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg",
            "size": "M",
            "color": "grey",
            "price": 40.99
          },
          {
            "id": 5,
            "category": "shirts",
            "name": "Longsleeve",
            "image": "https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg",
            "size": "L",
            "color": "black",
            "price": 120.99
          }
        ]
      

Import Product

Now we need to import the product list.


        $(document).ready(() => {
          let storageData = [];

          $.get("product.json", (res) => {
            productList = res;
    
            const isStorageEmpty = Cookies.getStorage('cart').length === 0;
    
            if (!isStorageEmpty) {
              storageData = Cookies.getStorage('cart');
            }
    
            updateCart();
            buildProductList();
            buildDropdownCart();
            bindProductEvents();
          });
        });
      

Parse product id and update cart

In storage we have only id and items quantity - so we need update our cart, parse id with product, update number of product in cart, update cart pill and total amount:


        const updateCart = () => {
          Cookies.setStorage('cart', storageData);
          productsInCart = [];
  
          parseStorageDataWithProduct();
          updatePill();
          updateTotalAmount();
        }

        const parseStorageDataWithProduct = () => {
          $.each(storageData, (i, el) => {
            const id = el.id;
            const itemsNumber = el.itemsNumber;
  
            $.each(productList, (i, el) => {
              if (id == el.id) {
                el.itemsNumber = itemsNumber;
                productsInCart.push(el)
              }
            });
          });
        }
  
        const updatePill = () => {
          let itemsInCart = 0;
  
          $.each(productsInCart, (i, el) => {
            itemsInCart += el.itemsNumber;
          });
  
          $('.badge-pill').html(itemsInCart);
        }
  
        const updateTotalAmount = () => {
          let total = 0;
          const shippingCost = 0;
          let summary = (total + shippingCost).toFixed(2);
  
          $.each(productsInCart, (i, el) => {
            total += el.itemsNumber * el.price;
          });
  
          $('#total-price').html(`$${total.toFixed(2)}`);
          $('#shipping-price').html(shippingCost === 0 ? 'Free' : `$${shippingCost}`);
          $('#summary').html(`$${summary}`);
        }
      

Build Product template:

We create template from product list, and another one for product list in dropdown cart in navbar


        const dropdownProductsTemplate = (product) => {
          return `
            <div id="${product.id}-dropdown" class="product row">
              <div class="col-4 px-2">
                <div class="view zoom overlay z-depth-1 rounded mb-md-0">
                  <img class="img-fluid w-100" src="${product.image}" alt="Sample">
                </div>
              </div>
              <div class="col-5 px-2">
                <span>${product.name}</span>
                <p class="mb-0"><span><strong class="price">$${(product.price * product.itemsNumber).toFixed(2)}</strong></span></p>
              </div>
              <div class="col-2 pl-0 pr-2">
                <a href="#!" type="button" class="remove-product"><i class="fas fa-trash-alt"></i></a>
              </div>
            </div>
            </div>
            <hr class="mb-4">
          `
        }
  
        const productsTemplate = (product) => {
          return `
            <div id="${product.id}" class="product row mb-4">
              <div class="col-md-5 col-lg-3 col-xl-3">
                <div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
                  <img class="img-fluid w-100" src="${product.image}" alt="Sample">
                  <a href="#!">
                    <div class="mask waves-effect waves-light">
                      <img class="img-fluid w-100" src="${product.image}">
                      <div class="mask rgba-black-slight waves-effect waves-light"></div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="col-md-7 col-lg-9 col-xl-9">
                <div>
                  <div class="d-flex justify-content-between">
                    <div>
                      <h5>${product.name}</h5>
                      <p class="mb-3 text-muted text-uppercase small">${product.category} - ${product.color}</p>
                      <p class="mb-2 text-muted text-uppercase small">Color: ${product.color}</p>
                      <p class="mb-3 text-muted text-uppercase small">Size: ${product.size}</p>
                    </div>
                    <div>
                      <div class="def-number-input number-input safari_only mb-0 w-100">
                        <button class="minus decrease"></button>
                        <input class="quantity" min="0" name="quantity" value="${product.itemsNumber}" type="number">
                        <button class="plus increase"></button>
                      </div>
                      <small id="passwordHelpBlock" class="form-text text-muted text-center"> (Note, 1 piece) </small>
                    </div>
                  </div>
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <a href="#!" type="button" class="remove-product card-link-secondary small text-uppercase mr-3"><i class="fas fa-trash-alt mr-1"></i> Remove item </a>
                      <a href="#!" type="button" class="card-link-secondary small text-uppercase"><i class="fas fa-heart mr-1"></i> Move to wish list </a>
                    </div>
                    <p class="mb-0"><span><strong class="price">$${(product.price * product.itemsNumber).toFixed(2)}</strong></span></p>
                  </div>
                </div>
              </div>
            </div>
            <hr class="mb-4">
          `
        };
      

Render products

Now we can use templates to build products list and bind some events:


        const buildProductList = () => {
          $.each(productsInCart, (i, el) => {
            const product = renderProducts(el)
            $('#product-list').append(product);
          })
        }
  
        const buildDropdownCart = () => {
          $.each(productsInCart, (i, el) => {
            const product = renderDropdownProducts(el);
            $('#dropdown-cart').append(product)
          })
        }

        const bindProductEvents = () => {
          $('button.increase').on('click', (e) => {
            increaseProductQuantity(e.currentTarget);
          });
  
          $('button.decrease').on('click', (e) => {
            subtractProductQuantity(e.currentTarget);
          });
  
          $('a.remove-product').on('click', (e) => {
            removeProduct(e.currentTarget);
          });
        }
      

Increase, decrease quantity and remove product.

When user click + icon quantity should increasing, after click - should decrease and after click remove products should be deleted.


        const increaseProductQuantity = (product) => {
          const productId = $(product).parents('.product').get(0).id
          const price = $.grep(productsInCart, el => { return el.id == productId })[0].price;
         
          $.each(storageData, (i, el) => {          
            if (el.id == productId) {
              el.itemsNumber += 1
              $(product).siblings('.quantity').val(el.itemsNumber);
              $(`#${productId}`).find('.price').html(`$${(price * el.itemsNumber).toFixed(2)}`);
              $(`#${productId}-dropdown`).find('.price').html(`$${(price * el.itemsNumber).toFixed(2)}`);
            }
          });
  
          updateCart();
        }
  
        const subtractProductQuantity = (product) => {
          const productId = $(product).parents('.product').get(0).id
          const price = $.grep(productsInCart, el => { return el.id == productId })[0].price;
          let itemsInCart = $.grep(productsInCart, el => { return el.id == productId })[0].itemsNumber;
  
          if (itemsInCart > 0 ) {
            storageData.map( el => {          
              if (el.id == productId) {
                el.itemsNumber -= 1
                $(product).siblings('.quantity').val(el.itemsNumber)
                $(`#${productId}`).find('.price').html(`$${(price * el.itemsNumber).toFixed(2)}`);
                $(`#${productId}-dropdown`).find('.price').html(`$${(price * el.itemsNumber).toFixed(2)}`);
              }
            });
  
            updateCart();
          };
        }

        const removeProduct = (product) => {
          const productId = $(product).parents('.product').get(0).id

          storageData = $.grep(storageData, (el, i) => {
            return el.id != productId
          });

          updateCart();
          updateProductList();
        }
      

Update product list

After remove some product we should update product list in cart:


        const updateProductList = () => {
          $('#product-list').empty();
          buildProductList();
          $('#dropdown-cart').empty();
          buildDropdownCart();
          bindProductEvents();
        }