用Javascript更改價格值來計算訂單總和

Question

我正在嘗試使用Javascript以一種大形式計算訂單總和。 每個產品都有其自己的價格，但是，有些產品會捆綁更多的價格。 每個產品都有其自己的價格，但是如果客戶訂購更多數量的該產品，則價格將下降到數據庫表中指定的值。

為簡化起見，一件商品的購物表單如下所示。

<input name="id" value="'.$id.'" type="hidden">
<input name="price_'.$id.'" value="'.$price.'" type="hidden">
<input name="quantity_'.$id.'" type="text" onchange="calculateTotal()">

我有一個帶有折扣的表： itemId ， minimumQuantity ， priceAfterDiscount 。 一件商品可以有多個折扣。 MySQL查詢可與Items和Discounts表的LEFT JOIN一起使用。

calculateTotal()計算每次輸入更改后的訂單總數。

我想做的是檢查某種產品的數量是否大於折扣所需的價值，如果是，我想將輸入價格的輸入值從項目的正常價格更改為折扣后的價格。 然后， calculateTotal()將使用該價格並更新總數。

為此，我想我可以做一些事情，例如添加具有所有折扣值的更多隱藏輸入。 該功能將檢查是否有折扣鏈接到每個項目，如果是，它將檢查數量是否大於requiredQuantity ，如果滿足此條件，它將更新價格隱藏輸入的值。 請記住，一件商品可以有多個折扣-該功能應找到符合requiredQuantity的最低價格。

我正在嘗試執行此操作-創建隱藏的輸入，並以某種方式在javascript中解析它們，但我只是無法弄清楚。 我盡力解釋了問題，但是，如果我的解釋不夠充分，我將嘗試回答您有關我問題的問題。

希望您能並且願意幫助我。 預先感謝您的幫助。

Answer 1

也許像這個例子。

CSS

.itemLabel, .currentPrice, .subTotal {
    display: inline-block;
    width: 40px;
}
#myTotal {
    border:2px solid red;
}

HTML

<fieldset id="myInputs"></fieldset>
<div id="myTotal"></div>

使用Javascript

var myInputs = document.getElementById('myInputs'),
    myTotal = document.getElementById('myTotal'),
    order = {
        total: 0
    },
    items = {
        foo: {
            1: 0.5,
            100: 0.25
        },
        bar: {
            1: 1,
            100: 0.5
        }
    },
    totalNode;

function calculateTotal() {
    var newTotalNode;

    Object.keys(order).filter(function (key) {
        return key !== 'total';
    }).reduce(function (acc, key) {
        order.total = acc + order[key].subTotal;

        return order.total;
    }, 0);

    newTotalNode = document.createTextNode(order.total.toFixed(2));
    if (totalNode) {
        myTotal.replaceChild(newTotalNode, totalNode);
        totalNode = newTotalNode;
    } else {
        totalNode = myTotal.appendChild(newTotalNode);
    }

    console.log(JSON.stringify(order));
}

calculateTotal();
Object.keys(items).forEach(function (key) {
    var div = document.createElement('div'),
        label = document.createElement('label'),
        price = document.createElement('span'),
        input = document.createElement('input'),
        subtotal = document.createElement('span'),
        priceNode,
        subTotalNode;

    order[key] = {
        quantity: 0,
        subTotal: 0,
        price: items[key]['1']
    };

    priceNode = document.createTextNode(order[key].price.toFixed(2));
    subTotalNode = document.createTextNode(order[key].subTotal.toFixed(2));
    label.className = 'itemLabel';
    label.setAttribute("for", key);
    label.appendChild(document.createTextNode(key));

    price.className = 'currentPrice';
    price.id = key + 'CurrentPrice';
    price.appendChild(priceNode);

    input.id = key;
    input.name = 'myFormGroup';
    input.type = 'text';
    input.addEventListener('change', (function (key, order, priceNode, subTotalNode) {
        return function () {
            var value = +(this.value),
                newPriceNode,
                newSubTotalNode;

            Object.keys(items[key]).sort(function (a, b) {
                return b - a;
            }).some(function (quantity) {
                if (value >= quantity) {
                    order.price = items[key][quantity];
                    newPriceNode = document.createTextNode(order.price.toFixed(2));
                    priceNode.parentNode.replaceChild(newPriceNode, priceNode);
                    priceNode = newPriceNode;

                    return true;
                }

                return false;
            });

            order.subTotal = order.price * value;
            newSubTotalNode = document.createTextNode(order.subTotal.toFixed(2));
            subTotalNode.parentNode.replaceChild(newSubTotalNode, subTotalNode);
            subTotalNode = newSubTotalNode;
            calculateTotal();
        };
    }(key, order[key], priceNode, subTotalNode)), false);

    subtotal.className = 'subTotal';
    subtotal.id = key + 'SubTotal';
    subtotal.appendChild(subTotalNode);

    div.appendChild(label);
    div.appendChild(price);
    div.appendChild(input);
    div.appendChild(subtotal);
    myInputs.appendChild(div);
});

在jsFiddle上