配置购物车价格更新 [英] Configure Cart Price Update

问题描述

我想创建一个包含大量选项的产品订购页面.每个选项都会稍微改变价格，我希望每当任何选项更改时总价格都会自动更新.

I want to create a product ordering page that has tons of options. Each option changes the price around a little bit, and I want the total price auto-update whenever any option changes.

所有选项均为下拉菜单，因此从下拉菜单中选择选项时，价格需要更改.

All options are Drop-down menus so the prices would need to change when they select an option from a drop down.

我乐于接受所有内容，但是一页上的简单代码将是最好的选择.我希望能够将价格作为产品页面其余部分的一部分进行编辑，因为只有一种产品.

I'm open to everything, but simple code on one page would be best. I want to be able to edit the prices as a part of the rest of the product page as there is only one product.

任何建议将不胜感激.

推荐答案

尝试绑定jQuery/javascript函数，该函数将计算所有价格输入字段的总和，并像这样将其打印在下拉菜单的onchange事件的底部.我给您的HTML只是一个模型，您可以随意更改它以及jQuery对它的引用.

Try binding a jQuery/javascript function that calculates the sum of all price input fields and prints it at the bottom to the dropdowns' onchange events like so. The HTML I'm giving you is just a mockup, feel free to change it and the jQuery references to it as you wish.

HTML:

<p>Computer base price: $<span id="baseCost"></span></p>

<p>Select your upgrades:</p>
<form id="options">
    <select name="processor" onchange="calculateTotals()">
        <option value="Base_0">Base processor ($0)</option>
        <option value="Processor1_100">Processor 1 ($100)</option>
        <option value="Processor2_500">Processor 2 ($500)</option>
    </select>
    <select name="hard-drive" onchange="calculateTotals()">
        <option value="Base_0">Base hard-drive ($0)</option>
        <option value="7200rpm_250">7200rpm hard-drive ($250)</option>
    </select>
</form>

<p>Upgrade total: $<span id="upgradeCost">0</span></p><br>
<p>Final total: $<span id="sumTotal"></span></p>​

JavaScript:

Javascript:

$(document).ready(function(){
    var basePrice = 2000;
    $("#baseCost").text(basePrice);
    $("#sumTotal").text(basePrice);
});

function calculateTotals(){
    var basePrice = parseInt($("#baseCost").text(), 10);
    var upgradePrice = 0;
    $("#options select").each(function(){
        var optionVal = $(this).val();
        upgradePrice += parseInt(optionVal.substr(optionVal.indexOf("_") + 1, optionVal.length - 1), 10);
    });
    $("#upgradeCost").text(upgradePrice);
    $("#sumTotal").text(basePrice + upgradePrice);
}​

工作演示

如您所见，选项value属性包括选项ID及其价格，并用下划线分隔.这样，Javascript和您的表单处理代码就可以获取所选的选项及其价格.

As you can see, the option value attributes include both the option ID and its price, separated by an underscore. This allows the Javascript and your form handling code to get both the selected options and their prices.

这篇关于配置购物车价格更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！