Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Use “Number” Type Inputs to Dynamically Change a Shopping Cart Total

When building out shopping carts, you likely want to give users the ability to change the quantity of a selected item. With using the number type input and some javascript, you can dynamically update a cart total depending upon user selection.

In the previous article, we talked about the importance of showing the number of items in a cart when it comes to conversions. Dynamically updating the number of items and their prices in a shopping cart allows the users to see the final price and correct the number of items they want without having to load another page. One of the biggest reasons for the shopping cart abandonment is the delay in loading a page, even if it is only 2-3 seconds. Refreshing the page every time a shopping cart updates will make people impatient and more likely to cancel their order. Updating the cart dynamically and showing users all the details such as the subtotal, tax, shipping rates and the total amount of the order however will make it much easier for them to see every cost detail of their transaction and just hit the final Order button. In this tutorial, we'll show you how to build a dynamic shopping cart using Bootstrap and JQuery.

Getting Started

The external CDN links below are for Bootstrap CSS, Bootstrap JS files and JQuery as well as FontAwesome. Copy and paste them and put them in the head section of your project's file:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The HTML structure is composed of two main sections: the left section where the cart items and their details are displayed and on the right, the order price. The most important thing to pay attention is the class and id names as we'll be using these in our Javascript code to show the updated numbers. These are:
cart-total: The total amount after everything is added such as the subtotal and taxes.

pass-quantity: the number of items specified in the dropdown
product-line-price: The subtotal of each specific item. For example, if the item is initially $50, it will display as 50 and if the number of items is increased to two, it will display 100.
#cart-subtotal: The subtotal amount
#cart-tax: The tax rate

Each item is inside a div container with a classname of .item.

<div class="container mt-5 mb-5">
  <div class="row justify-content-center">
    <div class="col-xl-7 col-lg-8 col-md-7">
      <div class="border border-gainsboro p-3">

        <h2 class="h6 text-uppercase mb-0">Cart Total (2 Items): <strong class="cart-total">98.60</strong></h2>
      </div>

      <div class="border border-gainsboro p-3 mt-3 clearfix item">
        <div class="text-lg-left">
          <i class="fa fa-ticket fa-2x text-center" aria-hidden="true"></i>
        </div>
        <div class="col-lg-5 col-5 text-lg-left">
          <h3 class="h6 mb-0">SpaceJet Flex ticket<br>
            <small>Cost: $50.00/ea</small>
          </h3>
        </div>
        <div class="product-price d-none">50</div>
        <div class="pass-quantity col-lg-3 col-md-4 col-sm-3">
          <label for="pass-quantity" class="pass-quantity">Quantity</label>
          <input class="form-control" type="number" value="1" min="1">
        </div>
        <div class="col-lg-2 col-md-1 col-sm-2 product-line-price pt-4">
          <span class="product-line-price">50
          </span>
        </div>
        <div class="remove-item pt-4">
          <button class="remove-product btn-light">
            Delete
          </button>
        </div>
      </div>

      <div class="border border-gainsboro p-3 mt-3 clearfix item">
        <div class="text-lg-left">
          <i class="fa fa-ticket fa-2x text-center" aria-hidden="true"></i>
        </div>
        <div class="col-lg-5 col-5 text-lg-left">
          <h3 class="h6 mb-0">SpaceJet Flex ticket 2<br><small><small>Cost: $45.00/ea</small></small></h3>
        </div>
        <div class="product-price d-none">45.00</div>
        <div class="pass-quantity col-lg-3 col-md-4 col-sm-3">
          <label for="pass-quantity" class="pass-quantity">Quantity</label>
          <input class="form-control" type="number" value="1" min="1">
        </div>
        <div class="col-lg-2 col-md-1 col-sm-2 product-line-price pt-4">
          <span class="product-line-price">45.00</span>
        </div>
        <div class="remove-item pt-4">
          <button class="remove-product btn-light">
            Delete
          </button>
        </div>
      </div><!-- item -->
    </div>

    <div class="col-xl-3 col-lg-4 col-md-5 totals">
      <div class="border border-gainsboro px-3">
        <div class="border-bottom border-gainsboro">
          <p class="text-uppercase mb-0 py-3"><strong>Order Summary</strong></p>
        </div>
        <div class="totals-item d-flex align-items-center justify-content-between mt-3">
          <p class="text-uppercase">Subtotal</p>
          <p class="totals-value" id="cart-subtotal">95</p>
        </div>
        <div class="totals-item d-flex align-items-center justify-content-between">
          <p class="text-uppercase">Estimated Tax</p>
          <p class="totals-value" id="cart-tax">3.60</p>
        </div>
        <div class="totals-item totals-item-total d-flex align-items-center justify-content-between mt-3 pt-3 border-top border-gainsboro">
          <p class="text-uppercase"><strong>Total</strong></p>
          <p class="totals-value font-weight-bold cart-total">98.60</p>
        </div>
      </div>
      <a href="#" class="mt-3 btn btn-pay w-100 d-flex justify-content-between btn-lg rounded-0">Pay Now <span class="totals-value cart-total">98.60</span></a>
    </div>
  </div>
</div><!-- container -->

CSS

The CSS for this cart is pretty minimal as the bulk of the styling is done via built-in Bootstrap classes.

.item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.btn-pay {
  background-color: #C800Da;
  border: 0;
  color: #fff;
  font-weight: 600;
}

.fa-ticket {
  color: #0e1fa1;
}

Javascript

Now that we built the structure of the shopping cart and added some styling, it is time to make it dynamic. You can put the code below inside your HTML file between script tags or create a separate file and link it from the HTML file. We start by giving a value to the tax rate. Next, we have two functions, one that selects each input, gets the value inside that input and updates the numbers based on change and the other one that removes the item by clicking a button. After we do all the calculations to display the price, we use the fadeIn() JQuery method changes the opacity of the selected elements so when the changes are applied to prices, they will all have a fading effect to give the feedback that they were changed. You can change the fading speed by changing the fadeTime variable to a different number.

 $(document).ready(function() {

   /* Set rates */
   var taxRate = 0.05;
   var fadeTime = 300;

   /* Assign actions */
   $('.pass-quantity input').change(function() {
     updateQuantity(this);
   });

   $('.remove-item button').click(function() {
     removeItem(this);
   });


   /* Recalculate cart */
   function recalculateCart() {
     var subtotal = 0;

     /* Sum up row totals */
     $('.item').each(function() {
       subtotal += parseFloat($(this).children('.product-line-price').text());
     });

     /* Calculate totals */
     var tax = subtotal * taxRate;
     var total = subtotal + tax;

     /* Update totals display */
     $('.totals-value').fadeOut(fadeTime, function() {
       $('#cart-subtotal').html(subtotal.toFixed(2));
       $('#cart-tax').html(tax.toFixed(2));
       $('.cart-total').html(total.toFixed(2));
       if (total == 0) {
         $('.checkout').fadeOut(fadeTime);
       } else {
         $('.checkout').fadeIn(fadeTime);
       }
       $('.totals-value').fadeIn(fadeTime);
     });
   }


   /* Update quantity */
   function updateQuantity(quantityInput) {
     /* Calculate line price */
     var productRow = $(quantityInput).parent().parent();
     var price = parseFloat(productRow.children('.product-price').text());
     var quantity = $(quantityInput).val();
     var linePrice = price * quantity;

     /* Update line price display and recalc cart totals */
     productRow.children('.product-line-price').each(function() {
       $(this).fadeOut(fadeTime, function() {
         $(this).text(linePrice.toFixed(2));
         recalculateCart();
         $(this).fadeIn(fadeTime);
       });
     });
   }

   /* Remove item from cart */
   function removeItem(removeButton) {
     /* Remove row from DOM and recalc cart total */
     var productRow = $(removeButton).parent().parent();
     productRow.slideUp(fadeTime, function() {
       productRow.remove();
       recalculateCart();
     });
   }

 });

And there it is. Check out the JSFiddle below and use the dropdowns to see how the cart gets updated:

Download from Github

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev