共用方式為


購買頁模組

備註

Dynamics 365 Commerce 的零售興趣群組已從 Yammer 移至 Viva Engage。 如果您無法存取新的Viva Engage社群,請填寫此表單 (https://aka.ms/JoinD365commerceVivaEngageCommunity) 以新增,並繼續參與最新的討論。

本文說明購買盒模組,並說明如何在 Microsoft Dynamics 365 Commerce 中將它們加入網站頁面。

購買框一詞通常指的是產品詳情頁(PDP)中「摺疊上方」的區域。它儲存了顧客購買產品所需的所有重要資訊。 頁面首次載入時會看到「摺頁上方」的區域,使用者不必往下滑就能看到。

購買盒模組是一種特殊的容器,用來存放產品詳情頁面購買盒區中所有顯示的模組。

產品詳細資訊頁的網址包含產品 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 互動

購買盒模組透過商務比例單位應用程式介面(API)獲取產品資訊。 它會使用產品詳情頁面的產品 ID 來取得所有產品資訊。

將購買方塊模組加入頁面

要將購買盒模組加入新頁面並設定所需屬性,請依照以下步驟操作:

  1. 移至片段,然後選取新增以建立新的片段。
  2. 新增片段對話方塊中,選擇購買方塊模組。
  3. 片段名稱欄位輸入購買方塊片段,然後選擇確定
  4. 在購買方塊模組的媒體庫插槽中,選擇省略符號 (...),然後選擇新增模組
  5. 選取模組對話方塊中,選取媒體庫模組,然後選取確定
  6. 在購買方塊模組的商店選擇器插槽中,選擇省略符號 (...),然後選擇新增模組
  7. 選取模組對話方塊中,選取商店選取器模組,然後選取確定
  8. 選擇儲存,選擇完成編輯以簽入片段,然後選擇發佈將其發佈。
  9. 移至範本,然後選取以建立新的範本。
  10. 新增範本對話方塊中,在範本名稱欄位輸入PDP 範本,然後選擇確定
  11. 本文位置中,選取省略符號 (...),然後選取新增模組
  12. 選取模組對話方塊中,選取預設頁面模組,然後選取確定
  13. 在預設頁面的主要插槽中,選擇省略符號 (...),然後選擇新增片段
  14. 選擇片段對話方塊中,選擇您建立的購買方塊片段,然後選擇確定
  15. 選取儲存,選取完成編輯以簽入範本,然後選取發佈以進行發佈。
  16. 移至頁面,然後選取以建立新的頁面。
  17. 建立新頁面對話方塊中,在頁面名稱欄位輸入 PDP 頁面,然後選擇下一步
  18. 選擇範本中,選擇 PDP 範本,然後選擇下一步
  19. 選擇版面配置底下,選取頁面版面配置 (例如,彈性版面配置),然後選取下一步
  20. 檢閱和完成底下,檢閱頁面設定。 如果您需要編輯頁面資訊,請選取返回。 如果頁面資訊正確,則選取建立頁面
  21. 在新頁面的主要插槽中,選擇省略符號 (...),然後選擇新增片段
  22. 選擇片段對話方塊中,選擇您建立的購買方塊片段,然後選擇確定
  23. 儲存並預覽頁面。 在預覽頁面的 URL 加上 ?productid=<產品 ID> 查詢字串參數。 如此一來,將會使用產品上下文來載入並呈現預覽頁面。
  24. 選取儲存,選取完成編輯以簽入頁面,然後選取發佈以進行發佈。 產品詳細頁應該會顯示購買方塊。

其他資源

模組資源庫概觀

商店選取器模組

媒體庫模組

容器模組

購物車模組

結帳模組

訂單確認模組

頁首模組

頁尾模組

社交分享模組

加入產品至購物車設定

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

SDK 和模組資源庫更新