最好的設計，以顯示不同組合的價格

我有一個電子商務網站和一個產品可以有三個變種。這是我最好的設計，以顯示不同組合的價格

color | size | material | price 
blue | medium | leather | $21.00 
blue | large | leather | $27.00 
blue | large | cotton | $47.00 
white | large | cotton | $57.00

在瀏覽器我有三個下拉列表：

color : blue/white 
size : medium/large 
material: leather/cotton

當買家改變一個選項，然後我需要顯示更新的價格。

在服務器端，我會做一個數據庫查詢來獲取價格。在瀏覽器中，我必須使用JavaScript來獲得價格。什麼是完成它的最好方法。

一個解決辦法是保持一個巨大的散列在Javascript

{"blue-medium-leather" : 21.00}

這個策略會奏效。然而，我想知道是否有更好的JavaScript解決方案，我不知道。

來源

2012-01-12 Nick Vanderbilt

您有2^3 = 8組合。在這種情況下，我建議嵌套的結構是這樣的：

var prices = { 
    medium: { 
     leather : { 
      blue: 21.0, 
      white: //... 
     }, 
     cotton: { 
      //... 
     } 
    }, 
    large: { 
     leather : { 
      blue: 27.0, 
      white: //... 
     }, 
     cotton: { 
      blue: 47.0, 
      white: 57.0 
     } 

    } 
}

查詢是出奇的簡單：

var price = prices.large.cotton.white; //57.0

或者，如果您從下拉列表（jQuery的）獲取字符串值：

var size = $('#size').val(); 
var material = $('#material').val(); 
var color = $('#color').val(); 
var price = prices[size][material][color];

很明顯，每個組合的大小都會呈指數級增長。

來源

2012-01-12 18:49:41

不錯。我喜歡。 – 2012-01-12 18:52:03

你不可能把數據庫保存在JS中，對嗎？你需要的是一個web服務，你通過的顏色，大小和材料和服務器返回的價格。您可以使用Ajax從JavaScript調用它

來源

2012-01-12 18:46:24

是的，每進行一次AJAX調用，下拉菜單中的一個值就會變成一個選項。但是這對我來說似乎有點沉重。我們應該能夠在客戶端保留所有這些信息。一個產品最多有30個變體。 30應該可以在客戶端進行管理。 – 2012-01-12 18:49:15

@ nodejs99：當然，但您仍然需要提出請求以獲取正確的數據？價格是否存儲在數據庫中？否則，每次價格變化時都需要更改JS。也許是一個單一的請求，以Tomasz建議的格式獲取所有數據，或者將服務器端嵌入到HTML中。 – 2012-01-13 08:28:40

最好的設計，以顯示不同組合的價格

回答

相關問題