javascript - Javascript计算购物车总数
问题描述
我目前有代码供用户选择衬衫尺寸、设计、款式和颜色。我试图让它根据用户选择来计算价格。如果尺寸为 s,m,lg,xl,价格为 10 美元,但如果他们选择 2x、3x,则价格现在分别为 11 美元、12 美元。T 恤的底价是 10 美元,但如果用户选择长袖,那么底价现在是 15 美元。因此,尺寸 2x 和 3x 变为 16 美元,17 美元。
如果订单的尺寸从小到 XL,我还需要收取 5 美元的固定运费,但如果 8.00 美元的订单包含尺寸为 2xl 或 3xl 的衬衫,则收费。
我希望这是有道理的。非常感谢编辑 javascript 的任何帮助。
<SCRIPT language=javascript>
function CalculateOrder(form)
{
if (form.os0.value == "S")
{
form.amount.value = 10.00;
form.item_number.value = "Small";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
if (form.os0.value == "M")
{
form.amount.value = 10.00;
form.item_number.value = "W-T-Medium";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
if (form.os0.value == "LG")
{
form.amount.value = 10.00;
form.item_number.value = "W-T-LG";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
if (form.os0.value == "XL")
{
form.amount.value = 10.00;
form.item_number.value = "W-T-XL";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
if (form.os0.value == "2XL")
{
form.amount.value = 11.00;
form.item_number.value = "W-T-2XL";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
if (form.os0.value == "3XL")
{
form.amount.value = 12.00;
form.item_number.value = "W-T-3XL";
if (form.os2.value == "Store Pick-Up"){
form.shipping.value = "0.00";
}
if (form.os2.value == "USPS Priority Mail"){
form.shipping.value = "8.00";
}
}
}
</SCRIPT>
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div align="center">
<p>
<input type="hidden" name="on0" value="Design">
Design:
<select name="os1">
<option value="Design1">Design1</option>
<option value="Design2">Design2</option>
<option value="Design3">Design3</option>
</select>
<br><br>
<input type="hidden" name="on1" value="Style">
Style:
<select name="os1">
<option value="T-shirt">T-shirt</option>
<option value="Long Sleeve">Long Sleeve</option>
</select>
<br><br>
<input type="hidden" name="on2" value="Size">
Size:
<SELECT name="os0">
<OPTION value="S">S</OPTION>
<OPTION value="M">M</OPTION>
<OPTION value="LG">LG</OPTION>
<OPTION value="XL">XL</OPTION>
<OPTION value="2XL">2XL</OPTION>
<OPTION value="3XL">3XL</OPTION>
</SELECT>
<br><br>
<input type="hidden" name="on3" value="Color">
Color:
<select name="os1">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
<br>Select Delivery Method:
<input type="hidden" name="on2" value="Delivery Method">
<select name="os2">
<option value="Pick Up" selected>Pick Up</option>
<option value="USPS Priority Mail">USPS Priority Mail</option>
</select>
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="test@gmail.com">
<input type="hidden" name="item_name" value="Widget - T-Shirt">
<input type="hidden" name="amount">
<input type="hidden" name="item_number">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="shipping">
<input type="hidden" name="shipping2">
<INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!"
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="shopping_url" value="http://abc123.com/store.html">
<input type="hidden" name="return" value="http://www.abc123.com/">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</p>
</div>
</FORM>
解决方案
我会尝试稍微清理一下您的代码。
我的更改和注释:
- 在表单 (
payment_form
) 中添加了 ID,因此我们可以使用document.getElementById
- 您的代码正在检查
form.os2.value == "Store Pick-Up"
,但os2
选择器中没有这样的值,看看:(<option value="Pick Up" selected>
看到?它有不同的值) - 你的检查块
shipping
对所有人都是一样的if's
,所以我最后会说 - 我不会将表单传递给函数,而是在内部搜索:
const form = document.getElementById('payment_form');
amount
不是正确的价格名称,因为amount
是您需要多少件,这不是价格,但这只是一个说明。暂时不重要- 为选择添加了 ID,注意:ID 必须是唯一的
- 现在,如果任何选择更新为:
onchange="CalculateOrder()"
- 我添加了新函数
getOption
来获取在属性中的option
元素内设置的值data-*
- 我已将按钮上的功能更改为
onclick="showTest(event)"
- 这仅用于测试。在您的真实代码中,您在这里不需要任何代码onclick
。
function getOption(select, dataAttr) {
const option = select.options[select.selectedIndex];
if (option) {
return option.getAttribute(dataAttr);
}
return '';
}
function CalculateOrder() {
const form = document.getElementById('payment_form');
const os0 = document.getElementById('os0');
const os1 = document.getElementById('os1');
const os2 = document.getElementById('os2');
let price = parseFloat(getOption(os1, 'data-base-price'));
let item_number = getOption(os0, 'data-item-number');
let shipping = getOption(os2, 'data-price');
if (os0.value == "2XL") {
price = price + 1;
} else if (os0.value == "3XL") {
price = price + 2;
}
if (os1.value == "Long Sleeve") {
shipping = 8;
}
form.shipping.value = shipping;
form.item_number.value = item_number;
form.amount.value = price;
}
CalculateOrder()
function showTest(e) {
e.preventDefault();
const form = document.getElementById('payment_form');
console.log('item number: ' + form.item_number.value, 'price: ' + form.amount.value, 'shipping: ' + form.shipping.value)
}
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="payment_form" onchange="CalculateOrder()">
<div align="center">
<p>
<input type="hidden" name="on0" value="Design"> Design:
<select name="os1">
<option value="Design1">Design1</option>
<option value="Design2">Design2</option>
<option value="Design3">Design3</option>
</select>
<br><br>
<input type="hidden" name="on1" value="Style"> Style:
<select name="os1" id="os1">
<option value="T-shirt" data-base-price="10">T-shirt</option>
<option value="Long Sleeve" data-base-price="15">Long Sleeve</option>
</select>
<br><br>
<input type="hidden" name="on2" value="Size"> Size:
<SELECT name="os0" id="os0">
<OPTION value="S" data-item-number="Small">S</OPTION>
<OPTION value="M" data-item-number="W-T-Medium">M</OPTION>
<OPTION value="LG" data-item-number="W-T-LG">LG</OPTION>
<OPTION value="XL" data-item-number="W-T-XL">XL</OPTION>
<OPTION value="2XL" data-item-number="W-T-2XL">2XL</OPTION>
<OPTION value="3XL" data-item-number="W-T-3XL">3XL</OPTION>
</SELECT>
<br><br>
<input type="hidden" name="on3" value="Color"> Color:
<select name="os1">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
<br>Select Delivery Method:
<input type="hidden" name="on2" value="Delivery Method">
<select name="os2" id="os2">
<option value="Pick Up" selected data-price="0">Pick Up</option>
<option value="USPS Priority Mail" data-price="5">USPS Priority Mail</option>
</select>
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="test@gmail.com">
<input type="hidden" name="item_name" value="Widget - T-Shirt">
<input type="hidden" name="amount">
<input type="hidden" name="item_number">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="shipping">
<input type="hidden" name="shipping2">
<INPUT onclick="showTest(event)" type=image alt="Make payments with PayPal - it's fast, free and secure!" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="shopping_url" value="http://abc123.com/store.html">
<input type="hidden" name="return" value="http://www.abc123.com/">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</p>
</div>
</FORM>
如果您需要更多解释,请询问。
PS您可以通过单击“运行代码片段”来测试代码,然后在选择中选择值并按下按钮。
推荐阅读
- jenkins - Groovy 中的 Jenkins 密码参数
- jql - Jira 查询在 JIRA 搜索中不起作用?
- java - 处理来自线程工作者的多个错误
- android - 级别列表不适用于 ImageView - Android
- python - 使用 PyWin32 的 Python 多处理,用于更快的批量电子邮件处理
- node.js - 无法在 Member.set [as avatar] 处设置未定义的属性“头像”-Discord Bot
- double - 用单引号替换双引号
- html - 如何在 FreeMarker 上将图像右对齐
- python - 验证准确性不能改善不平衡数据
- assembly - 随机数生成器 (rdtsc)