Z+新组件介绍

单击此处键入标题,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Z+,新组件介绍,产品市场中心,9,年,011,月,主要内容,组件化改造的背景,组件化改造成果,按模块介绍常用组件新功能,难点详解,单页,/,分页及凸显效果的设置,页码区设置,推广优化组件,五大原则,1,、数据项最全原则,2、,数据项单独控制原则,3,、流程简洁原则,4、,美观原则,5、,隐藏后数据向上向左原则,为什么要进行组件改造？,组件和样式数量太多，每个样式的功能或数据项不全，设计师说,“,我需要样式,13,的这个功能和样式,18,的那个数据项,”,，没有一个样式是覆盖所有数据项和功能的，设计师难以选择；,组件数据项不全，或者每个数据项的样式不能单独控制，无法满足所有客户的需要；,别的网站能做出来的效果，用我们的组件做不出来；,用户体验不好，页面流转复杂；,组件化改造背景,组件化改造成果,组件数量,合并前，,16,个模块,193,个组件，每个组件都有几个甚至几十个样式,合并后，,20,个模块,96,个组件，大部分组件只有一个样式,组件功能,覆盖所有旧组件功能,增强部分组件功能,简化部分组件功能,组件数据项,能显示所有后台录入及自动生成的数据项；,组件参数,参数灵活丰富，能通过配置得到多种多样的效果；,修改样式,所有数据项都可以分别修改样式；,代码结构合理，符合,W3C,规范；,组件化改造成果（一）,组件合并成果举例,组件化改造成果（二）,组件合并成果举例,组件化改造成果（三）,单页和分页合并为同一个组件；,表单和成功提示信息合并为同一个组件；,商品基本分类和营销分类列表展示合并为同一个组件；,商品列表与商品搜索结果集合并为同一个组件；,会员,/,非会员订单新增、修改、详细、预览合并为同一个组件；,商品列表类组件：,访客可切换显示方式：图文式、列表式和图片式；,常用的排序方式用图标展示；,可动态显示大图的效果；,新组件介绍商品模块,说明：当列表中显示商品小图片时，动态显示大图的作用域在商品小图片上；如果不显示商品小图片时，作用域在商品名称上,新组件介绍商品模块,商品详细信息组件：,支持放大镜效果；,可通过参数控制显示后台上传的商品大图或小图；,不需换页面即可点击上一个,/,下一个浏览同类商品；,支持商品多图片展示效果（通过可选属性实现）；,新组件介绍商品模块,商品常规搜索组件：,参数,“,查询分类条件选择,”,说明,：,1.,“,显示商品分类下拉框,”,和,2.,“,不显示且不查询商品分类,”,的应用场景为：在首页或者所有商品相关页面作为一级搜索；,3.,“,不显示但隐含分类条件从页面获取商品分类,”,的应用场景为：从分类树或者面包屑中点击商品分类链接到的商品列表页面；,4.,“,不显示但隐含分类条件预置商品分类,”,的应用场景为：,在某分类的专题页面，隐含一个预置分类做该分类下的搜索。,参数,“,查询属性条件选择,”,说明：,能选择是否显示商品属性；,系统预置三个区间属性作为搜索条件：分别是零售价、市场价和上架时间；,新组件介绍商品模块,商品高级搜索组件：,默认不显示辅助选项，点击,“,显示辅助选项,”,则切换显示,/,隐藏更多选项；,能对商品品牌、营销分类、基本属性、扩展属性及可选属性进行组合搜索；,新组件介绍商品模块,商品分类组件：,将旧组件的商品分类树状、梯状和滑出式合并为一个组件，不同的,JS,效果做为一个样式；,树状样式能设置初始展开方式；,新组件介绍商品模块,商品分类列表组件：,对应旧组件,“,商品分类列表图片展示,”,；,该组件可调用某个商品基本分类，以图片列表形式显示该分类下的子分类信息，点击分类图片后如果有子分类则显示分类信息，如果已到最末一级分类则显示商品信息；,应用场景：既可单独调用，也可左边放分类树组件，右边放此组件；通常该组件与商品列表组件放在同一页面调用；,勾选,“,无子分类时跳转,”,则如果点击进入的分类下面无子分类时自动跳转到指定页面；,新组件介绍商品模块,同类商品列表组件：,应用场景：该组件只能在商品详细页面调用，以列表形式显示当前商品同一级分类下的其它商品；,递归：显示该分类下所有子分类的信息；,商品对比浮动框组件：,应用场景：商品列表页面；,同一个分类下的不同子分类的商品可以进行对比，但对比信息的商品属性名称以第一个商品的商品模板为准；,新组件介绍留言模块,发表留言组件：,应用场景：该组件可以在商品、资讯详细页面调用，通常与留言列表组件在同一页面调用搭配使用；,新组件将发表留言和成功提示信息合并为一个组件，在一个,JSP,里分别为两个视图；,场景一：发表留言与成功提示信息在同一个页面显示的调用方法；,场景二：发表留言与成功提示信息在不同页面显示的调用方法；,其它表单类带成功提示的组件，如新增询价、缺货登记入口、会员注册信息填写都按此方法调用；,新组件介绍资讯模块,资讯列表组件：,应用场景：该组件可以在首页、资讯首页等页面调用；,新组件将旧组件十几个信息列表合并为一个组件，单页分页为两个视图；,该组件可以既可以单独调用也可以作为搜索结果列表；,勾选参数,“,初始分类设置,”,最外层,“,所有分类,”,的复选框，则会包含网站开通后客户在后台增加的分类；,浏览权限设置；,新组件介绍订购模块（一）,加入收藏夹组件：,应用场景：页面中有包含收藏功能的组件，必须引用该组件；,点击,“,收藏,”,弹出层而不跳转页面，目的是不打断用户购物流程，让用户专心继续挑选商品；,注意事项：修改组件样式时，先将组件参数,“,支持自动关闭,”,取消勾选；,我的收藏夹组件：,支持非会员收藏；,非会员最多可收藏,20,个商品，会员最多可收藏,200,个商品；,新组件介绍订购模块（二）,我的购物车组件：,可通过参数设置是否支持未登陆进入购物车；,显示结算步骤导航，提示用户当前操作到哪步，还差几步完成；,判断当前用户登陆状态并显示提示信息；,删除商品后可恢复；,支持非会员订购的参数配置方法；,新组件介绍订购模块（三）,订单结算中心组件：,将旧组件订单填写、查看、预览等组件合并为一个组件，,支持会员,/,非会员订购；,涵盖从订单填写、提交订单到结算支付的全过程；,对用户体验进行了提升，订购流程清晰快捷；,新组件介绍公共模块（一）,智能翻译组件：,有两种不同的布局样式，,一键全站翻译；,重点详解（一）,单页,/,分页及凸显效果的设置：,单页,/,分页是一个组件中的两个视图；,在单页展示的页面引用相应组件，参数选择,“,单页,”,，如果无凸显效果则选中,“,无区别显示,”,，,如果选择,“,有区别显示,”,则下面可分别设置凸显部分和其余部分的行数列数及显示的数据项；,在点击,“,更多,”,进入的页面引用同一个组件，参数选择,“,分页,”,。,重点详解（二）,页码区设置：,可显示顶部和底部两个分页；,可灵活控制翻页区显示的内容；,制作时主要注意事项,说明书的使用,特殊组件的注意事项,组件样式为什么变形,按钮的修改,/,组件样式的个性化,缺省样式与样式库样式,特殊组件的注意事项,商品详细,导航,品牌列表,弹出广告,智能翻译,横排竖排的问题,组件样式数量,组件为什么变形,按钮,图片,组件的个性化,/,样式的个性化,按钮的修改,/,组件样式的个性化,组件样式原理,样式,JSP,CSS,配置,结合原理：,样式实例原理,：,id=“,实例,”,样式库：,FrontDownloads_list01-,d1_c1,资源包默认：,FrontDownloads_list01-,001,自动：,FrontDownloads_list01-,13882667055,FrontDownloads_list01-,（,识别符,）,CSS,解读：,FrontDownloads_list01-,d1_c1,FrontDownloads_list01-,d2_c1,FrontDownloads_list01-,d2_c2,风格级别原理,网站,改,common.css,改,button,样式,改样式,css,增加样式,css,实例,增加实现,css（,以,ID,名,）,按钮,图片,样式的个性化,实际修改,同名不覆盖的原则,如果引用样式库中缺省网站已存在样式、需要手动删除缺省样式,缺省网站样式与样式库样式,IFRAME,及窗口打开方式,浮动窗口的支持,图片尺寸大小的修改,增加输入框词条的,输入验证提示信息的多层分离,按钮及图片边框的可视化修改,部份列表类单分类的引用,组件样式的数量,二期样式及未来改进,thanks,