1. 程式人生 > >電商網站商品模型之商品詳情頁設計方案

電商網站商品模型之商品詳情頁設計方案

查詢 amp 多對一關系 int cor http 添加 com 托盤

如下設計方案參考淘寶和華為商城

SKU SPU的關系
SPU = Standard Product Unit (標準產品單位)
SPU是商品信息聚合的最小單位,是一組可復用、易檢索的標準化信息的集合,該集合描述了一個產品的特性。例如iphone4就是一個SPU,與套餐、存儲容量、顏色無關。

SKU=stock keeping unit(庫存量單位)
SKU即庫存進出計量的單位, 可以是以件、盒、托盤等為單位。
SKU是物理上不可分割的最小存貨單元。在使用時要根據不同業態,不同管理模式來處理。例如32G白色iphone4就是一個SKU。

一個SPU包含一組SKU,我們通常把一組具有通用信息的商品抽象成一個SPU,這樣更加有利於數據的復用。

比如淘寶就是把規格參數和商品詳情放在SPU中,這樣同一個SPU下的多個SKU就可以復用這些信息。而把影響價格的屬性選項(顏色、套餐、存儲容量等等)放到SKU中。

如下圖:

註意:數據庫設計時,SKU的id可以用自增長的七位數字表示,在數據庫初始化時設置SKU的id的起始值為1000001,然後遞增增長。

屬性設計
在電商網站的商品詳情頁的頭部,我們經常可以通過點擊不同的選項(顏色、套餐、尺寸等等)從而改變商品的價格

如下圖:

對應的數據庫設計方案如下圖:輪播圖的設計參考華為商城

屬性為什麽要放到分類下面呢?如果把衣服和手機都看做一個分類的話,它們都有顏色屬性,但是它們所有的具體顏色有不太相同,比如衣服的顏色種類會比較豐富而手機的顏色可能就黑白藍等簡單的幾種顏色。這樣做確實是增加了數據庫的冗余,但是對在後臺添加SKU帶來了查詢上的方便,提高了用戶體驗。

後臺界面設計方案:

第一步:添加一個分類

第二步:給分類添加所屬屬性

第三步:給屬性設置一系列選項

第四步:添加一個SPU並設置SPU下的一組輪播圖片

第五步:添加一個SKU,添加SKU的時候根據選擇的不同SPU自動列出對應的屬性和屬性選項供勾選(只能單選),並且列出SPU下的一組輪播圖片供SKU挑選

前臺界面數據讀取方案:

第一步:當跳轉到某個SKU詳情頁面的時候,根據當前的SKU查出當前SKU所在SPU組下面的所有SKU的屬性及屬性選項分組展示,默認勾選當前SKU對應的屬性選項值。

第二步:當用戶選擇不同的屬性選項時根據選擇狀態計算出對應的SKU,然後改變商品名稱、顯示價格、及輪播圖圖片。

計算SKUID的具體方法為(偽代碼):

var skuids=當前頁碼url skuid對應的spu下的一組skuid。

var optionids=前臺獲取到的一組選項id;

int currentSkuid=0;

for(int i=0;i<skuids.count;i++)

{

  for(int j=0;j<optionids.count;j++)

{

   bool hasRecord= db.SKU-屬性選項表.Where(c=>c.skuid=skuids[i]&&c.選項ID=optionids[i]).Any();

   if(!hasRecord)

  {

      break;

  }

}

currentSkuid=skuids[i];

break;

}

規格設計
規格選項是和SPU對應的,規格是一組相同SPU的商品的描述信息。

如下圖:

轉自:https://www.cnblogs.com/eggTwo/p/6404805.html

設計方案:

後臺界面設計方案:

第一步:添加一個分類

第二步:給分類添加規格組

第三步:給規格組添加規格

第四步:給規格添加規格參數

第五步:添加SPU時,列出SPU對應分類下的所有規格組、規格、規格參數供勾選(可多選)

前臺界面數據讀取方案:

第一步:當跳轉到某個SKU詳情頁面的時候,根據當前的SKU查出當前SKU所在SPU下的所有規格參數,按規格組、規格合並顯示。

商品詳情設計

商品詳情實際上是文字信息加一系列的圖片(從詳情圖片表中取)。我們把商品詳情放在SPU中。

設計方案如下:

後臺界面設計方案:

第一步:SPU編輯界面上傳詳情圖片

前臺界面數據讀取方案:

第一步:當跳轉到某個SKU詳情頁面的時候,根據當前的SKU查出當前SKU所在SPU下的所有詳情圖片。

完整的設計方案

單位數量轉換關系
以上設計方案雖然完成了商品詳情頁的設計,但是對於是商品的單位、數量、單價還沒有進行具體的介紹。比如,地板采購單位可能是箱,銷售單位是平方米,而庫存單位是片。這種問題怎麽解決呢?

設計單位數量轉換關系表

單位數量轉換關系表和sku表多對一關系。後臺商品添加時先設置單位數量轉換關系。sku的庫存單位為單位數量轉換關系表中的基本單位,銷售單位和采購單位都從單位數量轉換關系表中選擇。

在采購單的設計中要放(采購單位、采購數量、采購價、幣種、庫存單位數量),在銷售訂單的設計中要放(銷售單位、銷售數量、銷售價、幣種、庫存單位數量)。因為實際的出入庫數量用的都是庫存單位數量,這樣即使改了銷售單位、采購單位,出庫數量也不會錯。

電商網站商品模型之商品詳情頁設計方案