設定您的店面

建立您的店面專案 — 使用網站建立工具建立新的店面專案，其中包含樣版程式碼、範例內容和設定檔。

自訂店面設定 — 更新存放庫中的config.json檔案，以連線至您的Adobe Commerce Optimizer執行個體。

驗證您的設定 （10分鐘）

• 預覽您的店面網站
• 測試產品詳細資料頁面和搜尋功能

開啟網站建立者工具

{width="700" modal="regular"}

選取​ 建立新網站（程式碼與內容）。

完成站台設定：

• GitHub組織/使用者名稱：輸入您的GitHub使用者名稱或組織名稱
• 網站名稱：選擇店面的描述性名稱
• Commerce GraphQL端點（選用）：輸入您Adobe Commerce Optimizer執行個體的GraphQL端點

按一下​ 建立網站，使用店面樣板程式碼建立GitHub存放庫。

建立存放庫時，網站建立者會更新並提示您安裝程式碼同步應用程式。

按一下​ Install AEM Code Sync App ​以在新索引標籤中開啟程式碼同步處理安裝程式。

設定程式碼同步應用程式：

• 選取您的GitHub組織，然後按一下​ Configure。
• 在程式碼同步處理介面中，按一下​ Only select repositories。
• 按一下​ Select repositories ​功能表，然後選擇您建立的店面程式碼存放庫。
• 按一下​ Save ​註冊您的存放庫。

返回開啟網站建立者的瀏覽器視窗，然後按一下​ 建立網站。

「網站建立者」會將店面樣板內容複製到檔案製作環境。 此程式需要1-2分鐘。

在網站詳細資訊區段中，檢閱店面專案的連結：

{width="700" modal="regular"}

使用這些連結來管理您的店面程式碼、內容和設定。

複製並儲存這些連結以供日後參考：按一下**Copy。

使用您先前儲存的連結開啟設定管理員：

https://da.live/sheet#/<username or org>/<repo name>/config.json

找到組態中的cs （目錄服務）區段。

將預留位置值取代為您的例項值。 請參閱必要條件。

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

儲存組態檔。

導覽至您的即時預覽URL：

https://main--{SITE}--{ORG}.aem.live

將{ORG}和{SITE}取代為您的GitHub組織和網站名稱。

成功標準：您應該會看到包含樣版內容的店面首頁。

{width="700" modal="regular"}

導覽至範例產品頁面：
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

使用範例資料中的任何SKU，例如：
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

對於預設店面，您可以使用路由中的placeholder值來檢視產品。 當您開始自訂店面時，您可以自訂店面程式碼，以根據目錄中定義的產品路由設定產品詳細資料頁面的路徑。

成功標準：頁面應顯示：

• 產品名稱、說明和定價
• 產品影像
• 加入購物車功能
• 從您的Adobe Commerce Optimizer執行個體擷取的資料

{width="700" modal="regular"}

在店面首頁上，按一下標題中的放大鏡圖示。

輸入搜尋字串tires並按​ Enter。

成功標準：您應該會看到：

• 包含輪胎產品的搜尋結果頁面
• 側欄中的篩選選項
• 包含影像和定價的產品清單

{width="675" modal="regular"}

按一下任何輪胎產品以檢視其詳細資訊頁面。

{width="675" modal="regular"}

安裝Sidekick — 直接從您的網站編輯、預覽和發佈內容的瀏覽器延伸模組

設定本機開發環境 — 建立本機環境，以自訂您的店面程式碼和內容