設定您的店面

安裝節點版本管理員(NVM)。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

安裝Node.js和NPM。 如需詳細資訊，請參閱Node.js。

nvm install 22

npm install -g npm

驗證安裝。

npm -v

登入您的GitHub帳戶。

導覽至aem-boilerplate-commerce GitHub存放庫。

選取「使用此範本」，然後從下拉式功能表中選取「建立新的存放庫」。

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

儲存區域組態頁面隨即顯示。

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

使用下列詳細資料完成設定表單：

• 存放庫範本—hlxsites/aem-boilerplate-commerce （預設）。
• 所有者 — 您的組織或帳戶（必要）。
• 存放庫名稱 — 您的新存放庫的唯一名稱（必填）。
• 描述 — 存放庫的簡短描述（選擇性）。
• Public或Private—Adobe建議使用public （預設）。

選取​ 建立存放庫。

幾分鐘後，您的新存放庫會開啟。

忽略GitHub使用者介面中顯示的任何提取請求通知。

將存放庫複製到本機電腦。

git clone https://github.com/{ORG}/{SITE}.git

如果您在複製存放庫時遇到錯誤，請參閱GitHub檔案中的疑難排解複製錯誤。

在終端機或IDE中開啟存放庫。

將default-fstab.yaml檔案複製到fstab.yaml以建立您的設定檔。

cp default-fstab.yaml fstab.yaml

更新店面設定檔案中的掛接點，以指向您的內容URL。

1. 開啟fstab.yaml設定檔。

   code language-yaml
   mountpoints: /: url: https://content.da.live/{org}/{site}/ type: markup folders: /products/: /products/default

2. 將{ORG}和{SITE}字串取代為您為樣板程式碼建立的GitHub存放庫值。

   例如，更新的程式碼應如下所示。

   code language-yaml
   mountpoints: /: url: https://content.da.live/owner-name/aco-storefront/ type: markup

3. 儲存檔案。

建立新目錄tools/sidekick。

mkdir tools/sidekick

將根目錄中的demo-sidekick.json檔案複製到tools/sidekick目錄，並將其重新命名為config.json。

cp demo-sidekick.json tools/sidekick/config.json

自訂網站的Sidekick設定。

從tools/sidekick/目錄，編輯config.json檔案。

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

以您GitHub存放庫的值更新url機碼值。

• 將{{ORG}}字串取代為您的存放庫的組織或使用者名稱。

• 以存放庫名稱取代{{SITE}}字串。

• pathname變數已由系統填入。

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

儲存檔案。

在編輯器或IDE中，提交並儲存您更新的檔案。

git add .

確認您認可兩個更新的檔案。

git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

提交變更。

git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

套用您的變更。

git push

開啟AEM程式碼同步應用程式設定頁面。

選取​ 設定，然後使用包含您建立之存放庫的​ 組織 ​或​ 帳戶 ​進行驗證。

從表單中選擇​ 僅選取存放庫，然後選取您建立的存放庫。

選取​ 安裝，將AEM程式碼同步應用程式新增至您的存放庫。

您應該會看到應用程式已成功安裝的訊息。

開啟網站建立者工具

設定存放庫：

• 選取​ Use Existing Repository。
• 輸入店面樣板專案的​ Organization/Username。
• 輸入​ Repository Name。

選取​ 建立網站，即可匯入、預覽及發佈內容至檔案製作環境。

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

建立網站之後，您可以使用Edit content和View Site區段中的連結來探索示範店面。

內容與網站的主要連結會遵循下列格式：

• 根內容資料夾— https://da.live/#/{ORG}/{SITE}
• 網站預覽— https://main--{SITE}--{ORG}.aem.page/
• 網站生產：— https:/main--{SITE}--{ORG}.ae.live/

開啟根內容資料夾連結以檢視內容。

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

瀏覽至https://main--{SITE}--{ORG}.aem.live以檢視您的網站。

將{ORG}和{SITE}取代為您樣版存放庫的組織和名稱。

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

如果頁面傳回404，請確認下列事項：

• fstab.yaml檔案中的掛接點指向正確的內容URL： https://content.da.live/{ORG}/{SITE}/
• 您已設定Code Sync應用程式連線至您的GitHub存放庫。
• 您已使用示範內容複製工具將內容發佈至檔案製作環境。

檢視來自Commerce Optimizer預設執行個體的範例目錄資料。

1. 在店面標題中，按一下放大鏡以搜尋tires。

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

2. 按下​ Enter ​以檢視搜尋結果頁面。

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

   搜尋結果頁面元件是由search內容檔案定義。 搜尋結果資料是根據config.json中的店面組態填入。

3. 選取頁面上的任何輪胎產品，以檢視產品詳細資訊頁面。

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

   產品詳細資料頁面元件是由default資料夾中的product內容檔案定義。

在IDE中，簽出您的主要分支，並將其重設為遠端分支上的最後一個認可。

git checkout main
git reset --hard origin/main

安裝必要的相依性。

npm install

啟動本機開發伺服器。

npm start

您的樣板店面的第一頁應該會在http://localhost:3000的瀏覽器中顯示。

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

在您的IDE中，更新店面設定以連線至Adobe已為您布建的Adobe Commerce Optimizer執行個體。

1. 開啟config.json檔案。

2. 使用您Adobe Commerce Optimizer執行個體的端點更新下列值：

   • commerce-endpoint — 以您的端點URL取代現有值。

     code language-json
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

   • ac-environment-id — 以您端點URL中的租使用者ID取代現有值。

     code language-json
     "ac-environment-id": "{tenantId}"

3. 儲存檔案。

   如果您的本機預覽正常運作，則更新會套用至您的本機店面。

檢查網站以檢視組態變更的結果。

1. 在瀏覽器中，瀏覽至http://localhost:3000並重新整理頁面。

2. 在店面標題中，按一下放大鏡以搜尋tires。

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

3. 按​ Enter ​顯示[搜尋結果]頁面。

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

   搜尋不會傳回任何結果，因為您的店面組態檔案中的標頭值是以預設例項為基礎。 現在設定已指向為您布建的Adobe Commerce Optimizer執行個體，這些值無效。