分享方式:


購買頁模組

本文涵蓋購買方塊 模組並描述如何將它們新增至網站頁面 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 摺疊面板 應用程式介面 (API) 擷取產品資訊。 產品詳細資訊頁面中的產品 ID 用於檢索所有資訊。

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

若要將 購買方塊 模組新增至新頁面並設定所需的屬性,請執行 跟隨 這些步驟。

  1. 前往 片段,然後選擇 新建 以建立新片段。
  2. 在裡面 新片段 對話框中,選擇 購買方塊 模組。
  3. 在下面 片段名稱, 輸入姓名 購買方塊 片段,然後選擇 確定
  4. 在裡面 媒體庫 購買方塊 模組的插槽,選擇省略號 (……),然後選擇 新增模組
  5. 選擇模組 對話方塊中,選擇 媒體庫 模組,然後選擇 確定
  6. 在 購買方塊 模組的 儲存選擇器 插槽中,選擇省略號 (...),然後選擇 新增模組
  7. 選擇模組 對話方塊中,選擇 商店選擇器 模組,然後選擇 確定
  8. 選擇 儲存,選擇 完成編輯 以簽入片段,然後選擇 發佈 以發布它。
  9. 前往 範本,然後選擇 新建 建立新範本。
  10. 新範本 對話方塊中的 範本名稱下,輸入 PDP模板,然後選擇 確定
  11. 正文 插槽中,選擇省略號 (...),然後選擇 新增模組
  12. 選擇模組 對話方塊中,選擇 預設頁面 模組,然後選擇 確定
  13. 在預設頁面的 插槽中,選擇省略號 (...),然後選擇 新增片段
  14. 選擇片段 對話方塊中,選擇您建立的 購買方塊片段 片段,然後選擇 確定
  15. 選擇 儲存,選擇 完成編輯 以簽入模板,然後選擇 發佈 以發布它。
  16. 前往 頁面,然後選擇 新建 以建立新頁面。
  17. 建立新頁面 對話方塊中的 頁面名稱下,輸入 PDP頁,然後選擇 下一步
  18. 選擇模板下,選擇 PDP模板,然後選擇 下一步
  19. 選擇 配置 下,選擇頁面 配置(例如, Flexible 配置),然後選擇 下一步
  20. 查看並完成下,查看頁面配置。 如果您需要編輯頁面訊息,請選擇 返回。 如果頁面資訊正確,請選擇 建立頁面
  21. 在新頁面的 插槽中,選擇省略號 (...),然後選擇 新增片段
  22. 選擇片段 對話方塊中,選擇您建立的 購買方塊片段 片段,然後選擇 確定
  23. 儲存並預覽版 頁面。 將 ?productid=<產品 ID> 查詢字串參數新增至 預覽版 頁面的 URL。 這樣,產品上下文用於載入和呈現預覽版 頁面。
  24. 選擇 儲存,選擇 完成編輯 簽入頁面,然後選擇 發佈 以發布它。 購買方塊 應會出現在產品詳細資料頁面上。

其他資源

模組資源庫概觀

商店選擇器模組

媒體庫模組

容器模組

購物車模組

結帳模組

訂單確認模組

標頭模組

頁尾模組

社交 分享 模組

將產品加入購物車設置

計算零售通路的庫存可用性

SDK 和 模組庫 更新