模板级挂件

模板级挂件原理

系统开启模板级挂件机制的原理,其实也是一个业务产品的逻辑转化过程:

即系统文件不包含挂件交付给客户,因为挂件的最终载体为模板,最终的呈现效果也是呈现在模板上,所以理论上来讲,挂件应该是跟随ShopEx的模板一起打包交付的。这样一来可以避免一些产品交付上的问题,也可以避免一下因客户持续未升级而导致的挂件滞后未更新。


该机制主要还是将挂件放入模板内,打包交付给客户。

模板级挂件命名规范

一、文件规范

  • 1.模板级挂件必须放在其对应模板文件夹的widgets目录下,且开发者必须保持挂件名称在单个文件夹中的独立性和唯一性。
  • 2.模板级挂件根目录中允许有_config.html、default.html、widget.php、theme_widget_NAME.php和images文件夹这5个根文件,Images文件夹下必须要有对应挂件视觉效果的icon.jpg和widget.jpg。且在images文件夹中,仅允许加入png、gif、jpg三种形式的图片文件,及其他一些该挂件可自带的banner图片。除此之外,不允许加入其他任何形式的文件。
  • 3.挂件的html文件中,请将挂件样式用style标签的方式写在html顶端,EcStore系统加载时,会直接将挂件样式提取出来。我们鼓励原创,但不提倡开发者自行添加会与mootools产生冲突的javascript代码。
  • 4.系统的PHP文件中仅允许书写官方开放的获取底层API的PHP代码,若有其他任何不明代码,将直接打回。

二、命名规范1.挂件名称

  • 官方不做强制规定,仅出于管理考虑做一个约定,默认将挂件根据其相关类型分为以下大类别,约定命名方式:

挂件类型命名规范
商品挂件goods
商品分类挂件goodscat
文章挂件artcile
广告挂件ad
系统基础挂件basic
其他挂件other
  • 如:有一个促销商品挂件,名称为special,我们选择其命名前缀为goods,用下划线“_”隔开
  • 那么该挂件文件夹名称为: goods_special
  • Ps:当一个挂件包含两个或两个以上类型,以其主要展示类型为约定命名方式。
    当两个挂件仅有少部分差别点,挂件命名可考虑数字结尾突出其差异性。
    如:goods_special001    goods_special002    goods_special003

2.文件名称

挂件文件夹内固定文件(文件名固定):

固定文件名称名称详解
default.html挂件输出页面
config.php用户配置页面
widget.php挂件基本信息
theme_widget_Name.php获取底层数据文件
icon.jpg挂件示意图 50px*50px
widget.jpg挂件预览图 300px*300px
其中images文件夹下至少包含icon.jpg和widget.jpg这2个文件(文件名固定):

3.default文件内样式命名规范:

  • 在没有引用javascript的前提下,挂件内部请尽量不要写入id
  • Class命名规范原则参照ShopEx官方提供的文档:
    参考网址:http://wiki.zx.shopex.cn/advance/css.html#id3
  • 需要特别说明的是:为避免样式污染,请在每个挂件的样式前加入前缀。
    如,需要定义goods_special挂件内class为one下的p标签行高20px:
    挂件内写法: .one p{line-height:20px;}
    建议写法:. goods_special .one p{ line-height:20px;}
    将来系统应该能做到自动生成。

4.config.php文件

  • 如basic_member 系统基础挂件-会员登录 样例:
$setting['author']='jxwinter'; 
$setting['name']='会员注册/登录'; 
$setting['version']='1.0.0'; 
$setting['stime']='2012-04-10'; 
$setting['catalog']='系统基础挂件'; 
$setting['usual'] = '5'; 
$setting['description']='会员注册/登录挂件,方便商家积累老客户'; 
$setting['userinfo']='您只需配置欢迎词即可。' 
$setting['template'] = array(                             
		'default.html'=>app::get('b2c')->_('默认')                         
   ); 
  • 该文件中必须含有挂件的功能说明$setting[description]和使用说明$setting[userinfo]。
  • Auther请自行填写
  • Name 请根据挂件实际内容填写
  • Version 明确表明版本号码,版本号最多3位
  • 版本号码规范:小写字母“v” + “版本号码” 如:v1.0 v1.2.1
  • Stime 制作时间,请按格式填写 年-月-日 2012-04-10
  • Catelog 挂件类型,请严格按照类型命名规范填写
  • Usual 排序 (选填)
  • Description 挂件描述(功能说明)
  • Userinfo 用户告知(使用说明)
  • Template =array(‘default.html’=>*****) 默认显示模板。固定写法,无需更改。

三、代码规范

  • Html代码: html代码请严格遵守W3C标准。
  • Css代码:若无用户配置的情况,原则上不允许书写行内样式,且所有模板级挂件样式写在default.html的最顶部,用style标签包含,EcStore系统在加载时,会自动提取挂件内部的样式,加载在页面头部。
  • PHP代码:仅允许书写系统开放的API接口。

模板级挂件制作

前面我们看了制作规范,现在来带大家做一个基本的商品挂件~~HOHO

先从PHP文件开始:

例如:需要制作一个商品的测试挂件,名称定为goods_demo(参照命名规范)

  • 1.widgets.php文件,这个文件没有特别要说的,一切请参照命名规范,
    若您无法参照规范制作,我们也无法参照规范审核~~~~~敬请谅解`````
  • 2.theme_widget_goods_demo.php文件
    文件名称以theme_widget开头,以挂件文件夹名称结尾,中间“_”号连接 这个文件用于从系统底层获取数据。我们看下文件源码:

<?php
function theme_widget_goods_demo(&$setting,&$render){
	$data = b2c_widgets::load('Goods')->getGoodsList($filter);    // 根据条件获取商品数据
	return $data;                                                 // 返回数据
}
?>
非常简单~~只需要固定头部的写法,function的内容为文件的名称,
$data是数据,$data后的内容从数据接口那边过来,里面的$filter问筛选器
底部只需要返回数据 return $data即可将系统底层数据抛给挂件。

这里插一下介绍一下filter

      $filter = array(
		'goodsNum' => $setting['goodsNum'], 
		// 前面的goodsNum为系统底层开放API,后面的setting值里的goodsNum为变量
		 );
这里的filter写法完全支持PHP写法,支持一维数组和二维数组。<br />上面的例子里,是最简单的设置商品选择数量的方法。<br />

做好了获取数据的PHP文件,下面我们可以制作页面输入文件了:default.html 需要注意的是,在ShopEx48系列中,我们的系统支持挂件内多个页面输出模板。而在EcStore1.2的模板机制中,建议大家也只选用1个页面输出模板。我们看代码

<h3><{$setting.title}></h3>
<ul class="clearfix">
	<{assign var="do" value='1'}>
	<{foreach from=$data.goodsRows item=goodsdemo key=key}>
	<li class="class-<{$do++}>">
		<div class="pic">
			<a title="<{$goodsdemo.goodsName}>" href="<{$goodsdemo.goodsLink}>">
			<img src="<{$goodsdemo.goodsPicS}>" width="<{$setting.width}>" height="<{$setting.height}>"/>
			</a>
		</div>
		<h4 class="name">
			<a title="<{$goodsdemo.goodsName}>" href="<{$goodsdemo.goodsLink}>">
				<{$goodsdemo.goodsName}>
			</a>
		</h4>
		<span class="mktPrice">原价:¥<{$goodsdemo.goodsMarketPrice}> 元</span>
		<span class="salePrice">现价:¥<{$goodsdemo.goodsSalePrice}> 元</span>
	</li>
	<{/foreach}>
</ul>

先从foreach说起

  • 1.from=$data.goodsRows 得到数据
    解释:$data为PHP文件中返回的数据,因为返回的是商品数据,在数据接口中,商品数据都是存在goodsRows下的数组里,
    所以获取数据写法为from=$data.goodsRows
  • 2.item=goodsdemo 定义变量
    解释:定义goodsdemo为你想要的变量,该变量无实际意义,仅为foreach中循环梳头的抬头
  • 3.<{$goodsdemo.goodsName}> smarty循环
    解释:前面的$goodsdemo为变量输出,后面的goodsName取自数据接口的商品名称。
    其他类似于<{$goodsdemo.*****}>的写法,请参战开放的系统底层数据接口。
  • 4.<{$setting.width}> setting设置
    解释:这里的setting设置跟下面提到的_config.html文件有直接关系,这里的$setting为固定写法,“width”为input中的name值
  • 5.<{$do++}> 简单的assign循环
    解释:我们看到前面有一句<{assign var="do" value='1'}>,定义do的值为1
    那么依次循环出来的值为 1 2 3 4..这样开发者就可以自行定义每一个元素循环输出的样式

_config.html文件:这是挂件的配置文件,可以配置什么样的参数,都在这里配置

<input type="text" value="<{$setting.title|default:挂件标题}>" name="title" size="30"/>

	//name为title的input~~用户填写的值 保存后 为<{$setting.title}>,
	//若用户不填,默认显示 挂件标题 这4个字

其他可设置的参数,发挥你们的想象把~~

系统基础挂件SVN check权限

由于在EcStore系统中,我们去除了系统自带挂件,

改而将一批已经做好的模板挂件放在ecae的SVN上,供开发者下载;

下面放出SVN check权限:

svn目录为:http://scm.ec-ae.com/base-widget/trunk
用户名:testwidget
密码: 12345678
序言·神功入门
产品模板制作区别
模板机制概括
模板开发环境/流程
模板速成篇
上卷·ShopEx48模板开发
Html规范
Css规范
Javascript规范
模板制作
边框制作
简单的smarty语法
下卷·EcStore1.2模板开发
机制更新/申请SDK开发包
模板级挂件
精确选择商品接口
模板级页面拦截
边框机制的开启与隐藏
Mootools框架及效果实例
结尾·模板堂平台
模板堂平台介绍
申请成为模板开发者
开发者服务协议
模板定制服务
模板审核规范
EDM模板制作规范
开发者认证/分成/违规