文档CommerceAdobe Commerce Optimizer 指南

[仅限SaaS]{class="badge positive" title="仅适用于Adobe Commerce as a Cloud Service和Adobe Commerce Optimizer项目(Adobe管理的SaaS基础架构)。"}

设置您的店面

Last update: Tue Aug 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 开发人员

本教程提供了有关如何设置和使用由Edge Delivery Services提供支持的Adobe Commerce店面来创建由Adobe Commerce Optimizer实例中的数据提供支持的高性能、可扩展且安全的Commerce店面的详细说明。

TIP
使用站点创建者工具设置店面代码存储库和文档创作环境，快速跟踪店面设置过程
​>自动。 然后，您可以使用这些说明了解店面的创建方式，并详细了解可供您使用的组件。

先决条件

  • 确保您拥有可以创建存储库并配置为本地开发的GitHub帐户(github.com)。

  • 通过查看Commerce Storefront文档中的概述，了解在Adobe Commerce Edge Delivery Services上开发Adobe Edge Storefront的概念和工作流。

  • 设置开发环境

设置开发环境

安装在Edge Delivery Services上开发和测试Adobe Commerce Optimizer店面所需的Node.js和Sidekick浏览器扩展。

安装节点.js

安装节点版本管理器(NVM)和所需的Node.js版本(22.13.1 LTS)。

  1. 安装节点版本管理器(NVM)。

    code language-bash 
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

  2. 安装Node.js和NPM。 有关详细信息，请参阅Node.js。

    code language-bash 
    nvm install 22
    code language-bash 
    npm install -g npm

  3. 验证安装。

    code language-bash 
    npm -v
TIP
可通过适用于Adobe CommerceAdobe Commerce Optimizer的App Builder和适用于Adobe Developer App Builder的API Mesh获得用于扩展和自定义解决方案的其他资源。 有关访问和使用信息，请联系您的Adobe客户代表。

安装Sidekick

安装Sidekick浏览器扩展以编辑、预览内容并将其发布到店面。 请参阅Sidekick安装说明。

创建您的店面

您为Adobe Commerce Optimizer项目创建的店面使用Edge Delivery Services店面模板上的Adobe Commerce的自定义版本。 样板是一组文件和文件夹，它们提供了店面开发的起点。 此设置过程不同于Edge Delivery Services店面上Adobe Commerce的标准设置过程。

NOTE
本教程使用macOS、Chrome和Visual Studio Code作为开发环境。 屏幕会捕捉该设置并提供相应说明。 您可以使用不同的操作系统、浏览器和代码编辑器，但您看到的UI和执行的步骤会相应地有所不同。

工作流概述

按照以下步骤设置要与Adobe Commerce Optimizer一起使用的店面。

  1. 创建代码存储库 — 从Adobe Commerce + Edge Delivery Services样板模板创建GitHub存储库。 包括来自源存储库的所有分支。
  2. 更新店面模板 — 更新自定义模板以将内容文件夹连接到店面。
  3. 部署更改 — 提交并将样板自定义推送到GitHub以应用更改。
  4. 添加CodeSync应用程序 — 将您的存储库连接到Edge Delivery服务。 在完成源代码自定义并将代码推送到GitHub存储库之前，请勿连接代码同步应用程序。
  5. 添加内容 — 使用演示内容克隆工具在https://da.live上托管的文档创作环境中创建和初始化店面内容。
  6. 预览演示站点 — 连接到您的店面站点以查看Adobe Commerce Optimizer演示实例的示例内容和数据。
  7. 在本地环境中开发 — 安装所需的依赖项。 启动本地开发服务器，并更新店面配置以连接到Adobe为您配置的Adobe Commerce Optimizer实例。
  8. 后续步骤 — 了解有关管理和显示店面中内容和数据的更多信息。

步骤1：创建站点代码存储库

使用Edge Delivery Services + Adobe Commerce样板模板为您的店面创建站点样板代码的GitHub存储库。

  1. 登录到您的GitHub帐户。

  2. 导航到aem-boilerplate-commerce GitHub存储库。

  3. 选择​ 使用此模板，然后从下拉菜单中选择​ 创建新存储库。

    Create github repo from storefront boilerplate template {width="700" modal="regular"}

    此时将显示存储库配置页面。

    Configure github repo to pull all branches from boilerplate repo {width="700" modal="regular"}

  4. 完成配置表单，并提供以下详细信息：

    • 存储库模板—hlxsites/aem-boilerplate-commerce（默认）。
    • 所有者 — 您的组织或帐户（必需）。
    • 存储库名称 — 新存储库的唯一名称（必需）。
    • 描述 — 存储库的简短描述（可选）。
    • Public或Private—Adobe建议使用public（默认）。

  5. 选择​ 创建存储库。

    几分钟后，将打开您的新存储库。

    忽略GitHub用户界面中显示的任何拉取请求通知。

步骤2：更新店面模板

您需要以下信息更新店面样板代码：

  • 步骤2 中的 GitHub存储库URL— github.com/{ORG}/{SITE}

    • {ORG}是存储库的组织名称或用户名

    • {SITE}是您的存储库名称

  • 步骤1 中的 ​内容文件夹URL— https://drive.google.com/drive/folders/{YOUR_FOLDER_ID}

    {YOUR_FOLDER_ID}是使用示例内容数据创建的文件夹的ID。

将存储库链接到文档创作环境

  1. 将存储库克隆到本地计算机。

    code language-bash 
    git clone https://github.com/{ORG}/{SITE}.git

    如果在克隆存储库时遇到错误，请参阅GitHub文档中的克隆错误疑难解答。

  2. 在终端或IDE中打开存储库。

  3. 通过将default-fstab.yaml文件复制到fstab.yaml创建配置文件。

    code language-bash 
    cp default-fstab.yaml fstab.yaml

  4. 更新店面配置文件中的挂载点以指向您的内容URL。

    1. 打开fstab.yaml配置文件。

      code language-yaml 
      mountpoints:
  /:
    url: https://content.da.live/{org}/{site}/
    type: markup

folders:
 /products/: /products/default

    2. 将{ORG}和{SITE}字符串替换为您为样板代码创建的GitHub存储库的值。

      例如，更新的代码应如下所示。

      code language-yaml 
      mountpoints:
  /:
    url: https://content.da.live/owner-name/aco-storefront/
    type: markup

    3. 保存文件。

配置Sidekick扩展

  1. 为Sidekick扩展添加项目配置。 此配置确保Sidekick可用于管理店面项目的内容。
NOTE
确保已在浏览器中安装Sidekick扩展。

  1. 创建新目录tools/sidekick。

    code language-shell 
    mkdir tools/sidekick

  2. 将根目录中的demo-sidekick.json文件复制到tools/sidekick目录，并将其重命名为config.json。

    code language-shell 
    cp demo-sidekick.json tools/sidekick/config.json

  3. 自定义站点的Sidekick配置。

    从tools/sidekick/目录中，编辑config.json文件。

    accordion
    Sidekick配置文件
    code language-json 
    {
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

  4. 使用GitHub存储库的值更新url键值。

    • 将{{ORG}}字符串替换为存储库的组织或用户名。

    • 将{{SITE}}字符串替换为存储库名称。

    • pathname变量由系统填充。

    accordion
    更新配置文件的示例

    如果您的GitHub存储库名为aco-storefront，而您的组织为early-adopter，则更新的URL应如下所示：

    code language-json 
    {
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

  5. 保存文件。

步骤3：部署更改

若要使用自定义的店面样板代码，请用您的更新覆盖main分支上的代码。

  1. 在编辑器或IDE中，提交并保存已更新的文件。

    code language-bash 
    git add .

  2. 确认您正在提交两个更新的文件。

    code language-bash 
    git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

  3. 提交更改。

    code language-bash 
    git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

  4. 应用更改。

    code language-bash 
    git push

步骤5：添加AEM代码同步应用程序

通过将Edge Delivery代码同步GitHub应用程序添加到存储库，将您的存储库连接到AEM服务。

IMPORTANT
在将更新的样板代码上传到GitHub存储库的主分支之前，请勿连接代码同步应用程序。

  1. 打开AEM代码同步应用配置页面。

  2. 选择​ 配置，然后使用包含您创建的存储库的​ 组织 ​或​ 帐户 ​进行身份验证。

  3. 从表单中选择​ 仅选择存储库，然后选择您创建的存储库。

  4. 选择​ 安装 ​以将AEM代码同步应用程序添加到您的存储库。

    您应该会看到一条消息，指出已成功安装应用程序。

步骤6：添加内容

使用站点创建器工具在https://da.live上托管的文档创作环境中创建和初始化店面内容。 此工具将示例内容导入文档作者环境，并完成示例内容中所有文档的内容预览和发布过程。 示例内容包括页面布局、横幅、标签和其他元素以填充您的店面。

  1. 打开站点创建者工具

  2. 配置存储库：

    • 选择​ Use Existing Repository。
    • 输入店面样板项目的​ Organization/Username。
    • 输入​ Repository Name。

  3. 通过选择​ 创建站点，导入、预览内容并将其发布到文档作者环境。

    AEM demo content clone tool {width="700" modal="regular"}

    创建站点后，您可以使用Edit content和View Site部分中的链接来浏览演示店面。

    指向您的内容和网站的主要链接遵循以下格式：

    • 根内容文件夹— https://da.live/#/{ORG}/{SITE}
    • 站点预览— https://main--{SITE}--{ORG}.aem.page/
    • 站点生产：— https:/main--{SITE}--{ORG}.ae.live/

  4. 打开根内容文件夹链接以查看内容。

    Storefront Document Author environment {width="700" modal="regular"}

    note tip
    TIP
    在侧面导航中，使用​ 学习 ​和​ 发现 ​链接访问用于管理网站和网站内容的学习资源。

步骤7：预览演示站点

验证是否正确显示了示例内容和Adobe Commerce Optimizer演示实例中的数据。

  • 示例内容 ​是从文档创作环境的内容文件夹中提供的。 它包括您网站的页面布局、横幅和标签。
  • 从​ 演示实例中提供了 ​示例数据Adobe Commerce Optimizer。 数据包括产品数据，其中产品属性、图像、产品说明和价格基于店面配置文件config.json中指定的标题值填充。

连接到您的站点以查看示例内容和数据

  1. 导航到https://main--{SITE}--{ORG}.aem.live查看您的网站。

    将{ORG}和{SITE}替换为样板存储库的组织和名称。

    ACO storefront site with boilerplate {width="700" modal="regular"}

    如果页面返回404，请验证以下内容：

  2. 查看来自Commerce Optimizer默认实例的示例目录数据。

    1. 在店面标题中，单击放大镜以搜索tires。

      View product list page {width="675" modal="regular"}

    2. 按​ Enter ​查看搜索结果页。

      View search results page {width="675" modal="regular"}

      搜索结果页面组件由search内容文档定义。 搜索结果数据基于config.json中的店面配置填充。

    3. 通过选择页面上的任何轮胎产品来查看产品详细信息页面。

      View product details page {width="675" modal="regular"}

      产品详细信息页面组件由default文件夹中的product内容文档定义。

步骤8：在本地环境中开发

在本节中，您将从本地开发环境更新店面配置。

  • 更新storefront配置以连接到Adobe为您配置的Adobe Commerce Optimizer实例的GraphQL端点。
  • 更新标头值以从实例中检索数据。

启动本地开发

  1. 在IDE中，签出主分支，并将其重置为远程分支上的最后一次提交。

    code language-bash 
    git checkout main
git reset --hard origin/main

  2. 安装所需的依赖项。

    code language-bash 
    npm install

  3. 启动本地开发服务器。

    code language-bash 
    npm start

    您的样板店面的第一页应在http://localhost:3000处显示在您的浏览器中。

    Configure github repo to pull all branches from boilerplate repo {width="700" modal="regular"}

更新店面配置

更新店面配置文件并在本地开发环境中预览更改。

  1. 在您的IDE中，更新店面配置以连接到Adobe为您配置的Adobe Commerce Optimizer实例。

    1. 打开config.json文件。

    2. 使用Adobe Commerce Optimizer实例的端点更新以下值：

      • commerce-endpoint — 将现有值替换为终结点URL。

        code language-json 
        "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

      • ac-environment-id — 将现有值替换为终结点URL中的租户ID。

        code language-json 
        "ac-environment-id": "{tenantId}"

    3. 保存文件。

      如果本地预览工作正常，则更新将应用于本地店面。

  2. 检查站点以查看配置更改的结果。

    1. 在浏览器中，导航到http://localhost:3000并刷新页面。

    2. 在店面标题中，单击放大镜以搜索tires。

      搜索轮胎 {width="675" modal="regular"}

    3. 按​ Enter ​显示“搜索结果”页。

      标头值无效的搜索结果为空 {width="675" modal="regular"}

      由于店面配置文件中的标头值基于默认实例，因此搜索不会返回任何结果。 现在，配置指向为您配置的Adobe Commerce Optimizer实例，这些值无效。

后续步骤

请参阅店面和目录管理员端到端用例，了解有关管理和显示店面中内容和数据的更多信息。

Related Articles
请参阅Adobe Commerce Storefront文档，了解有关更新网站内容以及与Commerce前端组件和后端数据集成的更多信息。
recommendation-more-help
e37aa9ac-438f-4a0d-bc16-4a10ee6cfc97