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的程序管道​ Access存储库信息 ​复制用户名，然后按​ 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 ​复制到程序管道存储库目录的空目录中。

接下来，打开​ 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创作环境，然后转到​ 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

返回所有模块