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

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

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

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

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

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

{width="600" modal="regular"}

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

{width="600" modal="regular"}

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

添加条件：

• 单击​ 添加 （ ）图标。

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

  {width="600" modal="regular"}

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

  {width="600" modal="regular"}

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

  {width="600" modal="regular"}

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

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

输入​ Number of Products to Display。

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

根据需要完成其余设置。

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

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

{width="600" modal="regular"}

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

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

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

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

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

向下滚动并展开​ Content ​部分的 。

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

{width="600" modal="regular"}

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

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

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

{width="600" modal="regular"}

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

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

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

{width="500" modal="regular"}

输入​ Video URL。

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

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

{width="500" modal="regular"}

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

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

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

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

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

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

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

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

单击右上角的​ Add Product。

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

• ​

  属性集: Default

• Product Name：我的产品

• ​

  SKU: Tutorial

• ​

  Price: 75.00

• ​

  Quantity: 100

• Stock Status：有货

• ​

  Weight: 1

• Categories：女性>上衣>T恤

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

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

单击右上角的​ Add New Attribute。

输入属性的​ Default Label。

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

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

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

{width="600" modal="regular"}

展开​ 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

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

• ​

  Use for Promo Rule Conditions: Yes

• ​

  Visible on Catalog Pages on Storefront: Yes

• ​

  Used in Product Listing: Yes

完成后，单击​ Save Attribute。

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

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

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

• ​

  属性代码: my_text_editor_attribute

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

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

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

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

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

{width="600" modal="regular"}

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

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

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

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

向下滚动并展开​ Content ​部分的 。

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

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

{width="600" modal="regular"}

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

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

{width="600" modal="regular"}

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

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

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

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

• 输入Page Builder attribute placeholder text。

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

  {width="600" modal="regular"}

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

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

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

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

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

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

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

店面中的 {width="600" modal="regular"}