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"的ID粘贴到当前最后一行之后。

单击​提交更改……。

单击​提交更改。

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创作环境。 转到​站点。

转到​花旗信号。 单击​ 创建 ​并选择​页面。

选择​ 页面 ​并单击​下一步。

输入以下值：

单击​创建。

选择​打开。

您应该会看到此内容。

单击空白区域以选择​ 节 ​组件。 然后，单击右菜单中的加号​ + ​图标。

随后，您应该会在可用块列表中看到自定义块。 单击以将其选中。

然后，您应该会看到一个空块被添加到此页面。 此块将使用您将在下一步中添加的JavaScript库动态加载。

单击​发布。

再次单击​发布。

您的新页面现已发布，并且现在可以添加到下一步的导航标题中。

更新导航标头文件

在您的AEM Sites概述中，转到​ CitiSignal ​并选中文件​ Header/nav ​的复选框。 单击​编辑。

在预览屏幕中选择​ 文本 ​字段，然后单击屏幕右侧的​ 文本 ​字段对其进行编辑。

在导航菜单中新建一个包含文本Brand Concierge的菜单选项。 然后，选择文本​ Brand Concierge ​并单击​ 链接 ​图标。

为字段​Path或URL /content/CitiSignal/brandconcierge.html输入此项，为字段Brand ConciergeTitle 输入。 单击​保存。

然后您应该拥有此项。 单击​完成。

然后您应该拥有此项。 单击​发布。

再次单击​发布。

您的新页面现已添加到菜单中。

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测试您的配置

现在，在将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。

可能需要一些时间才能正确显示所有资源，因为它们需要先发布。

您应该会看到此内容。 单击​Brand Concierge。

然后，您应该会看到此Brand Concierge，您可以在其中输入提示。

返回Brand Concierge

返回所有模块