使用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查詢與LEFT JOIN的Items和Discounts表一起使用。

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