Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Question

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase from the subtotal plus delivery.

The checkout form layout may include irrelevant styling inherited from the website's page.

I would appreciate advice on implementing this functionality. I believe assigning ids to each product, using getElementById to retrieve values, and calculating the total amount would be the way to go, but not sure how to execute it.

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
  <div class='payment-form'>
    <div class='checkout-tabs'>
      <div class='details-field'>
        <div class='details-inputs'>
          <h3>Accepted Payment Methods</h3>
          <div class="icon-container">
            <i class="fab fa-cc-visa"></i>
            <i class="fab fa-cc-mastercard"></i>
            <i class="fab fa-cc-apple-pay"></i>
            <i class="fab fa-cc-amazon-pay"></i>
            <i class="fab fa-cc-paypal"></i>
          </div>

          <label><i class="fa fa-user"></i> Full Name</label><input class='input-field ' type="text" placeholder="John Doe">
          <label><i class="fa fa-phone-alt"></i> Phone Number</label><input class='input-field ' type="text" placeholder="(###) ###-####">
          <label><i class="fa fa-envelope"></i> Email</label><input class='input-field ' type="text" placeholder="john@example.com">
          <label><i class="fa fa-institution"></i> City</label><input class='input-field ' type="text" placeholder="San Francisco">
          <table class="half-input-table">
            <tr>
              <td>
                <label for="Country"><i class="fa fa-globe"></i> Country</label><input class='input-field ' type="text" id="Country" name="Country" placeholder="USA">
              </td>
              <td>
                <label for="zip"><i class="fas fa-map-marker-alt"></i> Zip Code</label><input class='input-field ' type=&ldqu...;

javascript html css visual-studio function

Answer 1

Answer №1

If you want to select multiple elements at once, consider using querySelectorAll

For instance:

// Select all elements with the '.price' class
const prices = document.querySelectorAll(".price");

You can then iterate over the prices array using array.reduce()

// Convert the nodeList into an array and loop through it
let total = [...prices].reduce((acc, price) => {
    return acc + parseFloat(price.innerHTML);  
}, 0);

This approach might require modifications in the HTML structure

Changing from:

<div class='price'>$429.00 (GST Inc)</div>

To something like:

<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>

Alternatively, you can utilize a regular expression on the price.innerHTML

Answer 2

If you want to select multiple elements at once, consider using querySelectorAll

For instance:

// Select all elements with the '.price' class
const prices = document.querySelectorAll(".price");

You can then iterate over the prices array using array.reduce()

// Convert the nodeList into an array and loop through it
let total = [...prices].reduce((acc, price) => {
    return acc + parseFloat(price.innerHTML);  
}, 0);

This approach might require modifications in the HTML structure

Changing from:

<div class='price'>$429.00 (GST Inc)</div>

To something like:

<div><span>$</span><div class='price'>429.00</div> <span>(GST Inc)</span></div>

Alternatively, you can utilize a regular expression on the price.innerHTML

Answer 3

Answer №2

It's unnecessary to include an ID since IDs must be unique.

I don't see your delivery details on the page, so here is the total.

Please note: Your HTML structure appears to be incorrect. Divs cannot be placed within spans. It is recommended to have the stylesheet as an external file and include it at the beginning of the head section.

const prices = [...document.querySelectorAll(".order-info .price")]
  .map(price => +price.textContent.replace(/[^\d|.]/g, "")) // remove text and currency symbols

const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // calculate total price

console.log(sum.toFixed(2)); // display total sum

const costs = [...document.querySelectorAll(".cost_sum div")];
const total = costs.length > 0 ? costs.reduce((acc, cost) => {
  acc += +cost.textContent.replace(/[^\d|.]/g, "");
  return acc;
}, 0) : 0;

console.log(total.toFixed(2))

body {
  background-color: #424242;
}

/* Other CSS styles removed for brevity */

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
  <div class='payment-form'>
    <div class='checkout-tabs'>
      /* Checkout tabs content removed for brevity */

              TOTAL
            </div>
            <button class='checkout-button'>Checkout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Answer 4

It's unnecessary to include an ID since IDs must be unique.

I don't see your delivery details on the page, so here is the total.

Please note: Your HTML structure appears to be incorrect. Divs cannot be placed within spans. It is recommended to have the stylesheet as an external file and include it at the beginning of the head section.

const prices = [...document.querySelectorAll(".order-info .price")]
  .map(price => +price.textContent.replace(/[^\d|.]/g, "")) // remove text and currency symbols

const sum = prices.length > 0 ? prices.reduce((a, b) => a + b) : 0; // calculate total price

console.log(sum.toFixed(2)); // display total sum

const costs = [...document.querySelectorAll(".cost_sum div")];
const total = costs.length > 0 ? costs.reduce((acc, cost) => {
  acc += +cost.textContent.replace(/[^\d|.]/g, "");
  return acc;
}, 0) : 0;

console.log(total.toFixed(2))

body {
  background-color: #424242;
}

/* Other CSS styles removed for brevity */

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<main>
  <div class='payment-form'>
    <div class='checkout-tabs'>
      /* Checkout tabs content removed for brevity */

              TOTAL
            </div>
            <button class='checkout-button'>Checkout</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Answer №1

Answer №2

Similar questions

Unveiling the Secrets of Unearthing Data from JSON

Having trouble sending form data using the jQuery AJAX POST method?

What methods does the W3C CSS Validator use to recognize a CSS3 document?

Managing Ajax error messages

The index on ref in MongoDB does not seem to be yielding any improvements

AngularJS simplifies request handling by allowing currying of requests

Customize Individual Rows in a React DataGrid

Creating a template based on an object type in JavaScript with Angular: A step-by-step guide

Develop a unique method for loading AngularJS templates

What is causing myInterval to not be cleared properly?

Establishing the REM value for all CSS properties

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

What causes an "Undefined index" error in jQuery when making AJAX requests?

Executing numerous GET requests with varying parameters in AngularJS

Implementing Angular2 with conditional loading

Obtaining material for optimizing a dynamic image

There seems to be an issue with the syntax in ReactJS: the URL is

Elevate a div over another div

Engaging with JSON data inputs

Removing white spaces from response HTML in JBoss 5.1 version