Z+新组件介绍

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