閱讀英文

共用方式為


購買頁模組

本文介紹購買方塊模組,並介紹如何將它們添加到網站頁面 Microsoft Dynamics 365 Commerce。

術語 購買方塊 通常是指產品詳細資訊頁面 (PDP) 中“首屏”的區域,其中包含購買產品所需的所有最重要的資訊。 (首次載入頁面時,“首屏”區域可見,因此使用者無需向下滾動即可查看。

購買方塊模組是一種特殊的容器,用於託管產品詳細資訊頁面購買方塊區域中顯示的所有模組。

產品詳細資訊頁面的 URL 包含產品 ID。 呈現購買方塊模組所需的所有資訊都派生自此產品 ID。 如果未提供產品 ID,則購買方塊模組將無法在頁面上正確呈現。 因此,購買方塊模組只能在具有產品上下文的頁面上使用。 若要在沒有產品上下文的頁面 (例如,主頁或市場行銷頁面) 上使用它,必須執行其他自定義。

下圖顯示了產品詳細資訊頁面上的購買方塊模組範例。

購買方塊模組範例。

購買方塊模組屬性和插槽

在產品詳細信息頁面上,購買方塊分為兩個區域:左側的媒體區域和右側的內容區域。 默認情況下,媒體區域列的寬度與內容區域列的寬度之比為 2:1。 在行動裝置上,兩個區域堆疊在一起,以便一個區域顯示在另一個區域的下方。 主題可用於自定義列寬和堆疊等級。

購買方塊模組呈現產品的標題、描述、價格和評級。 它還允許客戶選擇具有不同產品屬性 (如尺寸、樣式和顏色) 的產品多屬性。 選擇產品變型時,購買方塊中的其他屬性 (例如,產品描述和圖像) 將更新以反映變型資訊。

提供數量選擇器,以便客戶可以指定要購買的商品數量。 可以在網站設置中定義可以購買的最大數量。

在購買方塊中,客戶還可以執行將產品添加到購物車、將產品添加到願望清單以及選擇取貨地點等操作。 可以對產品或產品變型執行這些操作。 要將產品添加到願望清單,客戶必須登錄。

主題可用於刪除或更改購買方塊產品屬性和操作控件的順序。

模組屬性

  • 標題標籤 –此屬性定義產品標題的標題標籤。 如果購買方塊位於頁面頂部,則此屬性應設置為 h1 以滿足輔助功能標準。

  • 啟用「選購外觀相似的產品」推薦 - 此屬性允許購買方塊顯示指向看起來與當前查看的專案相似的產品的連結。 此功能在 Commerce 版本 10.0.13 及更高版本中可用。

可在購買方塊模組中使用的模組

  • 媒體庫 –此模組用於在產品詳細資訊頁面上展示產品的圖像。 有關此模組的詳細資訊,請參閱 媒體庫模組
  • 商店選擇器 –此模組顯示附近商店的清單,其中商品可供提貨。 它允許使用者輸入位置以查找附近的商店。 有關此模組的詳細資訊,請參閱 應用商店選擇器模組
  • 社交分享 - 可以將此模組添加到購買方塊中,以允許使用者在社交媒體上分享產品資訊。 有關詳細資訊,請參閱 社交分享模組

購買方塊模組設定

可以在網站設定 擴展 > 中設定以下購買方塊模組設定:

  • 購物車行數量限制 –此屬性用於指定可以添加到購物車的每個商品的最大數量。 例如,零售商可能決定在一次交易中只能銷售每種產品的 10 種。
  • 庫存 –有關如何應用庫存設置的資訊,請參閱 應用庫存設置
  • 將產品添加到購物車 –有關如何應用 將產品添加到購物車 設定的資訊,請參閱 將產品添加到購物車設置

在 Adventure Works 主題中購買方塊模組定義延伸

Adventure Works 主題提供的購買方塊模組具有模組定義擴展,該擴展支援在 PDP 購買方塊中的摺疊面板模組中實現產品規格模組。 要在 PDP 購買方塊中展示產品規格屬性,請將產品規格模組添加到購買方塊插槽中的摺疊面板模組插槽中。

重要

Adventure Works 主題從 Dynamics 365 Commerce 版本 10.0.20 開始提供。

Commerce Scale Unit 互動

購買方塊模組使用 Commerce Scale Unit 應用程式程式設計介面 (API) 檢索產品資訊。 產品詳細資訊頁面中的產品 ID 用於檢索所有資訊。

將購買方塊模組新增到頁面

若要將購買方塊模組添加到新頁面並設置所需的屬性,跟隨執行以下步驟。

  1. 轉到 “片段”,然後選擇“ 新建 ”以創建新片段。
  2. 在「 新建片段 」對話框中,選擇 購買方塊 模組。
  3. 在“片段名稱 ”下,輸入名稱 購買方塊片段,然後選擇“ 確定”。
  4. 在購買方塊模組的媒體庫 插槽中,選擇省略號 (...),然後選擇 添加模組
  5. 在“選擇模組 對話框中,選擇 “媒體庫 ”模組,然後選擇“ 確定”。
  6. 在購買方塊模組的應用商店選擇器 插槽中,選擇省略號 (...),然後選擇添加 模組
  7. 在“選擇模組 對話框中,選擇“ 應用商店選擇器 ”模組,然後選擇“ 確定”。
  8. 選擇 保存,選擇 完成編輯 以簽入片段,然後選擇 發佈 以發佈它。
  9. 轉到 “範本”,然後選擇“ 新建 ”以創建新範本。
  10. 在“新建範本 對話框中的“範本名稱 ”下,輸入 PDP 範本,然後選擇“ 確定”
  11. 在“ 正文 ”插槽中,選擇省略號 (...),然後選擇“ 添加模組”。
  12. 在“選擇模組 對話框中,選擇 “默認頁面 ”模組,然後選擇“ 確定”。
  13. 在預設頁面的主 插槽中,選擇省略號 (...),然後選擇 添加片段
  14. 在“ 選擇片段 ”對話框中,選擇 您創建的購買方塊片段 片段,然後選擇 確定
  15. 選擇 保存,選擇 完成編輯 以簽入範本,然後選擇 發佈 以發佈它。
  16. 轉到 「頁面」,然後選擇「 新建 」以創建新頁面。
  17. 在“創建新頁面” 對話框中的“頁面名稱 ”下 ,輸入 aPDP 頁面 ,然後選擇“下一步 ”。
  18. 在“選擇範本 ”下,選擇“ PDP 範本”,然後選擇“ 下一步”。
  19. “選擇配置”下,選擇頁面配置 (例如“ 靈活配置”),然後選擇“ 下一步”。
  20. 在「查看並完成 下,查看頁面配置。 如果需要編輯頁面資訊,請選擇“ 返回”。 如果頁面資訊正確,請選擇「 創建頁面」。
  21. 在新頁面的主 插槽中,選擇省略號 (...),然後選擇 添加片段
  22. 在“ 選擇片段 ”對話框中,選擇 您創建的購買方塊片段 片段,然後選擇 確定
  23. 保存並預覽版頁面。 將?productid=<product ID> 查詢字串參數添加到預覽版頁面的 URL。 這樣,產品上下文就用於載入和呈現預覽版頁面。
  24. 選擇 保存,選擇 完成編輯 以簽入頁面,然後選擇 發佈 以發佈頁面。 產品詳細資訊頁面上應顯示購買方塊。

其他資源

模組庫概觀

商店選擇器模組

媒體庫模組

容器模組

購物車模組

結帳模組

訂單確認模組

頁眉模組

頁腳模組

社交分享模組

將產品新增到購物車設定

計算零售通路的庫存供應情況

SDK 和模組庫更新