What is the best way to automatically adjust the quantity and total cost for every SKU using JavaScript?

Question

What is the best way to automatically adjust the quantity and total cost for every SKU using JavaScript?

Currently, I am developing the functionality for a virtual store's shopping cart. At the core of this feature lies a Cart class that manages data and executes calculations. This specific class does not interact with the HTML document or the DOM; its primary purpose is to perform computations.

The Cart class contains methods to handle products. Each product possesses SKU, title, and price properties. I am endeavoring to introduce a quantity property as well, but it seems to be malfunctioning. Two buttons, namely addButton and subtractButton, are available for each product to increase or decrease their respective quantities.

My objectives include:

Upon clicking the addButton, the product's quantity should increment by 1, thereby updating the total price for that SKU in the total-SKU span.
Once the subtractButton is clicked, the product's quantity should decrement by 1 (if greater than 0), followed by an update to the total price for that SKU within the total-SKU span.
The cumulative value of all SKUs ought to be computed and displayed within the total div.

For those interested, here is the code on jsFiddle: https://jsfiddle.net/mlpz2/edfjLhb2

The code snippet is provided below:

insert your unique rewrite of the script.js file here...

insert your unique rewrite of the styles.css file here...

The product information is retrieved from an API. The mock API utilized is jsonblob.com().

insert your unique rewrite of the JSON data here...

I seem to be grappling with the following challenges:

Incorporating new elements into the DOM for displaying the product list.
Detecting events to adjust the unit quantity for each product.
Refreshing the total price on the DOM whenever modifications occur.

I am unsure about how to create event listeners for the addButton and subtractButton or how to manage updating the quantity and total price on the DOM. Any guidance on enhancing the code would be sincerely appreciated!

Thank you kindly for your attention :)

javascript dom event-listener shopping-cart

Answer 1

Answer №1

Upon careful inspection of your code, I have identified two key fixes:

p.sku is accessing an invalid property of the product through the class. To resolve this issue, simply change it to p.SKU.
p.quantity is not part of the initial product object, resulting in it displaying NAN. This can be rectified by including it during initialization so that there is no need for any if condition to check it.

cart.products = data.products.map(product => {
    return {
        ...product,
        price: parseFloat(product.price),
        quantity: 0 // THIS WILL ADDRESS MAJOR ISSUES
    };
});

Additionally, I recommend using getElementsByClassName or querySelector instead of querySelectorAll since there is only one .addButton, and the forEach will always run once.

/* 
let subtractButtons = productElement.querySelectorAll(".substractButton");

for (let i = 0; i < addButtons.length; i++) {
    addButtons[i].onclick(() => console.warn(1));
} 
*/

let addButtons = productElement.getElementsByClassName("addButton")[0];
        
addButtons.onclick = () => updateQuantity(product.SKU, 1);

JSFIDDLE

Answer 2

Upon careful inspection of your code, I have identified two key fixes:

p.sku is accessing an invalid property of the product through the class. To resolve this issue, simply change it to p.SKU.
p.quantity is not part of the initial product object, resulting in it displaying NAN. This can be rectified by including it during initialization so that there is no need for any if condition to check it.

cart.products = data.products.map(product => {
    return {
        ...product,
        price: parseFloat(product.price),
        quantity: 0 // THIS WILL ADDRESS MAJOR ISSUES
    };
});

Additionally, I recommend using getElementsByClassName or querySelector instead of querySelectorAll since there is only one .addButton, and the forEach will always run once.

/* 
let subtractButtons = productElement.querySelectorAll(".substractButton");

for (let i = 0; i < addButtons.length; i++) {
    addButtons[i].onclick(() => console.warn(1));
} 
*/

let addButtons = productElement.getElementsByClassName("addButton")[0];
        
addButtons.onclick = () => updateQuantity(product.SKU, 1);

JSFIDDLE

Answer 3

Answer №2

const TotalCart = document.getElementById('finalTotal');


class Cart {
  constructor(products, currency) {
    this.products = [];
    this.currency = "";
  }
  initializeQuantity = () => {
    for (let product of this.products) {
      product.quantity = 0; // Initialize quantity to 0 for each product
    }
    console.log(this.products.quantity);
  };
  updateUnits = (sku, units) => {
    // Update the number of units to be purchased for a product
    let product = this.products.find((p) => p.sku === sku);
    if (product) {
      product.quantity = units;
      console.log(this.products.quantity);
    } else {
      this.products.push({
        sku: sku,
        quantity: units
      });
    }
  };

  getProductInformation = (sku) => {
    // Returns the data of a product along with the selected units
    // For example:
    // {
    // "sku": "0K3QOSOV4V",
    // "quantity": 3
    // }
    return this.products.find((p) => p.SKU === sku);
  };

  getAllProducts = () => {
    return this.products;
  };

  getCart = () => {
    // Returns information about the products added to the cart
    // Along with the calculated total of all products
    // For example:
    // {
    // "total": "5820",
    // "currency: "€",
    // "products" : [
    // {
    // "sku": "0K3QOSOV4V"
    // ..
    // }
    // ]}
    let total = this.products.reduce(
      (sum, p) => sum + p.quantity * p.price,
      0
    );
    console.log(total);
    return {
      total: total,
      currency: this.currency,
      products: this.products
    };
  };
}

let cart = new Cart();
cart.initializeQuantity();
const getProductsData = async() => {
  let response = await fetch(
    "https://jsonblob.com/api/jsonBlob/1241305513466912768"
  );
  let data = await response.json();
  console.log(data);
  return data; // return the full response
};

const showProducts = (products) => {
  console.log(products);

  let productsContainer = document.getElementById("productsContainer");
  for (let product of products) {
    let quantity = product.quantity || 0; // Initialize quantity here

    let productElement = document.createElement("div");
    productElement.innerHTML = `
                        <h2>${product.title}</h2>
                        <p>Ref: ${product.SKU}</p>
                        <p>Price: ${product.price}€/unit</p>
                        <button class="substractButton" id=${product.SKU}>-</button>
                        <span id="quantity-${product.SKU}">${quantity}</span>
                        <button class="addButton" id=${product.SKU}>+</button>
                        <p>Total: <span id="total-${product.SKU}">0</span>€</p>
                `;
    productElement.className = "product";
    productsContainer.appendChild(productElement);
    let addButtons = productElement.querySelectorAll(".addButton");
    addButtons.forEach(button => {
      button.addEventListener('click', event => {
        updateQuantity(event.target.id, 1);
        updateTotalCart();
      });
    });


    console.log(addButtons);
    let subtractButtons = productElement.querySelectorAll(".substractButton");

    subtractButtons.forEach(button => {
      button.addEventListener('click', event => {
        updateQuantity(event.target.id, -1);
        console.log(event.target);
        updateTotalCart();
      });
    });
  }
  console.log(productsContainer);
};


const updateTotal = () => {
  let products = cart.getAllProducts(); // Assuming getCart returns an array of products
  let total = 0;
  for (let product of products) {
    if (product.quantity) {
      total += product.quantity * product.price;
    }
  }

  let totalElement = document.getElementById('total');
  if (totalElement) {
    totalElement.innerHTML = ''; // Clear previous content if any
    let totalText = document.createElement('div');
    totalText.textContent = `TOTAL: ${total.toFixed(2)}€`;
    totalElement.appendChild(totalText);
  } else {
    console.error("Element with id 'total' not found.");
  }
};

const updateQuantity = (sku, change) => {

  let product = cart.getProductInformation(sku);
  if (product) {
    if (!product.quantity) {
      product.quantity = 0;
    }
    product.quantity += change;
    if (product.quantity < 0) {
      // Ensure the quantity doesn't go below 0
      product.quantity = 0;
    }
    document.getElementById(`quantity-${sku}`).textContent = product.quantity;
    document.getElementById(`total-${sku}`).textContent =
      product.quantity * product.price;
    updateTotal(product.quantity * product.price);
  }
};

getProductsData().then((data) => {
  if (data && data.products) {
    cart.products = data.products;
    cart.products = data.products.map((product) => {
      return {
        ...product,
        price: parseFloat(product.price),
      };
    }); // assign the currencay to the cart object
    showProducts(cart.products);
    updateTotal();
  } else {
    console.error("Failed to fetch products");
  }
});

const updateTotalCart = () => {
  let products = cart.getAllProducts();
  let finalTotal = 0;
  console.log('Called');
  let finalTotalContainer = document.getElementById('finalTotal');
  finalTotalContainer.innerHTML = ''; // Clear previous content

  for (let product of products) {
    if (product.quantity > 0) {
      let productTotal = product.quantity * product.price;
      finalTotal += productTotal;

      let productSummary = document.createElement("div");
      productSummary.innerHTML = `
                <p>${product.title}: ${product.quantity} x ${product.price}€ = ${productTotal.toFixed(2)}€</p>
            `;
      finalTotalContainer.appendChild(productSummary);
    }
  }

  let grandTotal = document.createElement("div");
  grandTotal.innerHTML = `<h3>Grand Total: ${finalTotal.toFixed(2)}€</h3>`;
  finalTotalContainer.appendChild(grandTotal);
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>;
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
</head>

<body>
  <div id="productsContainer">
  </div>
  <div id="finalTotal">
  </div>
  <script src="./product.js"></script>
</body>

</html>

Add specific event listeners to all buttons individually and utilize their IDs to update corresponding elements effectively.

I hope you find this guidance useful.

Answer 4

const TotalCart = document.getElementById('finalTotal');


class Cart {
  constructor(products, currency) {
    this.products = [];
    this.currency = "";
  }
  initializeQuantity = () => {
    for (let product of this.products) {
      product.quantity = 0; // Initialize quantity to 0 for each product
    }
    console.log(this.products.quantity);
  };
  updateUnits = (sku, units) => {
    // Update the number of units to be purchased for a product
    let product = this.products.find((p) => p.sku === sku);
    if (product) {
      product.quantity = units;
      console.log(this.products.quantity);
    } else {
      this.products.push({
        sku: sku,
        quantity: units
      });
    }
  };

  getProductInformation = (sku) => {
    // Returns the data of a product along with the selected units
    // For example:
    // {
    // "sku": "0K3QOSOV4V",
    // "quantity": 3
    // }
    return this.products.find((p) => p.SKU === sku);
  };

  getAllProducts = () => {
    return this.products;
  };

  getCart = () => {
    // Returns information about the products added to the cart
    // Along with the calculated total of all products
    // For example:
    // {
    // "total": "5820",
    // "currency: "€",
    // "products" : [
    // {
    // "sku": "0K3QOSOV4V"
    // ..
    // }
    // ]}
    let total = this.products.reduce(
      (sum, p) => sum + p.quantity * p.price,
      0
    );
    console.log(total);
    return {
      total: total,
      currency: this.currency,
      products: this.products
    };
  };
}

let cart = new Cart();
cart.initializeQuantity();
const getProductsData = async() => {
  let response = await fetch(
    "https://jsonblob.com/api/jsonBlob/1241305513466912768"
  );
  let data = await response.json();
  console.log(data);
  return data; // return the full response
};

const showProducts = (products) => {
  console.log(products);

  let productsContainer = document.getElementById("productsContainer");
  for (let product of products) {
    let quantity = product.quantity || 0; // Initialize quantity here

    let productElement = document.createElement("div");
    productElement.innerHTML = `
                        <h2>${product.title}</h2>
                        <p>Ref: ${product.SKU}</p>
                        <p>Price: ${product.price}€/unit</p>
                        <button class="substractButton" id=${product.SKU}>-</button>
                        <span id="quantity-${product.SKU}">${quantity}</span>
                        <button class="addButton" id=${product.SKU}>+</button>
                        <p>Total: <span id="total-${product.SKU}">0</span>€</p>
                `;
    productElement.className = "product";
    productsContainer.appendChild(productElement);
    let addButtons = productElement.querySelectorAll(".addButton");
    addButtons.forEach(button => {
      button.addEventListener('click', event => {
        updateQuantity(event.target.id, 1);
        updateTotalCart();
      });
    });


    console.log(addButtons);
    let subtractButtons = productElement.querySelectorAll(".substractButton");

    subtractButtons.forEach(button => {
      button.addEventListener('click', event => {
        updateQuantity(event.target.id, -1);
        console.log(event.target);
        updateTotalCart();
      });
    });
  }
  console.log(productsContainer);
};


const updateTotal = () => {
  let products = cart.getAllProducts(); // Assuming getCart returns an array of products
  let total = 0;
  for (let product of products) {
    if (product.quantity) {
      total += product.quantity * product.price;
    }
  }

  let totalElement = document.getElementById('total');
  if (totalElement) {
    totalElement.innerHTML = ''; // Clear previous content if any
    let totalText = document.createElement('div');
    totalText.textContent = `TOTAL: ${total.toFixed(2)}€`;
    totalElement.appendChild(totalText);
  } else {
    console.error("Element with id 'total' not found.");
  }
};

const updateQuantity = (sku, change) => {

  let product = cart.getProductInformation(sku);
  if (product) {
    if (!product.quantity) {
      product.quantity = 0;
    }
    product.quantity += change;
    if (product.quantity < 0) {
      // Ensure the quantity doesn't go below 0
      product.quantity = 0;
    }
    document.getElementById(`quantity-${sku}`).textContent = product.quantity;
    document.getElementById(`total-${sku}`).textContent =
      product.quantity * product.price;
    updateTotal(product.quantity * product.price);
  }
};

getProductsData().then((data) => {
  if (data && data.products) {
    cart.products = data.products;
    cart.products = data.products.map((product) => {
      return {
        ...product,
        price: parseFloat(product.price),
      };
    }); // assign the currencay to the cart object
    showProducts(cart.products);
    updateTotal();
  } else {
    console.error("Failed to fetch products");
  }
});

const updateTotalCart = () => {
  let products = cart.getAllProducts();
  let finalTotal = 0;
  console.log('Called');
  let finalTotalContainer = document.getElementById('finalTotal');
  finalTotalContainer.innerHTML = ''; // Clear previous content

  for (let product of products) {
    if (product.quantity > 0) {
      let productTotal = product.quantity * product.price;
      finalTotal += productTotal;

      let productSummary = document.createElement("div");
      productSummary.innerHTML = `
                <p>${product.title}: ${product.quantity} x ${product.price}€ = ${productTotal.toFixed(2)}€</p>
            `;
      finalTotalContainer.appendChild(productSummary);
    }
  }

  let grandTotal = document.createElement("div");
  grandTotal.innerHTML = `<h3>Grand Total: ${finalTotal.toFixed(2)}€</h3>`;
  finalTotalContainer.appendChild(grandTotal);
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>;
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
</head>

<body>
  <div id="productsContainer">
  </div>
  <div id="finalTotal">
  </div>
  <script src="./product.js"></script>
</body>

</html>

Add specific event listeners to all buttons individually and utilize their IDs to update corresponding elements effectively.

I hope you find this guidance useful.

What is the best way to automatically adjust the quantity and total cost for every SKU using JavaScript?

Answer №1

Answer №2

Similar questions

Difficulty with MultiHandleSliderExtender and postback in JavaScript

Utilize Google Drive and scripts to incorporate map images into a React application

The Facebook API's JavaScript SDK displays the status as 'connected' even after logging out

Image does not appear on server side when using FormData for AJAX image upload

The efficiency of the react native Animated.spring function leaves much to be desired, as it

What is the process of installing an npm module from a local directory?

Enhancing transparency with a touch of background color

Filter and select JavaScript objects based on the content of an array

Modifying array elements in JavaScript without explicit instructions

Creating a layered effect by overlaying one image on top of another in an HTML5

Guide on accessing a method from a div element in VueJS

The functionality of TypeScript's instanceof operator may fail when the method argument is not a simple object

Storing the information received from an API as an HTML element

Having trouble with Node integration in Electron?

An issue occurred while attempting to retrieve information from the database table

Is there a way to create a nested object literal that will return the length of

Adjusting canvas dimensions for angular chart.js: A quick guide

Troubleshooting issue with ng-hide in AngularJS when using multiple filters

What is the most effective way to access content from a webpage that is rendered

Tips for prolonging the visibility of the Bootstrap 5 Toast alert