Own individual price of products for each parameter in javascript

Question

I'm making a pizza delivery website, each pizza comes in three sizes, each size has its own price. How can I write a code so that each pizza has its own price, and also the price differs depending on the size of one pizza with vanila javascript. In html I have two pizza models similar to each other, but they cost the same. In order not to clutter up the code and not make it readable, I added only one

        
            
                
                Four seasons
                
                    Bacon, Ham, Mushrooms, Chicken, Onion, Olives,
                    Pickled Cucumbers, Hunting sausages, Pepperoni
                
                
                    20sm
                    28sm
                    33sm
                
                    
                    $0

Javascript file

window.addEventListener( 'click', function(event){

// buttons for size picca and price
if (event.target.closest('.card')){
const cardWrapper = event.target.closest('.card')
const btnActiveSmall = cardWrapper.querySelector('[data-size="small"]')
const btnActiveMedium = cardWrapper.querySelector('[data-size="medium"]')
const btnActiveLarge = cardWrapper.querySelector('[data-size="large"]')
price = cardWrapper.querySelector('.price span')


if (event.target.className == 'btnActive'){

    // active off buttons
    btnActiveSmall.classList.remove('active')
    btnActiveMedium.classList.remove('active')
    btnActiveLarge.classList.remove('active')

 if(event.target.dataset.size == "small"){
    event.target.classList.add("active")
    price.textContent = '12';
 }
 else if(event.target.dataset.size == 'medium'){
    event.target.classList.add('active')

    price.textContent = '16';
 }

 else if(event.target.dataset.size == 'large'){
    event.target.classList.add('active')
    price.textContent = '20';   
 }
}

Andy · Accepted Answer

Instead of hard-coding all the options in HTML it maybe easier to visualise and control if all the options were in a JavaScript structure that you can manipulate.

In this example there is an array of available pizzas along with their options (size, price). We can then create an order object from this list, adding a total property.

Add the pizza HTML to the page, and update the totals as the user selects some options.

// Pizzas!
const pizzas = [
 {
   name: 'Four Seasons',
   description: 'Bacon, Ham, Mushrooms, Chicken, Onion, Olives, Pickled Cucumbers, Hunting sausages, Pepperoni',
   options: {
     small: { size: '20', price: 12 },
     medium: { size: '28', price: 16 },
     large: { size: '33', price: 20 }
   }
 },
 {
   name: 'Chocolate and Spinach',
   description: 'Chocolate, Spinach, Eye Of Newt, Ghost Pepper',
   options: {
    small: { size: '20', price: 22 },
    medium: { size: '28', price: 26 },
    large: { size: '33', price: 30 }
   }
 }
];

// Create an order by copying the pizzas to a `pizzas` property
// and adding a subtotal to each pizza, followed by a `total`
// property for the completed order
const order = {
  pizzas: [...pizzas].map(pizza => {
    return { ...pizza, total: 0 };
  }),
  total: 0
};

// For each pizza we return some HTML showing
// the name, description, and its options
const pizzasHtml = pizzas.map(pizza => {
  const { name, description, options } = pizza;
  return `
    ${name}
    ${description}
    ${getOptions(options, name)}
  `;
});

// Creating some HTML for the options
function getOptions(options, name) {
  return Object.entries(options).map(([type, option]) => {
    const { size, price } = option;
    return `
      
        ${type} (${size}cm)
        
        $${price}
      
    `;
  }).join('
');
}

// Cache the important elements
const totalEl = document.querySelector('.total');
const pizzasEl = document.querySelector('.pizzas');
const submit = document.querySelector('.submit');

// Add the HTML to the page
pizzasEl.insertAdjacentHTML('beforeend', pizzasHtml.join(''));

// Add listeners to the submit button, and the pizzas element
submit.addEventListener('click', handleSubmit);
pizzasEl.addEventListener('change', handleChange);

// Remove any pizzas from the order for which an
// order has not been placed
function cleanOrder(order) {
  return {
    ...order,
    pizzas: order.pizzas.filter(pizza => pizza.total !== 0)
  };
}

// Log the final JSON which will be sent to
// the server
function handleSubmit() {
  console.log(JSON.stringify(cleanOrder(order)));
}

// Get a final total based on the pizza subtotals
function getTotal(order) {
  return order.pizzas.reduce((acc, pizza) => {
    acc += pizza.total;
    return acc;
  }, 0);
}

// When an input is changed update the order object
// and update the total
function handleChange(e) {
  if (e.target.matches('.quantity')) {
    const { dataset: { name, type }, value } = e.target;
    const updatedOrder = updateOrder(order, name, value, type);
    totalEl.textContent = `$${updatedOrder.total}`;
  }
}

// Depending on what pizza has been updated calculate
// update its subtotal, and the order total
function updateOrder(order, name, value, type) {
  const pizza = order.pizzas.find(pizza => pizza.name === name);
  pizza.options[type].quantity = +value;
  let total = 0;
  for (const option in pizza.options) {
    const { quantity, price } = pizza.options[option];
    total += (quantity || 0) * price;
  }
  pizza.total = total;
  order.total = getTotal(order);
  return order;
}

.options { text-transform: capitalize; }
.options label { width: 120px; display: inline-block; }
.quantity { margin: 0 1em; }
.pizzas { margin-bottom: 1em; }
.summary, .submit { margin-top: 1em; }



Total:

Own individual price of products for each parameter in javascript

Answers (2)

Related Questions