文档CommercePage Builder

Page Builder演练第3部分：目录内容

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

此练习演示了向页面添加产品列表、自定义产品页面以及创建自定义属性（将Page Builder工作区添加到产品属性集）是多么容易。

产品列表

本练习假设您已完成第1部分：简单页面和第2部分：块🔗，包括先决条件和下载的示例文件。 按照顺序执行本练习的三个部分。

第1部分：添加产品列表

Page Builder可以轻松地将产品列表添加到阶段。 在此示例中，产品列表直接添加到页面。

第1步：将产品列表添加到暂存环境

  1. 在​ 管理员 ​侧边栏上，转到​ Content > Elements>Pages。

  2. 查找您在第一个练习中创建并在第二个练习中修改的​ 简单页面，然后在​ Action ​列中选择​ Edit。

  3. 展开​ Content ​部分的 扩展选择器 ，然后单击​ Edit with Page Builder ​或内容预览区域内。

  4. 在​ Layout ​下的Page Builder面板中，将​ Row ​拖到舞台顶部。

  5. 在Page Builder面板中，展开​ Add Content ​并将​ Products ​占位符拖到新行中。

    将产品占位符拖到行 {width="600" modal="regular"}

第2步：编写条件

  1. 将鼠标悬停在空的产品容器上以显示工具箱，然后选择​ 设置 （ 设置图标 {width="20"} ）图标。

    产品工具箱 {width="600" modal="regular"}

  2. 对于​ Select Products By，请选择Condition。

  3. 添加条件：

    • 单击​ 添加 （ 添加图标 ）图标。

    • 在​ Product Attribute ​下，选择​ Category。

      选择条件的类别属性 {width="600" modal="regular"}

    • 通过单击“更多(…)”图标，然后单击“选择器”（ 选择器图标 ）图标，完成条件中的​ Category is… ​部分。

      定义条件 {width="600" modal="regular"}

    • 在类别树中，向下钻取到​ 女性> Tops ​类别，并选择​ Tees ​复选框。

      在树中选择类别 {width="600" modal="regular"}

    • 单击复选标记（ 复选标记图标 ）图标。

      相应的类别ID将显示在字段中，以完成条件。

第3步：完成设置

  1. 输入​ Number of Products to Display。

    默认情况下，该列表会显示五个产品。

  2. 根据需要完成其余设置。

    如果需要，请使用添加内容 — 产品页面末尾的字段描述以供参考。

  3. 完成后，单击​ Save ​保存设置并返回Page Builder工作区。

    阶段中的产品列表 {width="600" modal="regular"}

  4. 在舞台的右上角，单击​ 关闭全屏 （ 关闭全屏图标 {width="20"} ）图标。

    单击此图标会返回该页面的​ Content ​部分，并显示预览。

  5. 单击右上角的​ Save ​箭头并选择​ Save & Close。

第2部分：自定义产品页面

NOTE
管理员用户必须具有针对其角色范围的Content权限，才能看到Edit with Page Builder按钮并能够使用页面生成器。

在本练习的这一可选部分中，您将了解通过在产品页面的一组选项卡下方放置视频来自定义产品页面有多么简单。 更新类别页面内容的进程基本相同。

  1. 在​ 管理员 ​侧边栏上，转到​ Catalog > Products。

  2. 查找可用于此示例的简单产品，并在编辑模式下打开它。

  3. 向下滚动并展开​ Content ​部分的 扩展选择器 。

  4. 在​ Description ​旁边，单击​ Edit with Page Builder。

    产品说明内容 {width="600" modal="regular"}

    如果之前输入的产品描述没有Page Builder，则当前描述在HTML代码容器中显示为HTML。 使用Luma主题，产品描述将显示在“详细信息”选项卡上。

  5. 在​ Layout ​下的Page Builder面板中，将​ Row ​拖到舞台上，将其放在HTML代码容器下。

    当行处于正确位置时，查找要显示的红色指南。

    将行拖到舞台上 {width="600" modal="regular"}

  6. 在Page Builder面板中，展开​ Media ​并将​ Video ​占位符拖到新行中。

    行 🔗 {width="600" modal="regular"}中的视频占位符

  7. 将鼠标悬停在空的视频容器上以显示工具箱，然后选择​ 设置 （ 设置图标 {width="20"} ）图标。

    视频工具箱 {width="500" modal="regular"}

  8. 输入​ Video URL。

    视频可以托管在YouTube或Vimeo上。 此示例中的视频可以在YouTube上的以下URL找到：

    https://www.youtube.com/watch?v=ZpFrNyD4100

    编辑视频 {width="500" modal="regular"}

  9. 输入视频显示的​ Maximum Width ​像素。

    如果将此选项留空，则视频会填充可用空间。

  10. 单击​ Save ​保存设置并返回Page Builder工作区。

    内容阶段中的 视频 {width="600" modal="regular"}

  11. 在舞台的右上角，单击​ 关闭全屏 （ 关闭全屏图标 {width="20"} ）图标。

    单击此图标会返回该页面的​ Content ​部分，并显示预览。

  12. 单击右上角的​ Save ​箭头并选择​ Save & Close。

在店面中，视频显示在选项卡组的下方。 要查看页面在移动设备上的外观，可以调整窗口大小。

产品页面上显示了 视频 {width="600" modal="regular"}

恭喜！ ​您已完成“目录内容”教程的第二部分。 保留您创建的工作，以便您稍后可以参考它。

第3部分：添加自定义属性

使用Page Builder自定义属性将功能齐全的Page Builder工作区添加到产品页面，您可以使用该工作区创建吸引人的内容。 在练习的这一部分中，您将了解如何使用Page Builder输入类型创建自定义属性，并将其应用于目录中的产品页面。 有关这些属性的详细信息，请参阅产品属性。

步骤1：创建产品

要避免对实时商店进行更改，请使用所述的属性创建产品。

  1. 在​ 管理员 ​侧边栏上，转到​ Catalog > Products。

  2. 单击右上角的​ Add Product。

  3. 创建具有以下属性的产品：

    • ​

      属性集: Default

    • Product Name：我的产品

    • ​

      SKU: Tutorial

    • ​

      Price: 75.00

    • ​

      Quantity: 100

    • Stock Status：有货

    • ​

      Weight: 1

    • Categories：女性>上衣>T恤

  4. 单击右上角的​ Save ​箭头并选择​ Save & Close。

步骤2：创建自定义属性

在此步骤中，您将创建两个新的自定义属性，以显示如何使用Page Builder和文本编辑器输入类型。

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Attributes>Product。

  2. 单击右上角的​ Add New Attribute。

  3. 输入属性的​ Default Label。

    对于此示例，使用My Page Builder Attribute作为标签。

  4. 将​ Catalog Input Type for Store Owner ​设置为Page Builder。

    创建自定义属性时，您可以指定最适合应用程序的编辑器为Page Builder或标准WYSIWYG Text Editor。

    Page Builder输入类型 {width="600" modal="regular"}

  5. 展开​ Advanced Attribute Properties ​部分中的 扩展选择器 并进行以下设置：

    • Attribute Code：输入小写字符形式的属性代码，使用连字符而不是空格。 对于此示例，请使用my_page_builder_attribute。

    • Scope：接受默认值Store View。

    • Default Value：输入属性的默认值。

    • ​

      Unique Value: No

    • ​

      Add to Column Options: No

    • ​

      Use in Filter Options: Yes

  6. 在左侧的​ Attribute Information ​面板中，选择​ Storefront Properties ​并进行以下设置：

    • ​

      Use for Promo Rule Conditions: Yes

    • ​

      Visible on Catalog Pages on Storefront: Yes

    • ​

      Used in Product Listing: Yes

  7. 完成后，单击​ Save Attribute。

  8. 重复上述步骤，创建具有相同基本属性的第二个属性，但文本编辑器输入类型如下所示：

    • Default Label：我的文本编辑器属性

    • Catalog Input Type for Store Owner：文本编辑器

    • ​

      属性代码: my_text_editor_attribute

步骤3：更新产品属性集

  1. 在​ 管理员 ​侧边栏上，转到​ Stores > Attributes>Attribute Set。

    对于此示例，您暂时将新属性添加到default属性集。 在本练习结束时，从属性集中删除属性，这样就不会影响您的目录。

    note note
    NOTE
    如果不想更改您的实时商店，您可以遵循操作，而无需更新属性集。

  2. 在列表中找到​ Default ​属性集，双击该属性集以在编辑模式下将其打开。

  3. 在​ 未分配属性 ​列表中，找到您创建的新属性，并将每个属性拖到​ Content ​下的​ Groups ​列中。

    属性在Groups列中的位置决定了它在页面上的显示位置。

    新属性已添加到内容组 {width="600" modal="regular"}

  4. 单击​ Save ​以返回到“属性集”列表。

  5. 出现提示时，单击页面顶部的​ Cache Management ​链接，并刷新任何无效的缓存。

步骤4：更新产品

  1. 在​ 管理员 ​侧边栏上，转到​ Catalog > Products。

  2. 在“产品”网格中，找到​ 我的产品 ​并以编辑模式将其打开。

  3. 向下滚动并展开​ Content ​部分的 扩展选择器 。

    在部分的顶部，有两个产品内容的标准属性：

    • 简短说明，它使用标准WYSIWYG 编辑器。
    • 描述，显示Page Builder预览。

    产品内容 {width="600" modal="regular"}

    当您滚动到部分的下半部分时，您创建并分配了以下两个属性：

    • 我的Page Builder属性，显示Page Builder预览。
    • 我的文本编辑器属性，它使用标准的WYSIWYG编辑器。

    产品内容编辑 {width="600" modal="regular"}

  4. 在​ 我的文本编辑器属性 ​编辑器中，输入Text Editor Attribute placeholder text。

    • 单击右上角的​ Save ​箭头并选择​ Save & Close。

  5. 对于​ 我的页面生成器属性，单击​ Edit with Page Builder ​并添加描述文本：

    • 在Page Builder面板中，展开​ Elements ​并将​ Text object ​拖到舞台上。

    • 输入Page Builder attribute placeholder text。

    • 在舞台的右上角，单击​ 关闭全屏 （ 关闭全屏图标 {width="20"} ）图标。

      带有占位符文本的自定义属性 {width="600" modal="regular"}

  6. 向上滚动到​ Description，单击​ Edit with Page Builder，然后使用与上一步相同的方法添加您喜欢的任何文本。

  7. 在产品页面的右上角，单击​ Save ​箭头并选择​ Save & Close。

  8. 如果出现提示，请单击页面顶部消息中的​ Cache Management ​链接，然后刷新任何无效的缓存。

步骤5：查看结果

  1. 导航到店面的示例产品页面。

    在本例中，产品位于顶部导航中的“女性”>“上衣”>“T恤”下。

  2. 向下滚动至​ 我的页面生成器属性 ​信息。

    属性在产品页面上的位置由主题决定。 在Luma主题中，新属性位于产品描述之后。

    店面中的 Page Builder和文本编辑器属性 {width="600" modal="regular"}

您已完成Page Builder目录内容练习。 保留您创建的工作，以便您稍后可以参考它。

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d