1.5.3將ACCS連線至AEM Assets CS

完成先前的練習後，您可能會看到ACCS將產品傳回至您的網站，但產品尚未顯示影像。 在本練習結束時，您應該也會看到傳回的影像。

1.5.3.1更新管道設定

移至https://my.cloudmanager.adobe.com。 您應該選取的組織是--aepImsOrgName--。

按一下以開啟您的Cloud Manager程式，程式應該稱為--aepUserLdap-- - CitiSignal AEM+ACCS。

向下捲動一點，然後在​ 管道 ​索引標籤上按一下​ 存取存放庫資訊。

您應該會看到此訊息。 按一下​ 產生密碼。

再按一下​ 產生密碼。

之後，您應該會有可用的密碼。 接著，按一下​ Git命令列 ​欄位旁的​ 複製 ​圖示。

在電腦上選擇的位置建立新目錄，並將其命名為​ AEM管道GitHub。

在資料夾上按一下滑鼠右鍵，然後選取​ 資料夾 ​的新終端機。

您應該會看到此訊息。

在「終端機」視窗中貼上您之前複製的​ Git命令列 ​命令。

您必須輸入使用者名稱。 從Cloud Manager的程式管道​ 存取存放庫資訊 ​複製使用者名稱，然後按下​ Enter。

接下來，您必須輸入密碼。 從Cloud Manager的程式管道​ Access存放庫資訊 ​複製密碼並按​ Enter。

這可能需要一分鐘。 完成後，您將擁有連結至計畫管道的Git存放庫的本機副本。

您會在​ AEM管道GitHub ​目錄中看到新目錄。 開啟該目錄。

選取該目錄中的所有檔案，並刪除所有檔案。

確定目錄是空的。

移至https://github.com/ankumalh/assets-commerce。 按一下​ <>代碼，然後選取​ 下載ZIP。 下載檔案，然後將其拖放到您的案頭上。

接著，將檔案​ assets-commerce-main.zip ​複製到您的案頭並解壓縮。 開啟資料夾​ assets-commerce-main。

將所有檔案從目錄​ assets-commerce-main ​複製到您程式的Pipeline Repository目錄的空白目錄。

接下來，開啟​ Microsoft Visual Studio Code，並在​ Microsoft Visual Studio Code ​中開啟包含您程式之管道存放庫的資料夾。

前往左側功能表中的​ 搜尋 ​並搜尋<my-app>。 您需要以<my-app>取代所有出現的--aepUserLdap--citisignalaemaccs。

按一下​ 全部取代 ​圖示。

按一下​ 取代。

新檔案現在已準備好上傳回Git存放庫，該存放庫已連結至您的計畫的管道存放庫。 若要這麼做，請開啟資料夾​ AEM Pipeline GitHub，然後以滑鼠右鍵按一下包含新檔案的資料夾。 選取​ 資料夾 ​的新終端機。

您應該會看到此訊息。 貼上命令git add .並按​ Enter。

您應該會看到此訊息。 貼上命令git commit -m "add assets integration"並按​ Enter。

您應該會看到此訊息。 貼上命令git push origin main並按​ Enter。

您應該會看到此訊息。 您的變更現在已部署到您計畫的管道Git存放庫。

返回Cloud Manager並按一下​ 關閉。

在變更管道的Git存放庫後，您需要再次執行​ 部署至開發 ​管道。 按一下3個點​ …，然後選取​ 執行。

按一下​ 執行。 執行管道部署可能需要10到15分鐘。 繼續之前，您需要等到管道部署成功完成。

1.5.3.2啟用ACCS中的AEM Assets整合

返回ACCS執行個體。 在左側功能表中，移至​ 存放區，然後選取​ 組態。

在功能表中向下捲動至​ ADOBE SERVICES，然後開啟​ AEM Assets整合。 您應該會看到此訊息。

填寫下列變數：

按一下​ 儲存設定。

您應該會看到此訊息。

1.5.3.3更新config.json

前往設定AEM Sites CS/EDS環境時建立的GitHub存放庫。 該存放庫是在練習1.1.2中建立的，用來設定您的AEM CS環境，名稱應該是​ citisignal-aem-accs。

在根目錄中，向下捲動並按一下以開啟檔案​ config.json。 按一下​ 編輯 ​圖示以變更檔案。

在第5 "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/XXX/graphql",行下方新增下列程式碼片段：

 "commerce-assets-enabled": "true",

按一下​ 認可變更……。

按一下​ 認可變更。

您的變更現在已儲存，很快就會發佈。 可能需要幾分鐘時間，變更才會顯示在店面上。

1.5.3.4驗證AEM Assets CS中的Commerce欄位

登入您的AEM CS Author環境並移至​ Assets。

移至​ 檔案。

開啟​ CitiSignal ​資料夾。

將游標暫留在任何資產上，然後按一下​ 資訊 ​圖示。

您現在應該會看到包含2個新中繼資料屬性的​ Commerce ​標籤。

您的AEM Assets CS環境現在支援Commerce整合。 您現在可以開始上傳產品影像。

1.5.3.4上傳產品Assets並連結至產品

在此下載產品影像。 下載後，將檔案匯出至您的案頭。

按一下​ 建立，然後選取​ 資料夾。

輸入欄位​ Title ​和​ Name ​的值​ Product_Images。 按一下​ 建立。

按一下以開啟您剛建立的資料夾。

按一下​ 建立，然後選取​ 檔案。

瀏覽至案頭上的​ Product_Images ​資料夾，選取所有檔案，然後按一下[開啟]。​

按一下​ 上傳。

您的影像將可在您的資料夾中使用。 將滑鼠停留在產品​ iPhone-Air-Light-Gold.png ​上，然後按一下​ 屬性 ​圖示。

向下捲動並將欄位​ 檢閱狀態 ​設定為​ 已核准。 AEM Assets CS - ACCS整合僅適用於已核准的影像。

向上捲動，移至​ Commerce ​標籤，然後按一下​ 產品SKU ​下的​ 新增。

為此產品新增下列SKU：

然後您應該擁有此專案。 按一下​ 儲存並關閉。

將滑鼠停留在產品​ iPhone-Air-Space-Black.png ​上，然後按一下​ 屬性 ​圖示。

向下捲動並將欄位​ 檢閱狀態 ​設定為​ 已核准。 AEM Assets CS - ACCS整合僅適用於已核准的影像。

向上捲動，移至​ Commerce ​標籤，然後按一下​ 產品SKU ​下的​ 新增。

為此產品新增下列SKU：

然後您應該擁有此專案。 按一下​ 儲存並關閉。

將滑鼠停留在產品​ iPhone-Air-Sky-Blue.png ​上，然後按一下​ 屬性 ​圖示。

向下捲動並將欄位​ 檢閱狀態 ​設定為​ 已核准。 AEM Assets CS - ACCS整合僅適用於已核准的影像。

向上捲動，移至​ Commerce ​標籤，然後按一下​ 產品SKU ​下的​ 新增。

為此產品新增下列SKU：

然後您應該擁有此專案。 按一下​ 儲存並關閉。

將滑鼠停留在產品​ iPhone-Air-Cloud-White.png ​上，然後按一下​ 屬性 ​圖示。

向下捲動並將欄位​ 檢閱狀態 ​設定為​ 已核准。 AEM Assets CS - ACCS整合僅適用於已核准的影像。

向上捲動，移至​ Commerce ​標籤，然後按一下​ 產品SKU ​下的​ 新增。

為此產品新增下列SKU：

然後您應該擁有此專案。 按一下​ 儲存並關閉。

現在，每個​ iPhone Air ​影像都應該有​ 豎起的綠色縮圖，表示資產已核准。

1.5.3.5驗證AEM Sites CS/EDS店面上的產品影像

若要驗證整合是否有效，您需要開啟CitiSignal網站。

若要存取您的網站，請在將XXX取代為GitHub使用者帳戶（在此範例中為main--citisignal-aem-accs--XXX.aem.page）之後，前往main--citisignal-aem-accs--XXX.aem.live和/或woutervangeluwe。

所以在此範例中，完整URL會變成：
https://main--citisignal-aem-accs--woutervangeluwe.aem.page和/或https://main--citisignal-aem-accs--woutervangeluwe.aem.live。

您應該會看到此訊息。 移至​ 電話。

接著您應該會看到顯示​ iPhone Air ​的產品影像。 按一下​ iPhone Air。

您應該會看到此訊息。 變更色彩和儲存選項，您會看到影像會根據您所做的選擇動態變更。

以下是將色彩變更為​ Light-Gold ​以及將儲存大小變更為​ 256GB ​的範例。

下一步： 摘要與優點

返回Adobe Commerce as a Cloud Service

返回所有模組