1.5.3将ACCS连接到AEM Assets CS

现场研讨会说明

在本练习中，您需要使用：

简介

完成上一个练习后，您可以看到ACCS将某个产品返回到您的网站，但该产品还没有图像。 在本练习结束时，您应该也会看到所返回的图像。

1.5.3.1更新管道配置

转到https://my.cloudmanager.adobe.com{target=“_blank”}。 您应选择的组织是--aepImsOrgName--。

单击以打开您的Cloud Manager项目，该项目的名称应类似于以下名称之一：

向下滚动一点，然后单击​ 管道 ​选项卡上的​访问存储库信息。

您应该会看到此内容。 单击​生成密码。

再次单击​生成密码。

然后，您应该拥有可用的密码。 接下来，单击​ URL ​字段旁边的​ 复制 ​图标。

打开​GitHub桌面。 转到​ 文件 ​并选择​克隆存储库……。

将之前复制的URL粘贴到​ 存储库URL ​字段中，然后单击​克隆。

首先复制​ 用户名 ​值，然后复制​ 密码 ​值。

在此处粘贴​ 用户名 ​和​密码。 单击​确定。

您应该会看到此内容。 单击​ 在Finder ​中显示。

然后，您应该会看到类似这样的文件夹。 打开它。

选择所有文件，然后删除它们。

然后，您应该有一个空文件夹。

转到https://github.com/ankumalh/assets-commerce。 单击​<>代码，然后选择​下载ZIP。 下载文件，然后将其放到桌面上。

接下来，将文件​ assets-commerce-main.zip ​复制到桌面上并解压缩。 打开文件夹​assets-commerce-main。

将所有文件从​ assets-commerce-main ​目录复制到GitHub Desktop存储库目录的空目录中。

您应该会看到此内容。

接下来，打开​Microsoft Visual Studio Code，然后单击​打开……。

在​ Microsoft Visual Studio Code ​中打开包含程序管道存储库的文件夹。

转到左侧菜单中的​ 搜索 ​并搜索<my-app>。 您需要使用techinsiderscitisignalaemaccs替换<my-app>的所有实例。

单击​ 全部替换 ​图标。

单击​替换。

新文件现在可以上传回Git存储库，该存储库链接到项目的管道存储库。 为此，请返回​GitHub Desktop。 您应该会看到类似情况，其中更改的文件正在等待提交。

输入add assets integration，然后单击​将13个文件提交到main。

您应该会看到此内容。 单击​推送来源。

您应该会看到此内容。 您所做的更改现已部署到项目的管道Git存储库。

返回Cloud Manager并单击​关闭。

在更改管道的Git存储库后，您需要再次运行​ 部署到开发 ​管道。 单击3个点​ … ​并选择​运行。

单击​运行。 运行管道部署可能需要10-15分钟。 继续之前，您需要等待管道部署成功完成。

1.5.3.2在ACCS中启用AEM Assets集成

返回到ACCS实例。 在左侧菜单中，转到​商店，然后选择​配置。

在菜单中向下滚动到​ADOBE SERVICES，然后打开​AEM Assets集成。 您应该会看到此内容。

从​ AEM环境 ​的下拉列表中，选择您的环境。

然后，将​ 可视化所有者 ​设置为AEM Assets（如果需要，禁用​ 使用系统值 ​复选框）。

然后，将​ 启用同步 ​设置为Yes（如果需要，请禁用​ 使用系统值 ​复选框）。

确保按如下方式设置这些设置：

单击​保存配置。

您应该会看到此内容。

1.5.3.3更新config.json

转到在设置AEM Sites CS/EDS环境时创建的GitHub存储库。

在根目录中，向下滚动并单击以打开文件​config.json。

您应会在​ config.json ​文件（此图像中的第17行）中看到以下行，请确保将其设置为​true。

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

如果​ commerce-assets-enabled ​的值设置为​false，请更新文件并将值设置为​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 ​图像都应该有一个​绿色的竖拇指，以表明资产已获得批准。

现在，您应使用下表对其余产品重复这些步骤。 不要忘记批准每个图像，然后配置。 在​ Commerce ​选项卡中的SKU设置下。

随后，您的所有图像都将获得批准。

1.5.3.5验证AEM Sites CS/EDS店面上的产品图像

要验证集成是否正常工作，您需要打开CitiSignal网站。

您应该会看到此内容。 转到​电话。

然后，您应该会看到显示的​ iPhone Air ​的产品图像。 单击​iPhone Air。

您应该会看到此内容。 更改颜色和存储选项，您将看到图像根据您所做的选择动态变化。

以下是将颜色更改为​ Light-Gold ​和存储大小更改为​ 256GB ​的示例。

返回Adobe Commerce as a Cloud Service

返回所有模块