如何使用产品列表组件?

浏览数量:0     作者:小七     发布时间: 2015-08-19      来源:本站

【简介】 产品列表组件实现所有产品的多种排版的分页展示。
 
【应用场景】 产品列表组件一般应用在系统页面的产品列表页面上,展示所有的产品,展示方式比较多样化:可以以图片+标题矩阵平铺的方式展示、或者是图片+名称+摘要的方式展示等方式、或者是突出展示产品摘要的方式。

【使用方法】 

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

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


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

七达通科技建站02


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

七达通科技建站03


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

七达通科技建站04


第五步:添加产品列表组件。
1、把要添加产品列表组件的页面切换为当前页面(图一);


把某个页面切换为当前页面
                                                                                                                                图一

2、然后把鼠标放到需要添加产品列表组件的位置,出现小水滴,单击小水滴(即添加组件按钮),弹出添加组件弹出框,单击产品组件下的产品列表组件(图二);

5

                                                              图二


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


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

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

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

2
3
4

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

5
6


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

7


产品列表的字段配置(拖动可调整字段顺序):可以全选也可勾选部分,拖动字段可以调整字段顺序。
8

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

9
QQ截图20160807165229
QQ截图20160807164636

选择图片显示比例(宽:高):可以选择1:13:22:34:33:416:99:16这几种图片显示比例。
QQ截图20160807165508

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


按钮样式:除了默认样式,还有11种按钮样式可供选择。
11
选择分页风格:可以选择默认分页风格,也可以选择自定义风格,自定义风格下可以选择分页按钮中颜色,也可以选择分页位置居左、居中或者居右。
12


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

13

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

14

          微信公众号

阿里巴巴国际站

网站建设

知识圈

联系我们
  客服QQ:279415070
   服务顾问:17727578727  ( 微信 )
  邮箱:info@7datong.com
  地址 : 深圳市龙华区华油工业区1栋2层
Copyright © 深圳市七达通科技有限公司 All Rights Reserved 版权      互联网服务粤ICP备16005814号
   - 网站地图