产品列表可以设置为默认显示为列表或网格。您还可以确定每页显示多少产品,以及使用哪个属性对列表进行排序。产品列表包括一组控件,可用于对产品进行排序、更改列表格式、按属性排序以及从一页前进到下一页。

显示为网格的产品

配置产品列表

  1. 管理侧边栏上,转到Stores > Settings > Configuration

  2. 在左侧面板中,展开目录并选择下面的目录

  3. 展开店面扩展选择器部分

    店面配置选项

    有关这些选项的更多信息,请参阅配置参考中的Storefront

    笔记

    要根据按价格排序的产品正确显示产品及其价格,请确保销售税配置中的价格显示设置具有相同的值(Excluding Tax  Including Tax)。对于Calculation Settings,检查Catalog Prices值。对于Price Display Settings,选中Display Product Prices in Catalog值。如果它们具有不同的值,分层导航中的价格过滤器可能无法按价格正确过滤和排序产品。

  4. 将默认列表模式设置为以下之一:

    • Grid Only
    • List Only
    • Grid (default) / List
    • List (default / Grid
  5. 对于网格允许值上的每页产品数,输入您希望在以网格格式显示时每页显示的产品数。

    要输入一系列值,请用逗号分隔每个数字。

  6. 对于每页网格产品默认值,输入每页网格中显示的默认产品数。

  7. 对于List Allowed Values per Page 上的 Products per Page,输入您希望在以列表格式显示时每页显示的产品数量。

    要输入一系列值,请用逗号分隔每个数字。

  8. 对于列表默认值上的每页产品数,输入列表中每页显示的默认产品数。

  9. 产品列表排序方式设置为最初用于对列表进行排序的默认属性。

  10. 要为客户提供列出所有产品的选项,请将“允许页面上的所有产品”设置为Yes

  11. 如果您想在客户浏览目录列表时保留所有分页设置,请将记住类别分页设置为Yes

    启用此设置可确保在购物者从一个类别浏览到另一个类别时保留列表或网格中显示的产品数量。默认情况下,此字段设置为,No因为它使用更多的缓存存储空间,并且会影响页面被搜索引擎索引的方式。

  12. 如果使用平面目录不推荐),请执行以下操作:

    • 要显示产品的平面类别列表,请将使用平面目录类别设置为Yes

    • 要显示平面产品列表,请将Use Flat Catalog Product设置为Yes

  13. 如果要允许动态引用类别和产品 URL 中的媒体资产,请将“允许产品和类别中的动态媒体 URL ”设置为Yes

  14. 完成后,单击保存配置

页面控件

控制描述
查看方式 以网格或列表格式显示产品。
排序方式 更改列表的排序顺序。
每页显示 确定每页显示多少产品。
分页链接 导航链接到其他页面。

分页控件

分页设置显示在列表的顶部和底部,并控制产品列表的分页链接的格式。您可以设置控件中显示的链接数,并配置 Next 和 Previous 链接。要显示分页链接,列表中的产品数量必须多于产品列表配置中每页允许的数量。

分页控件

店面分页控件

控制描述
显示网格 查看方式 - 以网格或列表格式显示列表。
排序方式 排序依据 - 更改列表的排序顺序。Used for Sorting in Product Listing店面属性确定哪些产品属性可用于对列表进行排序
每页显示 每页显示 - 确定每页显示多少产品。
分页链接 分页链接 - 指向其他页面的导航链接。

配置分页控件

  1. Admin侧边栏上,转到Content > Design > Configuration

  2. 找到您要配置的商店视图,然后在操作列中单击编辑

  3. 其他设置扩展选择器,展开分页部分。

    分页

  4. 对于Pagination Frame,输入您希望在分页控件中显示的链接数。

  5. 对于Pagination Frame Skip,输入在分页控件中显示下一组链接之前要向前跳过的链接数。

    比如分页框有5个链接,你想跳转到后面5个链接,你想往前跳多少个链接?如果将其设置为四,则上一组中的最后一个链接将成为下一组中的第一个链接。

  6. 对于Previous 的锚文本,输入您希望为 Previous 链接显示的文本。

    留空以使用默认箭头。

  7. 对于Next 的锚文本,输入您希望为 Next 链接显示的文本。留空以使用默认箭头。

  8. 完成后,点击保存配置