独立网店模板机制技术交付文案_第1页
独立网店模板机制技术交付文案_第2页
独立网店模板机制技术交付文案_第3页
独立网店模板机制技术交付文案_第4页
独立网店模板机制技术交付文案_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、独立网店模板机制技术交付文案v1.0For Ecstore、Shopexport目录优势和创新1ShopEx模板机制的优势1ShopEx模板机制的创新1模板机制中的名词解释2挂件区域（widgets）2挂件（widget）2边框（border）2系统级区域（main）2默认模板页 （default.html）2创建一个模板包4标准模板包必要的文件41. theme.xml4每个模板页将用到的公共页面引用 (header.html、footer.html)5首页模板（index.html）6默认模板页(default.html)7边框文件夹 （borders）8资源文件夹 （images）8一张

2、模板效果图（preview.jpg）9标准模板包的备份与还原9标准模板包必要的文件结构12标准模板包必要的文件结构生成工具13模板包的首次加载13模板开发测试环境13模板包的首次加载13完善模板包15为模板添加页面布局15为模板布局页添加挂件16系统级常用挂件表16挂件的添加和配置16注意事项18创建一个模板级挂件18创建一个模板级挂件的必备文件结构18创建一个模板级挂件mywidget18模板级挂件绑定到模板23测试我的第一个挂件24系统级资源的重用26重用脚本框架26重用系统级样式表26重用前端效果库封装26系统级区域<main>的修改27创建一个模板级的系统区域27优势和创新

3、ShopEx模板机制的优势面对后端开发人员面对前端开发人员面对网店运营人员1.模板挂件机制灵活的接口调用让你轻松并且安全的将数据抛向前端,并可方便的构建数据筛选、配置规则和界面。2.模板缓存、自定义URL帮你分担后端开发压力，可能你并不需要关心页面静态化。1.默认集成强大的前端开发框架和接口调用。2.严格的要求前端工程师模块化的设计思想。1.运营人员无需懂得前端开发技术，可以在管理后台进行所见即所得的网店的布局调整，板块数据展示规则设定。2.运营人员可以轻松更换、删减网店板块,更换挂件板块的内置风格。3. 挂件机制可以满足你站外嵌入的需求。ShopEx模板机制的创新 所见既所得的可视化模板板块

4、编辑机制 将布局、区块、边框、数据 真正细分化模板机制中的名词解释挂件区域（widgets）挂件区域用于在某个页面预留挂件(widget)可挂入的区域。也可以理解为“插槽”、“坑”。每个挂件区域可以挂入多个挂件挂件（widget）挂件是ShopEx模板机制中的一个重要角色，它能根据条件从后端取得数据然后根据“挂件级页面模板”来包装成一个小板块。例如一个“商品板块挂件”，它要先由后端语言（php）来组织数据，然后返回到“挂件级页面模板”。组织数据的条件将会独立出一个可配置页面。边框（border）边框用于包装一个挂件板块，一套模板里面可能由很多个边框风格，这些风格的名称和对应的边框文件 需要定义

5、在模板的描述文件（theme.xml）中，以便可视化编辑时改变一个板块的风格。例如一个“商品板块挂件”在首页要以三种不同的风格展示（促销、热门、新品.），除了需要在挂件的配置面板中配置数据的展示范围不同，还需要由边框机制的配合达到颜色风格的区别。特别是一些系统级挂件，为了适应不同模板的展示方式，默认不会输出标题和边框，边框则可以协助包装一下挂件挂入到挂件区域。系统级区域（main）系统级区域用于输出系统的核心交互流程。这些区域的htmljavascript是不能在模板包中直接定义的，模板包唯一能影响到这些系统级区域的是 css样式定义，因为模板包的样式表是在系统级样式之后加载。默认模板页 （d

6、efault.html）默认模板页是在模板包中 未定义某个页面的布局时，默认调用的页面布局。例如你的模板包中只包含了两个页面的定义：首页、默认页，那么其他未定义的页面在访问时将优先使用默认模板页，直到你单独定义它为止。创建一个模板包标准模板包必要的文件创建一个模板包文件夹，例如 fsgw新模板包文件夹的名称应与描述文件中的 id保持一致，并且应该由数字和英文小写组成。在模板包文件夹内创建以下文件：3r 1. theme.xml此文件用来描述模板包的基本信息，以及模板可能包含的挂件。还用于模板的备份导出，和导入操作中的模板数据交换。例如：<?xml version="1.0&qu

7、ot; encoding="UTF-8" ?><theme><name>风尚购物</name><id>fsgw</id><version>ECStore</version><info></info><author>ShopEx</author><site></site><update_url></update_url><borders><set key="边栏样式

8、" tpl="borders/border1.html" /><set key="商品分类" tpl="borders/border2.html" /><set key="商店公告" tpl="borders/border3.html" /><set key="品牌热卖排行" tpl="borders/border4.html" /><set key="热销排行" tpl=&qu

9、ot;borders/border5.html" /><set key="首页商品列表" tpl="borders/border6.html" /><set key="页尾文章列表" tpl="borders/border9.html" /><set key="购买本商品的顾客还买过" tpl="borders/border10.html" /></borders><views></views&

10、gt;<config></config><widgets></widgets><proinstances></proinstances></theme>xml节点说明name模板包的名称,将会出现在管理后台模板列表中id首次由开发人员定义，应与模板包名称保持一致,（全英文）version模板包的版本信息info模板包简介author模板包作者site模板包作者网址update_url升级地址，暂未启用borders模板包包含的边框定义描述widgets模板挂件描述。系统会在模板可视化编辑添加挂件后向widget

11、s序列化挂件描述此表只描述最关键的几个节点项2. 每个模板页将用到的公共页面引用 (header.html、footer.html)例如:（header.html）<!doctype html><html><head><header> <!-将输出系统级 style、javascript、mate-><link rel="stylesheet" type="text/css" href="images/fsgw-style.css" /> <!-模板包样式的

12、引入,（”images/” 是必须的，因为在页面渲染时，它会被替换为绝对路径）-></head><body><div class=”body”><div class=”top”><div class=”top-bar clearfix”><div class=”span-auto”>Welcome</div><div class=”span-auto login”><widgets id=”header-login”> <!-一个挂件区域，（id 是唯一的）-><

13、/div></div></div><div class=”header”><widgets id=”header-nav”> <!-一个挂件区域，（id 是唯一的）-></div>例如:（footer.html）<div class="footer"><div class="copyright"><widgets id="footer-copyright"><!-一个挂件区域，（id 是唯一的）-></d

14、iv><footer> <!-将输出系统级 业务处理javascript用户自定义的底部信息-></div></body></html>3. 首页模板（index.html）例如<require file="header.html"> <!-引入公共的头部（头部的挂件区块会被解析）-><div class=”main”> <div class=”banner”><widgets id=index-banner><!-预留一片广告展示挂件区-&g

15、t;</div><div class=”content c-1 clearfix”> <div class=”span-4 m-l”><div class=”mod”><div class=”t”>商品分类</div><div class=”b”><widgets id=index-cat><!-预留一片商品分类挂件的挂入区-></div></div><widgets id=index-m-l><!-预留一片首页左侧挂件区-> </d

16、iv> <div class=”span-10 m-r”><widgets id=index-m-r><!-预留一片首页右侧挂件区-> </div></div></div><require file="footer.html"> <!-引入公共的底部（底部的挂件区块会被解析）->4. 默认模板页(default.html)<require file="header.html"> <!-引入公共的头部（头部的挂件区块会被解析）->&

17、lt;div class=”main”><div class=”content clearfix”> <div class=”span-4 m-l”><widgets id=m-l><!-预留一片左侧挂件区-> </div> <div class=”span-10 m-r”><main><!-系统级区域输出（可能会是：会员中心、购物流程、商品搜索结果、商品详情、文章）-> </div></div></div><require file="fo

18、oter.html"> <!-引入公共的底部（底部的挂件区块会被解析）->5. 边框文件夹 （borders） 应该建立 borders文件夹， 来存放 一个个的边框 html，html属性应统一用双引号，防止出现模板解析异常例如：borders/border1.html<div class="border1 <$widgets_classname>" id="<$widgets_id>"><!-将输出被包装挂件板块在后台定义的边框 className、id-> <h3&g

19、t;<$title> <!-将输出被包装挂件板块在后台定义的标题-> </h3> <$body> <!-将输出被包装挂件板块内容-> </div>6. 资源文件夹 （images）存放模板资源文件，例如cssjs图片、swf7. 一张模板效果图（preview.jpg）模板效果图是一张直观的模板效果图片（120160 px）,可以在管理后台模板列表看到它以区分模板。标准模板包的备份与还原theme.xml 与theme_bak.xml 的介绍与功能在上述中theme.xml为一个新标准模板包的必要文件，而theme_bak

20、.xml是模板备份后所产生的文件。（如下图, 一个新模板包内只有theme.xml文件,当使用了在管理后台通过模板列表上的 “备份模板” , “模板还原” 下拉框中会增加一个 “最近一次备份” 节点。）将两个.xml文件进行修改比较（如下为theme.xml内的代码）<?xml version="1.0" encoding="UTF-8" ?><theme><name>风尚购物</name><id>fsgw</id><version>ECStore</version

21、><info></info><author>ShopEx</author><site></site><update_url></update_url><borders><set key="边栏样式111111" tpl="borders/border1.html" /><set key="商品分类" tpl="borders/border2.html" /><set key

22、="商店公告" tpl="borders/border3.html" /><set key="品牌热卖排行" tpl="borders/border4.html" /><set key="热销排行" tpl="borders/border5.html" /><set key="首页商品列表" tpl="borders/border6.html" /><set key="页尾文章列

23、表" tpl="borders/border9.html" /></borders>（如下为theme_bak.xml内的代码）<?xml version="1.0" encoding="UTF-8" ?><theme><name>风尚购物</name><id>fsgw</id><version>ECStore</version><info></info><author>Sho

24、pEx</author><site></site><update_url></update_url><borders><set key="边栏样式222222" tpl="borders/border1.html" /><set key="商品分类" tpl="borders/border2.html" /><set key="商店公告" tpl="borders/border3.ht

25、ml" /><set key="品牌热卖排行" tpl="borders/border4.html" /><set key="热销排行" tpl="borders/border5.html" /><set key="首页商品列表" tpl="borders/border6.html" /><set key="页尾文章列表" tpl="borders/border9.html" /

26、></borders>接下来进入管理后台通过模板列表上的 “模板还原” 至 “默认” 节点（如下图）再将 “模板还原” 至 “最近一次备份” 节点（如下图）每一次的 “备份模板” 的操作，是以数据库存储的信息备份以及配置覆盖到theme_bak.xml 文件内，而此操作是不对原始的theme.xml 文件进行修改，覆盖。标准模板包必要的文件结构标准模板包必要的文件结构生成工具 你可以在线生成一个基础的模板包 模板包的首次加载模板开发测试环境目前模板的开发测试环境比较重要的一个地方就是网店的后台。如果你在做模板的开发，请先在管理后台应用中心安装一个应用程序：开发者工具app.安

27、装方法：点击管理后台右上 “应用中心入口”，找到“开发者工具”，进行安装;之后，你将在模板列表上方看到”维护“按钮。模板包的首次加载当首次构建好基础模板包。此刻应将模板文件夹复制到网店模板目录既：/themes下这时你的模板列表中将出现此模板的记录（如下图）首次的模板加载应通过文件夹复制的方式放置到指定位置（/themes/）下。不应该直接将其以压缩包的形式通过模板上传加载。完善模板包为模板添加页面布局上文提到我们仅构建了标准的模板包。下面我们应为某些页面添加更丰富的布局页面文件（如下图）添加页面布局文件时需要输入名称、文件名、和页面源码名称可以理解为对文件的备注，文件名会自动追加.html后

28、缀,页面源码会模板复制 默认布局页源码。在此可以修改html源码页可以只输入 名称和文件名先生成html文件到模板包。统一用其他工具编辑页面源码。为模板布局页添加挂件 系统级常用挂件表分类名称简介挂件的添加和配置（下图：版块中心）（下图：挂件配置面板）挂件的添加在模板页面可视化编辑中进行。添加挂件的基本交互：选择目标版块区域（一个挂件版块区域可以挂入多个挂件版块）选择挂件版块类型 配置版块标题（版块标题将会在边框中以<$title>调用，如果版块边框样式为无边框，则标题不会出现于前台）挂件版块模板选择（一个挂件可以由多个对应模板供选择）边框样式选择边框属性配置（classNameI

29、D）挂件相关配置（例如商品挂件，可以配置商品显示范围、数量、价格精度等）挂件添加后可以进行编辑 位置移动等操作。注意事项公用头部和底部被挂入的挂件版块将共享于所有引入头部底部文件的页面。如果要在源码编辑删除 一个<widgets>（挂件版块区域）标签，请先在可视化编辑中删除此区域中的所有的挂件实例。模板可视化编辑结束后，注意保存编辑成果。创建一个模板级挂件当系统内置的挂件不能满足你的要求时，你可以自己动手建立一个挂件创建一个模板级挂件的必备文件结构 配置页（_config.html） 配置页是在可视化编辑时用到的配置表单。 配置页拦截器（theme_widget_cfg_widge

30、tname.php）可选 配置页拦截器用于向配置页输出系统数据，例如输出一个系统当前的商品排序方式数组。供页面 <select>填充选择。 如果配置页不需要从系统内取得数据，则 此拦截器无需制作。 挂件拦截器(theme_widget_widgetname.php)挂件拦截器，用于向挂件模板供应后端数据 挂件描述文件（widgets.php）用于描述挂件基本信息，挂件模板文件、名称对应关系。 挂件渲染模板 （widgettpl1.html. widgettplN.html）一个或多个挂件模板，需要在挂件描述文件中被描述，以便可视化编辑时选择挂件使用的模板。 可视化编辑占位模板 （_

31、preview.html）可选此页面用于在可视化编辑时占位，例如广告挂件由许多效果和图片资源加载，在可视化编辑时影响效率，可以用此页面来代替挂件的渲染，但是挂件拦截器同样会把数据抛向此页面，你可以只取得一些尺寸信息，用边框和文字代替挂件。如果挂件不需要在可视化编辑模式重定义，则无需制作此页创建一个模板级挂件mywidgetmywidget 挂件的目的是实现一个根据管理员的配置在前台显示一组商品信息。1. 在模板目录建立 widgets文件夹2. 在widgets文件夹内创建mywidget文件夹，并进入文件夹3. 创建挂件描述文件widgets.php<?php/*挂件的描述文件*/$s

32、etting'author'='挂件作者'$setting'version'='v1.0'$setting'name'=”我的第一个挂件”;$setting'stime'='2010-12-12'$setting'catalog'=“风尚购物模板的挂件”;$setting'description' =”我的第一个挂件的描述”;$setting'usual' = '1' /是否出现在挂件中心首页.(10)$setting&

33、#39;template' = array( 'default.html'=>HTML展示， 'flash.html'=>用flash展示 ); /挂件包含的模板文件和名称?>4. 创建挂件配置页 _config.html （命名规则定死_config）<!-编写挂件配置页html时候，不需要body title form等 html标签 。此代码块共享 管理后台的 资源（javascriptcss）。_config.html代码块只是挂件配置对话框中的一部分。 下列代码中的 $data 数组 由挂件配置页拦截器返回， smart

34、y 协助抛向页面。$setting数组 是被保存在数据库中的配置信息由系统取出，smarty协助抛向页面。 -> <div class="division"> <h4>商品展示规则</h4><label>排序规则：</label><select name="orderby"> <foreach from=$data item=orderby key=key> <option value="<$key>" <if $sett

35、ing.goods_orderby=$key>selected</if>><$orderby.label> </option></foreach></select><label>展示数量：</label><input name=”limit” value=”<$setting.limit>” /> </div>5. 创建挂件配置页拦截器（用于取得系统相关数据）theme_widget_cfg_mywidget.php （命名应于内部代码函数名保持一致）<?p

36、hp/*命名规范 以“theme_widget_cfg_”开头，挂件包名结尾。运行时系统会传入一个参数，方便创建 model 等实例 ，用于取得数据 */function theme_widget_cfg_mywidget() $app = app:get(b2c); /创建app实例,这里要用到b2c这个app下的goods model所有创建b2c app实例 $model_goods=$app->model('goods'); /创建goods model实例 return $model_goods->orderBy(); /返回商品排序规则datemap,在

37、挂件配置模板smarty标签中，统一用 $date 获得?>6. 创建挂件模板default.html (命名规则应与widget.php挂件描述文件中 $setting'template' 保持一致)<!-挂件模板同挂件配置模板页一样，都是一个代码片段，无需加入bodytitle等html标签。挂件模板中的 <style></style>中定义将会合并到一个css文件中被引入到<head>头部（例如一个模板布局页面同时挂了两个 mywidget）。挂件模板中的 image/ 将会被替换为绝对路径，你可以在挂件包中创建一个imag

38、es文件夹用来存放挂件相关的资源。例如 <style>#<widgets_id>_mywidge background:url(images/bg.png) </style>，在渲染到前台时，系统将自动替换images/为绝对路径。-><div class="GoodsListWrap GoodsList GoodsShow" id=<$widgets_id>_mywidget><if count($data.goods) > 0> <dl> <foreach from=$

39、data.goods item=product name=goodslist> <dd>商品名称：<$><br />商品价格：<i><$product.price|default:'0'></i>元 </dd> </foreach></dl><else> <div class='notice'>暂无商品数据</div></if></div>7. 创建挂件拦截器them

40、e_widget_mywidget.php (命名应于内部代码函数名保持一致)<?php/*命名规范 以“theme_widget_”开头，挂件包名结尾。运行时系统会传入挂件配置信息 */function theme_widget_mywidget(&$setting,&$render) $app = app:get(b2c); $o = &app->model('goods'); $limit = (intval($setting'limit')>0)?intval($setting'limit'):6

41、; $orderby=$setting'goods_orderby'?$o->orderBy($setting'goods_orderby'):null; $filter = array(); $data'goods' = $o->getList('*',$filter,0,$limit,$orderby'sql'); return $data; /根据挂件配置信息，取出数据 返回给挂件模板?>8. 创建可视化编辑占位模板_preview.html (命名规则定死_preview)<!-这个

42、文件只用于模板可视化编辑时，如某些情况不方便直接将挂件呈现于可视化编辑视图。则可以创建此文件在可视化编辑中代替挂件真实显示-><div class="note">我的第一个挂件</div>模板级挂件绑定到模板当创建好一个模板级挂件。可以在管理后台通过模板列表上面的 “维护” 按钮绑定挂件到模板。（如下图，经过绑定维护后）挂件中心可以看到了测试我的第一个挂件下图为挂件配置对话框，上文提到，_config.html正式挂件版块配置时的一部分，在挂入到模板挂件区域时，你还可以包装挂件所使用的边框，挂件版块所使用的挂件模板等信息。可视化编辑中被挂入到挂

43、件版块后。（由于我的第一个挂件定义了_preview.html）所以可视化编辑时和前台真实效果有区别。做一下模板编辑保存，看一下前台的效果吧选择其他边框和挂件配置保存，再看一下效果。系统级资源的重用重用脚本框架在制作模板、挂件 的过程中，你可以随时使用 脚本框架 Mootools 的公开接口，它提供了强大的节点寻找、强化了javascript数组、封装了异步交互。重用系统级样式表我们在前台引入了一个简单的 样式表封装(frameworks.css)、里面有常用的布局、浮动、字体、内外补丁 等class定义。重用前端效果库封装前台有一个 强大的效果库封装（switchable.js），它提供了大部分广告效果的轻松实现机制。还提供了区块、图片延迟加载等机制。系统级区域<main>的修改创建一个模板级的系统区域当系统内置的挂件不能满足你的要求时，你可以自己动手建立一个模板级的系统级区域。1. 在模板目录建立customsite文件夹。2.

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论