ECOS模板制作详细手册 For Ecstore、Shopexport.doc

公司ECOS模板制作详细手册For Ecstore、Shopexport报告名称2目录概述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一张模板效果图（preview.jpg）9标准模板包的备份与还原9标准模板包必要的文件结构12标准模板包必要的文件结构生成工具13模板包的首次加载13模板开发测试环境13模板包的首次加载13完善模板包15为模板添加页面布局15为模板布局页添加挂件16系统级常用挂件表16挂件的添加和配置16注意事项18创建一个模板级挂件18创建一个模板级挂件的必备文件结构18创建一个模板级挂件mywidget18模板级挂件绑定到模板23测试我的第一个挂件24系统级资源的重用26重用脚本框架26重用系统级样式表26重用前端效果库封装26系统级区域的修改27创建一个模板级的系统区域27i概述基于ShopEx的模板机制体系之上的全新制作体系了解ShopEx48版本等的开发技术基地下，ECOS的模板基于ShopEx48版本机制之上颠覆性的创新，更人性化将每个功能页面，以及精细至功能挂件可自定义制作修改，满足不同行业理念的制作需求。模板路径模板路径是ECOS安装目录/themes/模板目录构成进入到某一套模板目录中后，就可以看到该模板的目录和文件结构了:模板机制中的名词解释挂件区域（widgets）挂件区域用于在某个页面预留挂件(widget)可挂入的区域。也可以理解为“插槽”、“坑”。每个挂件区域可以挂入多个挂件挂件（widget）挂件是ShopEx模板机制中的一个重要角色，它能根据条件从后端取得数据然后根据“挂件级页面模板”来包装成一个小板块。例如一个“商品板块挂件”，它要先由后端语言（php）来组织数据，然后返回到“挂件级页面模板”。组织数据的条件将会独立出一个可配置页面。边框（border）边框用于包装一个挂件板块，一套模板里面可能由很多个边框风格，这些风格的名称和对应的边框文件 需要定义在模板的描述文件（theme.xml）中，以便可视化编辑时改变一个板块的风格。例如一个“商品板块挂件”在首页要以三种不同的风格展示（促销、热门、新品.），除了需要在挂件的配置面板中配置数据的展示范围不同，还需要由边框机制的配合达到颜色风格的区别。特别是一些系统级挂件，为了适应不同模板的展示方式，默认不会输出标题和边框，边框则可以协助包装一下挂件挂入到挂件区域。系统级区域（main）系统级区域用于输出系统的核心交互流程。这些区域的htmljavascript是不能在模板包中直接定义的，模板包唯一能影响到这些系统级区域的是 css样式定义，因为模板包的样式表是在系统级样式之后加载。默认模板页 （default.html）默认模板页是在模板包中 未定义某个页面的布局时，默认调用的页面布局。例如你的模板包中只包含了两个页面的定义：首页、默认页，那么其他未定义的页面在访问时将优先使用默认模板页，直到你单独定义它为止。创建一个模板包标准模板包必要的文件创建一个模板包文件夹，例如 fsgw新模板包文件夹的名称应与描述文件中的 id保持一致，并且应该由数字和英文小写组成。在模板包文件夹内创建以下文件：3r 1. theme.xml此文件用来描述模板包的基本信息，以及模板可能包含的挂件。还用于模板的备份导出，和导入操作中的模板数据交换。例如：风尚购物fsgwECStoreShopExxml节点说明name模板包的名称,将会出现在管理后台模板列表中id首次由开发人员定义，应与模板包名称保持一致,（全英文）version模板包的版本信息info模板包简介author模板包作者site模板包作者网址update_url升级地址，暂未启用borders模板包包含的边框定义描述widgets模板挂件描述。系统会在模板可视化编辑添加挂件后向widgets序列化挂件描述此表只描述最关键的几个节点项2. 每个模板页将用到的公共页面引用 (header.html、footer.html)例如:（header.html） Welcome 例如:（footer.html） 3. 首页模板（index.html）例如 商品分类 4. 默认模板页(default.html) 5. 边框文件夹 （borders） 应该建立 borders文件夹， 来存放 一个个的边框 html，html属性应统一用双引号，防止出现模板解析异常例如：borders/border1.htmldiv class=border1 id= 6. 资源文件夹 （images）存放模板资源文件，例如cssjs图片、swf7. 一张模板效果图（preview.jpg）模板效果图是一张直观的模板效果图片（120160 px）,可以在管理后台模板列表看到它以区分模板。标准模板包的备份与还原theme.xml 与theme_bak.xml 的介绍与功能在上述中theme.xml为一个新标准模板包的必要文件，而theme_bak.xml是模板备份后所产生的文件。（如下图, 一个新模板包内只有theme.xml文件,当使用了在管理后台通过模板列表上的 “备份模板” , “模板还原” 下拉框中会增加一个 “最近一次备份” 节点。）将两个.xml文件进行修改比较（如下为theme.xml内的代码）风尚购物fsgwECStoreShopEx（如下为theme_bak.xml内的代码）风尚购物fsgwECStoreShopEx接下来进入管理后台通过模板列表上的 “模板还原” 至 “默认” 节点（如下图）再将 “模板还原” 至 “最近一次备份” 节点（如下图）每一次的 “备份模板” 的操作，是以数据库存储的信息备份以及配置覆盖到theme_bak.xml 文件内，而此操作是不对原始的theme.xml 文件进行修改，覆盖。标准模板包必要的文件结构标准模板包必要的文件结构生成工具 你可以在线生成一个基础的模板包 /createtheme/模板包的首次加载模板开发测试环境目前模板的开发测试环境比较重要的一个地方就是网店的后台。如果你在做模板的开发，请先在管理后台应用中心安装一个应用程序：开发者工具app.安装方法：点击管理后台右上 “应用中心入口”，找到“开发者工具”，进行安装;之后，你将在模板列表上方看到”维护“按钮。模板包的首次加载当首次构建好基础模板包。此刻应将模板文件夹复制到网店模板目录既：/themes下这时你的模板列表中将出现此模板的记录（如下图）首次的模板加载应通过文件夹复制的方式放置到指定位置（/themes/）下。不应该直接将其以压缩包的形式通过模板上传加载。完善模板包为模板添加页面布局上文提到我们仅构建了标准的模板包。下面我们应为某些页面添加更丰富的布局页面文件（如下图）添加页面布局文件时需要输入名称、文件名、和页面源码名称可以理解为对文件的备注，文件名会自动追加.html后缀,页面源码会模板复制 默认布局页源码。在此可以修改html源码页可以只输入 名称和文件名先生成html文件到模板包。统一用其他工具编辑页面源码。为模板布局页添加挂件 系统级常用挂件表分类名称简介挂件的添加和配置（下图：版块中心）（下图：挂件配置面板）挂件的添加在模板页面可视化编辑中进行。添加挂件的基本交互：选择目标版块区域（一个挂件版块区域可以挂入多个挂件版块）选择挂件版块类型 配置版块标题（版块标题将会在边框中以调用，如果版块边框样式为无边框，则标题不会出现于前台）挂件版块模板选择（一个挂件可以由多个对应模板供选择）边框样式选择边框属性配置（classNameID）挂件相关配置（例如商品挂件，可以配置商品显示范围、数量、价格精度等）挂件添加后可以进行编辑 位置移动等操作。注意事项公用头部和底部被挂入的挂件版块将共享于所有引入头部底部文件的页面。如果要在源码编辑删除 一个（挂件版块区域）标签，请先在可视化编辑中删除此区域中的所有的挂件实例。模板可视化编辑结束后，注意保存编辑成果。创建一个模板级挂件当系统内置的挂件不能满足你的要求时，你可以自己动手建立一个挂件创建一个模板级挂件的必备文件结构 配置页（_config.html） 配置页是在可视化编辑时用到的配置表单。 配置页拦截器（theme_widget_cfg_widgetname.php）可选 配置页拦截器用于向配置页输出系统数据，例如输出一个系统当前的商品排序方式数组。供页面 填充选择。 如果配置页不需要从系统内取得数据，则 此拦截器无需制作。 挂件拦截器(theme_widget_widgetname.php)挂件拦截器，用于向挂件模板供应后端数据 挂件描述文件（widgets.php）用于描述挂件基本信息，挂件模板文件、名称对应关系。 挂件渲染模板 （widgettpl1.html. widgettplN.html）一个或多个挂件模板，需要在挂件描述文件中被描述，以便可视化编辑时选择挂件使用的模板。 可视化编辑占位模板 （_preview.html）可选此页面用于在可视化编辑时占位，例如广告挂件由许多效果和图片资源加载，在可视化编辑时影响效率，可以用此页面来代替挂件的渲染，但是挂件拦截器同样会把数据抛向此页面，你可以只取得一些尺寸信息，用边框和文字代替挂件。如果挂件不需要在可视化编辑模式重定义，则无需制作此页创建一个模板级挂件mywidgetmywidget 挂件的目的是实现一个根据管理员的配置在前台显示一组商品信息。1. 在模板目录建立 widgets文件夹2. 在widgets文件夹内创建mywidget文件夹，并进入文件夹3. 创建挂件描述文件widgets.phpHTML展示， flash.html=用flash展示 ); /挂件包含的模板文件和名称?4. 创建挂件配置页 _config.html （命名规则定死_config） 商品展示规则排序规则： option value= selected 展示数量：input name=”limit” value=” / 5. 创建挂件配置页拦截器（用于取得系统相关数据）theme_widget_cfg_mywidget.php （命名应于内部代码函数名保持一致）model(goods); /创建goods model实例 return $model_goods-orderBy(); /返回商品排序规则datemap,在挂件配置模板smarty标签中，统一用 $date 获得?6. 创建挂件模板default.html (命名规则应与widget.php挂件描述文件中 $settingtemplate 保持一致)!-挂件模板同挂件配置模板页一样，都是一个代码片段，无需加入bodytitle等html标签。挂件模板中的 中定义将会合并到一个css文件中被引入到头部（例如一个模板布局页面同时挂了两个 mywidget）。挂件模板中的 image/ 将会被替换为绝对路径，你可以在挂件包中创建一个images文件夹用来存放挂件相关的资源。例如 #_mywidge background:url(images/bg.png) ，在渲染到前台时，系统将自动替换images/为绝对路径。-div class=GoodsListWrap GoodsList GoodsShow id=_mywidget 0 商品名称：商品价格：元 暂无商品数据7. 创建挂件拦截器theme_widget_mywidget.php (命名应于内部代码函数名保持一致)model(goods); $limit = (intval($settinglimit)0)?intval($settinglimit):6; $orderby=$settinggoods_orderby?$o-orderBy($settinggoods_orderby):null; $filter = array(); $datagoods = $o-getList(*,$filter,0,$limit,$orderbysql); return $data; /根据挂件配置信息，取出数据 返回给挂件模板?8. 创建可视化编辑占位模板_preview.html (命名规则定死_preview)我的第一个挂件模板级挂件绑定到模板当创建好一个模板级挂件。可以在管理后台通过模板列表上面的 “维护” 按钮绑定挂件到模板。（如下图，经过绑定维护后）挂件中心可以看到了测试我的第一个挂件下图为挂件配置对话框，上文提到，_config.html正式挂件版块配置时的一部分，在挂入到模板挂件区域时，你还可以包装挂件所使用的边框，挂件版块所使用的挂件模板等信息。可视化编辑中被挂入到挂件版块后。（由于我的第一个挂件定义了_preview.html）所以可视化编辑时和前台真实效果有区别。做一下模板编辑保存，看一下前台的效果吧选择其他边框和挂件配置保存，再看一下效果。系统级资源的重用重用脚本框架在制作模板、挂件 的过程中，你可以随时使用 脚本框架 Mootools 的公开接口，它提供了强大的节点寻找、强化了javascript数组、封装