How to add only one product at a time to the cart and calculate the total

Asked

Viewed 31 times

-2

I am developing a digital menu and I am having difficulty how to do the part that the customer adds the product in the cart, selects the quantities of the product and automatically calculate the subtotal and the total, I would like to know how I can do ?

javascript

  • Hello Peter! Welcome to Stackoverflow in English! Your question seems to have some problems and your experience here in Stack Overflow may not be the best because of it. We want you to do well here and get what you want, but for that we need you to do your part. Here are some guidelines that will help you: Stack Overflow Survival Guide in English (short version). If the solution is very simple it is still possible for someone to do so in the comments.

  • Good afternoon Peter, in fact your question is very comprehensive, the cart process may have different approaches, involve several tables, processes and validations. First you should understand about your process, draw it using UML diagrams, check if it actually makes sense, if you have questions if such a process makes sense, ask here, put your drawing explain your strategy/ process and I guarantee that the staff will help you. After that you start programming, with the diagram ready is much easier.

1 answer

2

The question is somewhat generic, so here’s a generic answer in 3 steps (but hopefully useful :))

Let’s say your menu of products has this format here:

const productsMenu = {
 prod01: {name: 'camisa', value:100},
 prod02: {name: 'calça', value:200},
 prod03: {name: 'boné', value:50}
}
  1. We first need an array to receive the products that the user will buy, that is, the famous "shopping cart". Let’s then create our product list (which starts empty)
const cart = []
  1. We then make a Function to add products to the Cart
function addProductToCart(product, amount) {
  for (let i = 0; i < amount; i++) {
    cart.push(product)
  }
}

*** Fire this function whenever the user adds something to the cart by passing the product and quantity parameter. For example:

addProductToCart(productsMenu['prod01'], 4)
addProductToCart(productsMenu['prod02'], 2)
addProductToCart(productsMenu['prod03'], 1)

Each call to addProductToCart will "push" new products pro array Cart. In our case, the above calls will leave our Cart array like this:

[
 {name:"camisa",value:100},
 {name:"camisa",value:100},
 {name:"camisa",value:100},
 {name:"camisa",value:100},
 {name:"calça",value:200}, 
 {name:"calça",value:200},
 {name:"boné", value:50}
]
  1. Now we need a function to add up the values of each product in our Cart array. The reduce method is perfect for this!
function getCartTotal(userCart) {
  return userCart.reduce((acc, next) => {
    return acc += next.value
  }, 0)
}

Array.reduce goes through each element of the array and has an accumulator, which in our case, we use to "accumulate" the value of each product. At the end, we return the accumulated value of all values in our Cart array

getCartTotal(cart)

// 850

In this solution we use only a little of the power of reduce. Much more sophisticated logics can be created within a reduce function, it’s worth studying it! In my opinion the secret to better understand this method is in the third parameter that we passed to the function, which represents the initial value of the accumulator. In our case, this parameter is a number 0, but it could be an array, an object... Anyway, it is the tip! I hope it helps.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.