Gucci Shop页面调用流程和API说明

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个产品

  //定义一个带阴影的层，作为间隔

 

 

 

//两个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>

// 图片显示区域，循环分配 id

// 说明显示区域

// 同种商品不同款式的显示区域

// 尺码选择，购物按钮区域

点击图片后调用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 ];

商品是一个对象，对象模型为：
product = { id: 'String', sorts: [Array], thumburl: 'String', lowlighturl: 'String', thumbOptions: 'String', lowlightOptions: 'String'}<o:p></o:p>

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>

附加