Skip to main content

商品列表组件

使用场景

商品列表组件通常用于展示商品的列表,是电商网站、在线商城等项目中非常常见的一个组件。以下是一些使用商品列表组件的场景:

  • 1、商品展示:商品列表组件可以用来展示商品的列表,用户可以通过列表浏览和筛选商品,查看商品的图片、价格、sku 等信息。
  • 2、推荐列表:商品列表组件还可以用来展示推荐商品的列表,根据用户的浏览记录、购买记录等信息,推荐相关的商品给用户。
  • 3、商品分类:商品列表组件可以用来展示商品的分类列表,用户可以通过列表浏览和筛选不同分类的商品。

总之,商品列表组件在电商网站、在线商城等项目中有着广泛的应用,能够提供良好的用户体验,提高用户的购物效率。

组件视图

商品列表组件展示

组件使用

从组件树中找到【商品列表】,按住鼠标拖入到画布,即向页面中添加了一个商品列表组件。

配置说明

当选中商品列表组件后,可以对其做细化配置:

可编辑的商品系列

属性名属性说明备注
商品系列名指定首页展示的商品系列

内容

属性名属性说明备注
列表标题自定义标题
标题描述自定义描述

显示

属性名属性说明备注
SKU 样式sku 在购物弹框里展示的样式
图片比列图片展示比例的设置,默认是1:1, 另外有4:3, 3:4 的选项
图片填充方式商品图片展现方式
选择列表展示样式商品列表展现形式分为横排和纵排两种
显示 B2C默认是 B2C 格式
显示排序默认打开,可选择排序方式
无限加载默认打开, 只对商品列表页有效,关闭后商品数量超出一页展示分页器
每页展示的数量关闭无限加载,有分页器的时候生效,默认一页 20 个,范围 1-20,步长 1
显示折扣标签默认打开
显示 SKU 图片默认关闭,打开后可展示 sku 图片或色卡
显示商品参数默认关闭,只对B2B模式的商品列表有效
显示类目和属性选择默认关闭,只对商品列表有效
显示商品对比默认打开,只对B2B模式的商品列表有效
标题对齐方式标题的对齐方式,分为左对齐和居中对齐两种
商品列表标题颜色设置标题字体颜色设置
商品列表描述颜色设置描述字体颜色设置
按钮主题颜色设置按钮背景颜色
按钮字体颜色设置按钮字体颜色
背景颜色设置商品列表组件背景颜色
商品背景颜色设置商品图片背景颜色

注意事项

FAQ

  • 1、 为什么打开‘显示类目和属性选择’, 在首页不展示类目和属性选择?

    类目和属性选择配置只对商品列表页有效,首页不展示

  • 2、点击对应的类目之后只展示当前类目,怎么再次查看所有类目?

    点击类目表上方的 ‘所有类目’或 ‘All Category’ 即可返回所有类目