设置您的店面

创建店面项目 — 使用站点创建者工具创建一个新的店面项目，该项目包含样板代码、示例内容和配置文件。

自定义店面配置 — 更新存储库中的config.json文件以连接到Adobe Commerce Optimizer实例。

验证您的设置 （10分钟）

• 预览您的店面网站
• 测试产品详细信息页面和搜索功能

打开站点创建者工具

{width="700" modal="regular"}

选择​ 创建新站点（代码和内容）。

完成站点配置：

• GitHub组织/用户名：输入您的GitHub用户名或组织名称
• 网站名称：为您的店面选择一个描述性名称
• Commerce GraphQL端点（可选）：输入Adobe Commerce Optimizer实例的GraphQL端点

单击​ 创建站点 ​以使用店面样板代码创建GitHub存储库。

创建存储库后，站点创建者会更新并提示您安装代码同步应用程序。

单击​ Install AEM Code Sync App ​以在新选项卡中打开代码同步安装程序。

配置代码同步应用程序：

• 选择您的GitHub组织，然后单击​ Configure。
• 在代码同步界面中，单击​ Only select repositories。
• 单击​ Select repositories ​菜单，然后选择您创建的店面代码存储库。
• 单击​ Save ​注册存储库。

返回打开站点创建器的浏览器窗口，然后单击​ 创建站点。

站点创建者将店面样板内容复制到文档创作环境。 此过程需要1-2分钟。

在网站详细信息部分，查看店面项目的链接：

{width="700" modal="regular"}

使用这些链接管理您的店面代码、内容和配置。

复制并保存这些链接以供将来引用：单击**Copy。

使用您之前保存的链接打开配置管理器：

https://da.live/sheet#/<username or org>/<repo name>/config.json

在配置中找到cs （目录服务）部分。

将占位符值替换为实例的值。 请参阅先决条件。

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

保存配置文件。

导航到实时预览URL：

https://main--{SITE}--{ORG}.aem.live

将{ORG}和{SITE}替换为您的GitHub组织和站点名称。

成功标准：您应该会看到包含样板内容的店面主页。

{width="700" modal="regular"}

导航到示例产品页面：
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

使用示例数据中的任意SKU，例如：
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

对于默认店面，您可以使用工艺路线中的placeholder值查看产品。 开始自定义店面时，您可以自定义店面代码，以根据目录中定义的产品路线设置产品详细信息页面的路径。

成功标准：页面应显示：

• 产品名称、说明和定价
• 产品图像
• 添加到购物车功能
• 从Adobe Commerce Optimizer实例检索的数据

{width="700" modal="regular"}

在店面主页上，单击标题中的放大镜图标。

键入搜索字符串tires并按​ Enter。

成功标准：您应会看到：

• 包含轮胎产品的搜索结果页面
• 侧栏中的筛选选项
• 包含图像和定价的产品列表

{width="675" modal="regular"}

单击任何轮胎产品以查看其详细信息页面。

{width="675" modal="regular"}

安装Sidekick — 用于直接从您的网站编辑、预览和发布内容的浏览器扩展

设置本地开发环境 — 创建本地环境以自定义店面代码和内容