1.4.2在您的網站上實作Brand Concierge

1.4.2.1設定您的網站以顯示Brand Concierge - AEM Author

為了讓Brand Concierge出現在您的網站上，您需要建立需要新增至新頁面的新自訂區塊，而且您將需要確保新頁面已新增至網站的導覽中。

您現在需要依此順序設定下列專案：

建立新的自訂區塊

若要建立新的自訂區塊，請導覽至連結至您網站的GitHub存放庫。

component-definition.json

向下捲動，直到您看到檔案​ component-definition.json ​並開啟為止

按一下​ pencl ​圖示以開始編輯檔案。

向下捲動，直到您看到​ 區塊 ​為止。 將游標設定在元件​ 卡片 ​的右方括弧下

貼上此程式碼，並在程式碼區塊後面輸入逗號​，：

{
  "title": "BrandConcierge",
  "id": "brandconcierge",
  "plugins": {
    "xwalk": {
      "page": {
        "resourceType": "core/franklin/components/block/v1/block",
        "template": {
          "name": "BrandConcierge",
          "model": "brandconcierge"
        }
      }
    }
  }
},

按一下​認可變更……。

按一下​認可變更。

component-models.json

向下捲動直到您看到檔案​ component-models.json ​為止，然後按一下​ 鉛筆 ​圖示以開始編輯檔案。

向下捲動，直到您看到最後一個專案為止。 將游標設定在最後一個元件的右方括弧旁。

輸入逗號​，，然後推入，並在下一行貼上此代碼：

{
  "id": "brandconcierge",
  "fields": []
}

按一下​認可變更……。

按一下​認可變更。

component-filters.json

向下捲動，直到您看到檔案​ component-filters.json ​為止，然後按一下​ 鉛筆 ​圖示以開始編輯檔案。

您應該會看到此訊息。

在​ 區段 ​下方，輸入逗號,，並將元件"brandconcierge"的識別碼貼到目前最後一行之後。

按一下​認可變更……。

按一下​認可變更。

brandconcierge.css

建立區塊時，最佳實務是建立區塊樣式的檔案，且檔案名稱應與區塊相同。 您現在應該建立該檔案，我們現在將保留空白。

移至​ 區塊 ​資料夾。 然後，按一下[新增檔案]​ ​ ​並選取[建立新檔案]​​。

在文字方塊中，輸入brandconcierge/brandconcierge.css。 檔案目前可以保持空白。 按一下​認可變更……。

按一下​認可變更。

brandconcierge.js

建立區塊時，最佳實務是為與區塊相關的JavaScript建立檔案，且檔案名稱應與區塊相同。

按一下​ 新增檔案 ​並選取​建立新檔案。

在文字方塊中，輸入brandconcierge.js。 檔案目前可以保持空白。 按一下​認可變更……。

export default function decorate(block) {
  block.setAttribute('id', 'brand-concierge-mount');
}

按一下​認可變更。

建立新頁面並連結新的自訂區塊

移至https://my.cloudmanager.adobe.com。 按一下您的​ 程式 ​以開啟。

接著，按一下​ 環境 ​標籤上的3個點​…，然後按一下​檢視詳細資料。

然後您會看到環境詳細資料。 按一下​ 作者 ​環境的URL。

之後，您應該會看到您的AEM作者環境。 移至​網站。

移至​花旗訊號。 按一下​ 建立 ​並選取​頁面。

選取​ 頁面 ​並按一下​下一步。

輸入下列值：

按一下​建立。

選取​開啟。

您應該會看到此訊息。

按一下空白區域以選取​ section ​元件。 然後，按一下右側功能表中的加號​ + ​圖示。

之後，您應該會在可用區塊清單中看到自訂區塊。 按一下以選取它。

之後，您應該會看到有空白區塊新增至此頁面。 此區塊將使用您將在下一個步驟中新增的JavaScript程式庫動態載入。

按一下​發佈。

再按一下​發佈。

您的新頁面現已發佈，並可在下一步中新增至導覽標頭。

更新導覽標頭檔案

在您的AEM Sites總覽中，移至​ CitiSignal ​並勾選檔案​ Header/nav ​的核取方塊。 按一下​編輯。

在預覽畫面中選取​ 文字 ​欄位，然後按一下畫面右側的​ 文字 ​欄位以進行編輯。

在導覽功能表中建立新的功能表選項，文字為Brand Concierge。 然後，選取文字​ Brand Concierge ​並按一下​ 連結 ​圖示。

請為欄位​路徑或URL /content/CitiSignal/brandconcierge.html輸入此專案，並為欄位Brand Concierge標題​輸入。 按一下​儲存。

然後您應該擁有此專案。 按一下「完成」。

然後您應該擁有此專案。 按一下​發佈。

再按一下​發佈。

您的新頁面現在已新增至功能表。

1.4.2.2設定您的網站以顯示Brand Concierge - GitHub

使用您的AEM製作環境更新內容後，您現在需要更新網站所用的GitHub存放庫中的部分程式碼。

Javascript程式庫

若要在AEM CS/EDS上執行的網站上實作Brand Concierge，需要下列程式庫：

將全部3個檔案下載到您的案頭。

前往AEM CS/EDS網站的GitHub專案。 移至​指令碼。

按一下​新增檔案，然後選取​上傳檔案。

按一下​選擇您的檔案。

從您的案頭選取全部3個檔案​styleConfigurations.js、alloy.js和brandconciergemain.js，然後按一下​開啟。

按一下​認可變更。

更新head.html

在上一步中，您已上傳3個新程式庫。 現在載入您的網站時，需要載入這些程式庫，方法是在檔案​ head.html ​中新增對這些檔案的參照。

此外，您也需要在​ head.html ​檔案中提供指示，以確保程式庫以正確的順序和正確的方式載入。

若要這麼做，請按一下​代碼，前往AEM CS/EDS網站的GitHub專案。

向下捲動一點。 開啟檔案​head.html。

按一下​ 鉛筆 ​圖示以編輯此檔案。

您應該會看到此訊息。

向下捲動至第43行並貼上下列內容：

下列程式碼中有2個欄位需要更新：

<script src="/scripts/styleconfigurations.js"></script>

<script>
        !function (n, o) {
      o.forEach(function (o) {
        n[o] || ((n.__alloyNS = n.__alloyNS ||
          []).push(o), n[o] = function () {
            var u = arguments; return new Promise(
              function (i, l) { n[o].q.push([i, l, u]) })
          }, n[o].q = [])
      })
    }
      (window, ["alloy"]);
    </script>


<script src="/scripts/alloy.js"></script>

<script>
    alloy("configure", {
        defaultConsent: "in",
        edgeDomain: "edge.adobedc.net",
        edgeBasePath: "ee",
        datastreamId: "XXXXX", // replace datastreamId
        orgId: "--aepImsOrgId--", // replace ims org Id
        debugEnabled: true,
        idMigrationEnabled: false,
        thirdPartyCookiesEnabled: false,
        prehidingStyle: ".personalization-container { opacity: 0 !important }",
    });

window["alloy"]("sendEvent", {
    conversation: {
        fetchConversationalExperience: true
    }
}).then(result => {
    console.log("Conversation experience fetched", result);
    window["alloy"]("bootstrapConversationalExperience", {
        selector: "#brand-concierge-mount",
        src: "/scripts/brandconciergemain.js",
        stylingConfigurations: window.styleConfiguration,
        stickySession: true // create a sticky session cookie with expiration
    })
});
</script>

按一下​認可變更……。

按一下​認可變更。

您現在已更新在網站上載入程式庫所需的程式碼。

1.4.2.3測試您的設定

您現在可以移至main--citisignal-aem-accs--XXX.aem.page或main--citisignal-aem-accs--XXX.aem.live，在將XXX取代為GitHub使用者帳戶（在此範例中為woutervangeluwe）之後，在您的網站上測試您的變更。

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

可能需要一些時間，才能正確顯示所有資產，因為它們必須先發佈。

您應該會看到此訊息。 按一下​Brand Concierge。

之後，您應該會看到此Brand Concierge，您可以在其中輸入提示。

返回Brand Concierge

返回所有模組