如何使用产品列表组件？

1、如何添加产品列表组件？

第一步：打开360 浏览器，输入网址 www.7datong.com ，进入七达通科技云营销平台。


第二步：点击右上方“登录”按钮   。



第三步：进入“登录到七达通科技云营销平台”页面，输入账号和密码登录。



第四步：点击“编辑网站”按钮。



第五步：添加产品列表组件。
1、把要添加产品列表组件的页面切换为当前页面（图一）；


                                                                                                                                图一

2、然后把鼠标放到需要添加产品列表组件的位置，出现小水滴，单击小水滴（即添加组件按钮），弹出添加组件弹出框，单击产品组件下的“产品列表”组件（图二）；


                                                              图二


第六步：添加“产品列表”组件。在产品组件中，找到“产品列表”组件，单击“产品列表”，弹出“设置产品列表”窗口。



2、如何设置产品列表组件？

在弹出的设置产品列表窗口，可以设置产品列表的内容、高级、风格和特效。

内容：
组件标题：根据需要可以输入组件标题，若不输入，标题也不会显示   ；
选择列表的产品数据：有所有产品、使用筛选条件、选择指定产品这三个选项。若选择所有产品，则产品列表中会显示所有的产品；若选择使用筛选条件，可以点开选择产品分类的下拉菜单，下面有热门产品、新产品、推荐产品三种选择；若选择指定产品，在下方的选择列表的产品数据的下拉菜单中可以选择产品分类，也可直接选择热门产品、新产品、推荐产品，可以在下方的搜索栏里直接输入产品关键词进行搜索，也可以直接选择产品。





分页展示：若选择是，在产品列表中的产品达到一定数量时会自动进行分页；若选择否，则产品不会进行分页。
每页产品数量：可以输入每页想要展示产品数量。
显示更多：可以链接到产品中心等能够展示更多产品页面。点击链接按钮，弹出“插入链接”页面，可以选择链接类型，在下拉菜单中可以选择一个站内页面，并且可以选择是否在新窗口打开链接。




高级：
产品排序方式：点击下拉菜单，有按修改日期降序（最新修改的在最前面）、按修改日期降序（最新修改的在最后面）、按添加日期升序（最新添加的在最前面）、按添加日期降序（最新添加的在最后面）这四个选项可供选择。
分页刷新方式：选择页面全局刷新URL变化，则点击分页按钮时，会刷新到产品中心等页面，打开新的页面；若选择页面局部刷新URL 不变，则点击分页按钮时，只会局部刷新，不会跳转到其他页面。
功能设置：产品询价：可选择开启或关闭产品询价；加入询盘栏：可选择开启或关闭询盘栏；可以选择是否在新窗口打开产品详情的链接；可以选择是否展示产品分类描述。



产品列表的字段配置（拖动可调整字段顺序）：可以全选也可勾选部分，拖动字段可以调整字段顺序。


风格：
选择展示风格：如图有 6 种展示风格可供选择。
设置响应式变化下不同宽度的图片数量：可选择默认，也可以自定义数量多少，可以设置在 >1200px 、 961px~1200px 、 741px~960px 、 500px~740px 、 <500px 时显示不同数量的图片，（可填数值在 2~8 之间）。





选择图片显示比例（宽：高）：可以选择 1:1 、 3:2 、 2:3 、 4:3 、 3:4 、 16:9 、 9:16 这几种图片显示比例。


单个产品背景色：可以自定义单个产品背景色。
单个产品鼠标悬浮样式：可以选择单个产品悬浮时背景颜色和链接文字颜色。


按钮样式：除了默认样式，还有 11 种按钮样式可供选择。

选择分页风格：可以选择默认分页风格，也可以选择自定义风格，自定义风格下可以选择分页按钮中颜色，也可以选择分页位置居左、居中或者居右。


特效：
鼠标悬停产品图片特效：除默认外有 10 种特效可供选择。



更改完成产品列表内容、高级、风格和特效后，点击 右下方“保存”按钮，保存所修改的内容。