Gucci Shop页面调用流程和API说明
本说明适用于:架构人员,前台、后台开发人员,假定阅读者已经拥有html,css,js,dom的基础知识。
该站点基于 prototypejs 和 scriptaculous 两个js框架实现,如果要深入研究,必要该框架的相关知识。 <o:p></o:p>
1. 目录和文件说明
/根目录:<o:p></o:p>
此目录存放index.html和此说明文件<o:p></o:p>
/images目录:<o:p></o:p>
此目录存放需要的图片<o:p></o:p>
/scripts目录:<o:p></o:p>
此目录存放所有JS脚本文件 <o:p></o:p>
/lib目录:<o:p></o:p>
此目录存放JS框架,一般不需要改动 <o:p></o:p>
app.js 站点全局定义,存放全局变量和公共方法,一般不需要改动。
debug.js 模拟了Ajax对服务端请求详细信息返回的数据,作为demo显示使用。
debug_format.js 对debug.js做了分析和精简,加入了注释。
ext.js 对lib目录中的JS框架的扩展,增加若干多功能,一般不需要改动。
localize.js 检测访客语言,并跳转至相应的页面。
menu-us.js 菜单文字定义,和多国语言定义(此文件为剥离的默认英文定义)
product.js 产品定义(此文件从页面中剥离)
shop.js 核心js,定义所有页面脚本动作,扩展重点
zoom.js 缩放组件,定义图片缩放操作。<o:p></o:p>
/stylesheets目录:<o:p></o:p>
此目录存放css样式表<o:p></o:p>
2. 系统流程分析
index.html 是一个文件模板,一般由程序生成。
在输出的页面中,根据要显示的产品数量和排列方式在div#content中生成若干个lightbox块,如果一共有20个产品,排列模式是2X3,那么生成4个lightbox的div比较合适
div#content起始代码:
模板循环代码 <o:p></o:p>
<o:p> </o:p>
//定义一个lightbox区域(重要概念,后续JS的所有操作都针对这个lightbox的div来进行),排模式法是2x3(2行3列)
//在div的类名中说明
//定义1个lightbox中显示6个产品
![](images/empty.gif)
![](images/empty.gif)
![](images/empty.gif)
![](images/empty.gif)
![](images/empty.gif)
![](images/empty.gif)
//定义一个带阴影的层,作为间隔
//两个lightbox中的间隔
输出完模板以后,以JS对象的方式开始输出数据。demo用列已经把页面输出的js代码放到了product.js文件中,方便分析阅读。 输出完数据以后,调用代码 Shop.initialize()
进行解析并且初始化。详细初始化流程请阅读源代码内注释。 (见产品列表API) <o:p></o:p>
页面输出主要完成: <o:p></o:p>
1. 生成lightbox模板框架<o:p></o:p>
2. 生成产品列表内容<o:p></o:p>
页面初始化主要完成: <o:p></o:p>
3. 解析menu.js生成菜单<o:p></o:p>
4. 解析products.js生成显示内容<o:p></o:p>
5. 绑定事件,如菜单单击事件,lightbox中图片单击事件等<o:p></o:p>
初始化完成以后,就可以点击图片查看产品详细资料,在页面初始化过程中已经为每个lightbox生成详细了详细资料显示区域并且已经循环分配了id。 <o:p></o:p>
点击图片后调用Shop.showProduct()
方法,显示以上详细资料显示区域,然后使用Ajax取得该产品的详细资料,并且调用 Shop.selectStyle()
方法填充详细资料并且显示。
demo中的 debug.js 是模拟了一个Ajax请求的返回代码,便于离线分析。
debug.js 返回了该特定商品的id,说明、和图片信息,并且初始化了详细信息数据,并且显示。详细流程请阅读 debug_format.js 代码内注释。 (见详细内容API) <o:p></o:p>
Ajax请求的页面主要输出: <o:p></o:p>
6. 该商品的详细资料。<o:p></o:p>
7. 更新了产品详细内容。<o:p></o:p>
Ajax输出页面中的脚本主要完成: <o:p></o:p>
8. 更新了详细内容模板div中的内容。<o:p></o:p>
9. 解析产品数据,生成旋转图片演示。<o:p></o:p>
3. 数据结构和API<o:p></o:p>
页面内所有产品列表 <o:p></o:p>商品列表定义了所有商品。可以在页面中输出灵活控制,也可以包含在外部js中(网站中是输出在页面内,demo把数据从页面内分离到了 product.js 中)。
商品列表是一个对象数组。组织形式为:
products = [ product1, product2, ... , productN ];
商品是一个对象,对象模型为:
<o:p></o:p>
product = { id: 'String', sorts: [Array], thumburl: 'String', lowlighturl: 'String', thumbOptions: 'String', lowlightOptions: 'String'}
product 对象类型说明 <o:p></o:p> | |||
属性名<o:p></o:p> | 属性类型<o:p></o:p> | 是否必须<o:p></o:p> | 附加说明<o:p></o:p> |
id<o:p></o:p> | 字符串<o:p></o:p> | 是<o:p></o:p> | 商品id<o:p></o:p> |
sorts<o:p></o:p> | 数组<o:p></o:p> | <o:p></o:p> | 该商品属于的类别,允许多个,用于分类显示<o:p></o:p> |
thumburl<o:p></o:p> | 字符串<o:p></o:p> | 是<o:p></o:p> | 缩略图地址<o:p></o:p> |
lowlighturl<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 当列表被分类显示,不在当前分类的商品的低亮度图片,参考页面显示效果<o:p></o:p> |
thumbOptions<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 当请求服务器时,是否需要携带特别的参数<o:p></o:p> |
lowlightOptions<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 当请求服务器时,是否需要携带特别的参数<o:p></o:p> |
附加说明: <o:p></o:p>
1. 由于源站点的图片输出是用的scene7.com 的整体解决方案,图片参数有严格要求并且复杂,实际开发中可给非必须属性赋予空值<o:p></o:p>
2. 具体格式可以参考product.js,如有错误以js内容的结构为准<o:p></o:p>
3. 关于排序,只要在导航条设置class="欲排序的类别名称(对应sorts数组中的值)" 然后绑定onclick事件为 Shop.selectSort(this)
就好了,但是要提供lowlighturl,不然看不出效果。
例如:
a onclick="Shop.selectSort(this); return false" class="sneakers" href="#" _fcksavedurl="#">sneakers
<o:p></o:p>
详细信息在点击图片时触发事件 shop.js#443::
showProduct()
Ajax请求服务器返回产品详细信息, 然后处理。实际处理中可以使用ajax,也可以用自定义JS。服务端返回的数据是产品详情对象数组,
组织形式为:
Styles = [ style1, style2, ... , styleN ];
产品详情是一个对象,对象模型为:
Style = { style: 'String', images: { front: { is360: Integer, full: 'String', zoom: 'String', miniThumb: 'String', sku: { sku: 'String', size: 'String' } }
其中 images 对象:
images = { front : {Object} }
其中 front 对象:
front = { is360: Integer, full: 'String', zoom: 'String', miniThumb: 'String', sku: { Object } }
其中 sku 对象:
sku = { sku: 'String', size: 'String' }
<o:p></o:p>
Style 对象类型说明 <o:p></o:p> | |||
属性名<o:p></o:p> | 属性类型<o:p></o:p> | 是否必须<o:p></o:p> | 附加说明<o:p></o:p> |
style<o:p></o:p> | 字符串<o:p></o:p> | 是<o:p></o:p> | 编号,对应某个商品的不同型号(子类别)<o:p></o:p> |
style.images.front.is360<o:p></o:p> | 整数<o:p></o:p> | 是<o:p></o:p> | 是否可旋转图片?如果不是,请赋值0<o:p></o:p> |
style.images.front.full<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 360°完整图片的地址<o:p></o:p> |
style.images.front.zoom<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 大(完整)图地址<o:p></o:p> |
style.images.front.miniThumb<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 缩略图地址<o:p></o:p> |
style.images.front.sku.sku<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 型号名称 此项一般不定义,原版页面实现特别复杂<o:p></o:p> |
style.images.front.sku.size<o:p></o:p> | 字符串<o:p></o:p> | <o:p></o:p> | 型号值 此项一般不定义,原版页面实现特别复杂<o:p></o:p> |
附加