英文:
Updating a total after removing from the cart
问题
Good evening guys, this is my first time using Stackoverflow, so please be kind.
我是晚上好，这是我第一次使用Stackoverflow，请多多关照。
I have been working on a restaurant order-type app for staff.
我一直在为员工开发一款餐厅点餐类应用程序。
When I delete an item from the cart I would like the total to update.
当我从购物车中删除一个项目时，我希望总额会更新。
Let me know if you need any further assistance with your code translation.
英文:
Good evening guys, this is my first time using Stackoverflow, so please be kind.
I have been working on a restaurant order-type app for staff.
When I delete an item from the cart I would like the total to update.
I know there is probably a simple solution but any help would be much appreciated.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let subtotal = 0;
function Delete(currentEl) {
currentEl.parentNode.parentNode.removeChild(currentEl.parentNode);
}
const calculateserviceCharge = subtotal => {
const serviceCharge = subtotal * .12;
const formattedserviceCharge = serviceCharge.toFixed(2);
return formattedserviceCharge;
};
const calculateTotal = subtotal => {
const serviceCharge = calculateserviceCharge(subtotal);
const total = parseFloat(subtotal) + parseFloat(serviceCharge);
const formattedTotal = total.toFixed(2);
return formattedTotal;
};
$('.btn').on('click', function() {
const title = $(this).data('title');
const price = $(this).data('price');
const element = `
<p class="cart-item-heading ">${title} £${price} <button id="delete" onclick="Delete(this);">X</button>`;
$('.cart-items').append(element);
subtotal = subtotal + price;
const formattedSubtotal = subtotal.toFixed(2.3);
const serviceCharge = calculateserviceCharge(subtotal);
const total = calculateTotal(subtotal);
$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">
<break>
£${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Service Charge(12%):</span>
<span class="g-price tax">£${serviceCharge}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">£${total}</span>
</p>
`);
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
<div class="mains" id="subject">
<div id="cart-items" class="screen-cart">
<h2>Your Order</h2>
<ul class="cart-items" id="cart-items" ">
</ul>
<div class="cart-math " id="cart-math "">
</div>
</div>
<button class="btn" style="background-color: #edb90f" data-title="Duck" data-price="21.95">Duck
</button>
<button class="btn" style="background-color: #edb90f" data-title="Chicken" data-price="18.95">Chicken
</button>
<button class="btn" style="background-color: #edb90f" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet
</button>
<button class="btn" style="background-color: #edb90f" data-title="Orzotto" data-price="12.95">Orzotto
</button>
<button class="btn" style="background-color: #edb90f" data-title="Vegan Burger" data-price="15.45">Vegan Burger
</button>
<button class="btn" style="background-color: #edb90f" data-title="Sea Bass" data-price="16.95">Sea Bass
</button>
<button class="btn" style="background-color: #edb90f" data-title="Classic Burger" data-price="15.45">Classic Burger
</button>
<button class="btn" style="background-color: #edb90f" data-title="Tuna" data-price="22.95">Tuna
</button>
<button class="btn" style="background-color: #edb90f" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream
</button>
</div>
</dialog>
<!-- end snippet -->
答案1
得分: 1
这是我的解决方案，我看到您的按钮将价格存储为数据属性。因此，不必每次添加或删除项目时都进行加法/减法运算，只需每次添加或删除项目时重新计算即可。
循环遍历按钮，将按钮中的价格添加到一个本地变量中。在同一个函数中执行您的服务费等操作，然后将结果输出到您的div中。
您可以通过单击我的删除按钮来查看它的工作原理。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-price="5">REMOVE 5</button>
<button class="btn" data-price="15">REMOVE 15</button>
<button class="btn" data-price="3">REMOVE 3</button>
<div class="cart-math"></div>
const calculateserviceCharge = subtotal => {
const serviceCharge = subtotal * 0.12;
const formattedserviceCharge = serviceCharge.toFixed(2);
return formattedserviceCharge;
};
function calcTotal() {
let subtotal = 0;
$('.btn').each(function() {
subtotal += $(this).data('price');
})
const formattedSubtotal = subtotal.toFixed(2.3);
const serviceCharge = calculateserviceCharge(subtotal);
const total = (parseFloat(serviceCharge) + parseFloat(subtotal)).toFixed(2.3);
$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">
<break>
£${formattedSubtotal}
</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Service Charge(12%):</span>
<span class="g-price tax">£${serviceCharge}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">£${total}</span>
</p>
`);
}
calcTotal();
$(".btn").on("click", function() {
$(this).remove();
calcTotal();
});
请注意，这段代码使用了jQuery库，确保您已经包含了jQuery库的链接。
英文:
There are many solutions. Here is mine, I see that your btn has the price as a data attribute. So instead of adding/subtracting just recalculate each time you add an item or remove it.
Loop through the buttons adding to a local variable the price from the button. Do your service charges etc.. in the same function then output it to your div.
You can see it working by clicking my remove buttons.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const calculateserviceCharge = subtotal => {
const serviceCharge = subtotal * .12;
const formattedserviceCharge = serviceCharge.toFixed(2);
return formattedserviceCharge;
};
function calcTotal() {
let subtotal = 0;
$('.btn').each(function() {
subtotal += $(this).data('price');
})
const formattedSubtotal = subtotal.toFixed(2.3);
const serviceCharge = calculateserviceCharge(subtotal);
const total = (parseFloat(serviceCharge) + parseFloat(subtotal)).toFixed(2.3);
$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">
<break>
£${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Service Charge(12%):</span>
<span class="g-price tax">£${serviceCharge}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">£${total}</span>
</p>
`);
}
calcTotal();
$(".btn").on("click", function() {
$(this).remove();
calcTotal();
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn" data-price="5">REMOVE 5</button>
<button class="btn" data-price="15">REMOVE 15</button>
<button class="btn" data-price="3">REMOVE 3</button>
<div class="cart-math"></div>
<!-- end snippet -->
答案2
得分: 0
只需在从购物车中删除物品时每次调用计算总额的函数。
英文:
Just call the function that calculates your total everytime you delete from the cart.
答案3
得分: 0
以下是您要翻译的内容：
"I would rather edit my HTML as HTML so I used a pair of <template elements for the totals and new items. Then I add the totals and the individual items where they should be.
When I add a new item. I trigger an event to update the totals by whatever items are in the cart at that time so an add or a delete, I just trigger that event on the cart to update.
Just because, I added some CSS to make it slightly more presentable that just the raw html; but also this shows what is where slightly better."
"我宁愿将我的HTML编辑为HTML，因此我使用了一对<template元素来处理总计和新项目。然后，我将总计和各个项目添加到它们应该位于的位置。
当我添加新项目时，我触发一个事件来根据购物车中的当前项目更新总计，因此添加或删除，我只需在购物车上触发该事件来进行更新。
仅仅因为我添加了一些CSS使其看起来比原始HTML更具可读性；但同时这也更好地展示了各个部分的位置。"
英文:
I would rather edit my HTML as HTML so I used a pair of <template elements for the totals and new items.
Then I add the totals and the individual items where they should be.
When I add a new item. I trigger an event to update the totals by whatever items are in the cart at that time so an add or a delete, I just trigger that event on the cart to update.
Just because, I added some CSS to make it slightly more presentable that just the raw html; but also this shows what is where slightly better.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const totalTemplate = document.getElementById("cartTotal");
const itemTemplate = document.getElementById("cartItem");
function deleteItem(event) {
$(this).closest('.cart-item-container').remove();
cart.trigger('update-ticket');
}
function addItem(title, price) {
const cart = $('#cart-items');
const newItem = itemTemplate.content.firstElementChild.cloneNode(true);
cart[0].appendChild(newItem);
const newCart = cart.find('.cart-item-container').last();
newCart.data("cost", price)
.find('.cart-item-heading').html(title);
newCart.find('.price-value').html(price);
cart.trigger('update-ticket');
}
function getSubtotal(el) {
return el.dataset.subtotal * 1;
}
function setup() {
const t = totalTemplate.content.firstElementChild.cloneNode(true);
document.querySelector('.cart-math').appendChild(t);
}
function getCost(cart) {
let sum = 0;
cart.find('.cart-item-container').each(function(e) {
sum = sum + ($(this).data('cost') * 1);
});
return sum;
}
const calculateserviceCharge = subtotal => {
const serviceCharge = subtotal * .12;
const formattedserviceCharge = serviceCharge.toFixed(2);
return formattedserviceCharge;
};
const calculateTotal = subtotal => {
const serviceCharge = calculateserviceCharge(subtotal);
const total = parseFloat(subtotal) + parseFloat(serviceCharge);
const formattedTotal = total.toFixed(2);
return formattedTotal;
};
const cart = $('#cart-items')
.on('update-ticket', function() {
let subtotal = getCost($(this));
const formattedSubtotal = subtotal.toFixed(2.3);
const serviceCharge = calculateserviceCharge(subtotal);
const total = calculateTotal(subtotal);
$('.cart-math').find('.subtotal-value').html(formattedSubtotal);
$('.cart-math').find('.tax-value').html(serviceCharge);
$('.cart-math').find('.total-value').html(total);
})
.on('click', '.delete', deleteItem);
$('.btn.food-item').on('click', function(event) {
const title = $(this).data('title');
const price = $(this).data('price');
addItem(title, price);
});
setup();
<!-- language: lang-css -->
body {
font-size: 16px;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.screen-cart-container {
display: grid;
place-items: center;
}
.food-item {
background-color: #edb90f;
}
.order-header {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.cart-items .cart-item-container {
border: solid 1px #00000033;
display: grid;
grid-template-columns: 6em 3em 2em;
grid-auto-rows: minmax(3em, auto);
gap: 0.25em;
align-items: center;
padding: 0.25em;
}
.total-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 2em);
place-items: center;
gap: 1em;
border: 1px solid green;
padding: 1em;
}
.menu-container {
display: flex;
gap: 0.25em;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialog">
<button class='hide-3' id="hide" style="background-color: #edb90f">Close</button>
<div class="mains" id="subject">
<div id="cart-container" class="screen-cart screen-cart-container">
<div class="order-header">Your Order</div>
<div class="cart-items" id="cart-items">
</div>
<div class="cart-math">
</div>
</div>
<div class="menu-container">
<button class="btn food-item" type="button" data-title="Duck" data-price="21.95">Duck
</button>
<button class="btn food-item" type="button" data-title="Chicken" data-price="18.95">Chicken
</button>
<button class="btn food-item" type="button" data-title="Salmon Fillet" data-price="19.95">Salmon Fillet
</button>
<button class="btn food-item" type="button" data-title="Orzotto" data-price="12.95">Orzotto
</button>
<button class="btn food-item" type="button" data-title="Vegan Burger" data-price="15.45">Vegan Burger
</button>
<button class="btn food-item" type="button" data-title="Sea Bass" data-price="16.95">Sea Bass
</button>
<button class="btn food-item" type="button" data-title="Classic Burger" data-price="15.45">Classic Burger
</button>
<button class="btn food-item" type="button" data-title="Tuna" data-price="22.95">Tuna
</button>
<button class="btn food-item" type="button" data-title="Whole Sea Bream" data-price="49.95">Whole Sea Bream
</button>
</div>
</div>
</div>
<template id="cartItem">
<div class="cart-item-container" data-cost="${price}">
<div class="cart-item-heading"></div><div>£<span class='price-value'></span></div><button type="button" class="delete">X</button></div>
</template>
<template id="cartTotal">
<div class="total-container">
<div class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">£<span class="subtotal-value"></span>
</span>
</div>
<div class="cart-math-item">
<span class="cart-math-header">Service Charge(12%):</span>
<span class="g-price tax">£<span class="tax-value"></span></span>
</div>
<div class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">£<span class="total-value"></span></span>
</div>
</div>
</template>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论