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

Finding a specific cell in a Django HTML table: tips and tricks

Optimizing the performance of inline functions

The issue arises when trying to escape double quotes within a regex pattern using ng-pattern

Tips on how to trigger the function upon receiving the response value by concurrently running two asynchronous functions

Modify the class of an input while typing using Jquery

Incorporating Ruby on Rails: Sending a fresh POST request to API and instantly

When applying a maximum width of 100% with automatic height, images may become cropped

Alert: '[Vue warning]: Directive "in testing" could not be resolved.'

Prevent random files from being included in RequireJS's r.js optimization process and instead load them asynchronously

How can I create a CSS animation for a box element?

How can I send back multiple error messages from a pug template in a node.js application with Express?

After extended periods of use, the website experiences frequent crashes

Having difficulty including my JavaScript file located in /app/assets/javascripts when using Rails 4 and "//= require_tree ." in application.js

The presence of onChange?: (ValueType, ActionMeta) => void with OptionType is not compatible

When pasting Arabic text into an input box, the words in HTML appear to be jumbled and shuffled around

My code gets disrupted when I switch between ids and classes

Inscribe latitude from marker onto input field

Experiencing an anonymous condition post onChange event in a file input of type file - ReactJS

The pseudo right arrow is failing to display in the vertical center

What is the best way to manage individual properties in React (Next.js)?