模板级页面拦截

在EcStore1.2中,为更大限度的让开发者能够定义每个页面,而又不影响系统整体的升级,我们开放了“模板级页面拦截机制”和“详细页拦截页面参数”,有了这些,您在模板里的风格定义,将有更加丰富的选择!

模板级页面拦截机制

在ShopEx的模板机制中,您应该已经对那些“系统流程区域”并不陌生,平时只管一个smarty的“<{main}>”就可以完成模板制作,

但是有些VIP级别的客户,在商品的详细页或者列表页,往往有更高级的定制需求,

为了不影响到系统内其他模板的风格设定,我们给开发者提供了模板级的页面拦截机制。

您可以在您的模板包里创建一个文件,用该文件拦截系统页面。

例如:若您需要拦截并制作一个自定义的商品详细页
  • 1.在模板文件夹中创建一个custom文件夹
  • 2.先找到系统详细页的位置,app\b2c\view\site\product\index.html
  • 3.将该页面复制进custom文件夹中,修改名称为product-index.html
  • 4.将product-index.html文件进行合理的修改,加入您需要的内容
  • 5.关联模板,在theme.xml文件中加入参数配置:如下
<?xml version="1.0" encoding="UTF-8" ?>
<theme>
	<name>极致简约框架版</name>
	<id>simple</id>
	<version>ECStore-启明星</version>
	<author>ShopEx-Jxwinter</author>
	<site>http://www.shopex.cn</site>
	<borders>
	</borders>
	<views>
	<set app="b2c"  view="site/product/index.html"   tpl="custom/product-index.html" />
          //在b2c这个app中,site/product/index.html这个文件,
          //被模板里的ccustom/product-index.html所替换
	</views>
	<config>	  
	</config>
</theme>


这样,在不影响系统文件的前提下,只改模板中的文件,就可以做到改动系统流程区域了。

商品详细页多Main区域

在系统流程区域中,我们的系统流程(即<{main}>内容区)为一个整体,

但是在某些业务场合,他们可能会出现分割的情况;

如商品详细页,在商品详细页的头部,产品的图片和基本属性很有可能是通栏,

而在商品的内容介绍区,系统流程区域可能并非占据整个通栏,而只是较大的那一块区域,

而较小的侧边栏,则可以让客户添加其他的挂件区域。


这种机制,在ShopEx48区域下,明显是无法实现的,

在EcStore1.2版本的机制中,我们做了一下改进,支持系统多<{main}>的内容区域!

我们的制作原理也是比较简单的拆分过程,通过代码注视找到拆分点。

例如:若您需要拦截并制作一个自定义的商品详细页<ul><li>1.在模板文件夹中创建一个custom文件夹</li><li>2.先找到系统详细页的位置,app\b2c\view\site\product\index.html</li><li>3.将该页面复制进custom文件夹中,找准上下内容的拆分点。</li><li>4.将页面拆分为product1.html和product2.html</li><li>5.模板中的商品详细页模版通过view的方式,插入这两个文件:如下</li></ul>

<{require file="block/header.html"}>
	<div class="main w960">
		<div class="btm10">
			<{main view="custom/product-top.html"}>
			<{*  插入商品详细页属性  *}>
		</div>
		<div class="clearfix">
			<div class="w250 fl">
				<div class="related-porduct"><{widgets id="product-left"}></div>
			</div>
			<div class="w700 fr">
				<{main view="custom/product-btm.html"}>
				<{*  插入商品内容  *}>
			</div>
		</div>
	 </div>
<{require file="block/footer.html"}>

商品详细页拦截页面参数

该机制较为复杂~~~,请有能力的开发者量力而行!、接着上面的多main区域,若有部分区域需要重新定义,比如相关商品区域,您可以找到相应的文件路径。

例如:若您需要拦截并制作一个相关商品区域:

  • 1.在模板文件夹中创建一个custom文件夹
  • 1.在custom文件夹下创建文件product-xg.html
  • 3.先找到相关商品区域的最外层名称-即文件名称goodslink.html
  • 4.在详细页的JS参数里找到goodsLink的配置;加入view参数如下:
寻找到goodslink(或者你也可以通过class名称或者id名称寻找)
<{if $goods.goodslink && $goods.goodslink>0}>
      goodsLink:{append:$('app_area'),name:'goodsLink'},
<{/if}>

我们可以在其后面的页面中加入view参数:
<{if $goods.goodslink && $goods.goodslink>0}>
      goodsLink:{append:$('app_area'),name:'goodsLink',view:'custom/product-xg.html'},
      //使用模板里的custom/product-xg.html文件,替换系统goodslink文件。
<{/if}>

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