ISC的模板文件架构和模板编写方法
用户评价: / 25
好 
作者:深圳网站建设   
周六, 2010年 01月 16日 22:26
ISC也就是Interspire Shopping Cart, 是一个基于php+mysql的商业的网店程序。虽然没有Zen-CartosCommerce 的用户数据庞大,但凭借其安装简单,功能强大,界面友好的特点,我相信会有越来越多的人喜欢。
ISC程序本身有很多模板可以选择,但网店的特殊性,都希望自己的网店跟别人的不一样,修改模板也是很正常的事。最近在做一个项目,应用了Interspire Shopping Cart,因为只是对模板文件是修改,大概了解了一下ISC的文件架构和模板调用的流程。
模板文件都在/templates下面,默认调用的是default模板,可以在后台的Store Design菜单中很方便的设置模板,前台马上就跟着改变,的确是很方便。一看上去Default里面有好多文件,感觉很乱,不知道从何下手。当你明白 ISC的模板调用流程以后,你就会明白每个文件的用途。
下面我们就来看一下模板文件的调用流程:
1. index.php是入口文件,主要是响应用户的操作, 默认是调用模板文件 /templates/default/default.html, 先看下defualt.html的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">%%Panel.HTMLHead%%<body><div id="Container"> %%Panel.Header%% <div id="Wrapper"> <div class="Left" id="LayoutColumn1"> %%Panel.SideCategoryList%% %%Panel.SidePopularVendors%% %%Panel.SideShopByBrand%% %%Panel.SideNewsletterBox%% %%Panel.SideLiveChatServices%% </div> <div class="Content" id="LayoutColumn2"> %%Banner.TopBanner%% %%Panel.HomeFeaturedProducts%% %%Panel.HomeNewProducts%% %%Panel.HomeRecentBlogs%% %%Banner.BottomBanner%% </div> <div class="Right" id="LayoutColumn3"> %%Panel.SideCartContents%% %%Panel.SideTopSellers%% %%Panel.SideNewProducts%% %%Panel.SidePopularProducts%% </div> </div> %%Panel.Footer%%</div></body></html>
从上面很清楚可以看出,这是一个布局文件,加载头部以后,定义了三栏LayoutColumn1, LayoutColumn2 , LayoutColumn3. 每栏中间的%%xxx.xxxx%%是ISC自己的内容语法, 是一个一个可以独立的功能模块. 像%%Panel.SideCategoryList%% 就是显示商品分类的列表, %%Panel.HomeFeaturedProducts%%就是显示推荐商品. 可以发现ISC的模板变量都是用%%来区分, 变量点的前面"Panel"是指示变量的类型. 有"Pnanel" "Banner" "SNIPPET" 几中类型, 在布局文件中主要是就是Panel. 这种类型分别在模板文件夹中都有对应的子文件夹. 找到对应的文件名就可以看到模板的具体内容.

2. 以%%Panel.SideCategoryList%%为例,找到 panel / SideCategoryList.html 文件, 我们找开看一下:
<div class="Block CategoryList Moveable" id="SideCategoryList"> <h2>%%LNG_ProductsByCategory%%</h2> <div class="BlockContent"> <ul> %%SNIPPET_SideCategoryList%% </ul> </div> </div> 很简洁的模板代码, 就是一个列表块, 只有两个变量%%LNG_ProductsByCategory%%和 %%SNIPPET_SideCategoryList%% ,而这两个变量都在初始化Panel类的时候就会赋值.

3. 显示变量的类的文件可以在 / incudes / dispaly 里面找得到 , 我们找到 SideCategoryList.php 文件打开, 可以发现定义了 ISC_SIDECATEGORYLIST_PANEL 类, 函数 SetPanelSettings() 就是类的初始化, 把一些变量$GLOBALS数组传递给模板文件.
......$output .= $GLOBALS['ISC_CLASS_TEMPLATE']->GetSnippet("SideCategoryList");$GLOBALS['SNIPPETS']['SideCategoryList'] = $output;...... 从这里可以看出来,这是为模板变量%%SNIPPET_SideCategoryList%% 赋值$output . 而$output又是通过GetSnippet()从一个代码片断 "SideCategoryList" 里获取数据.

4. 代码片断(Snippet)的模板文件可以在 / Snippets / SideCategoryList.html 找到.
<li class="%%GLOBAL_LastChildClass%%"> <a href="/%%GLOBAL_CategoryLink%%">%%GLOBAL_CategoryName%%</a> %%GLOBAL_SubCategoryList%% </li> 就是定义了每个分类的显示样式和内容. %%GLOBAL_CategoryLink%% %%GLOBAL_CategoryName%%这些变量前面都有定义:
$GLOBALS['CategoryName'] = isc_html_escape($rootCat['catname']);$GLOBALS['CategoryLink'] = CatLink($rootCat['categoryid'], $rootCat['catname'], true);
这样整个流程就开始清晰了. ISC通过多级的模板来控制最后的输出.
布局文件(index.html) -> 功能面板(Panel) -> 代码片断 (Snippets)
其中是 Panel类和初始化是一个重要的关键点, 变量的值都是在里面定义的. 还可以通过:
$this->DontDisplay = true;来控制功能块的显示与否. 很多输出的参数也可以在里面设置 . 如 商品列表的数量,条件都可以在找到相应的代码.

明白了以上流程, 要修改模板就很简单了. 如果你只要修改整体布局,那只要找到布局文件修改就行了. 如果你要功能块的外观, 只要到Panels夹子下找到相应的文件修改就行了.
如果要增加一个功能页面也很容易,只要在要目录新建一个newpage.php :
<?php require_once(dirname(__FILE__)."/init.php"); $GLOBALS["ISC_CLASS_TEMPLATE"]->SetTemplate("newpage"); $GLOBALS["ISC_CLASS_TEMPLATE"]->ParseTemplate();?> 在模板文件中新建一个布局文件 newpage.html , 如果要新增功能面板也是一样要在 / incudes / dispaly 增加一个面板类, 把要用的参数都准备好调用Panel和Snipper模板就好了. 如果不清楚可以参考已经有的功能面板是怎么调用的. 只要明白了调用流程,就很容易做到.
 

评论信息

分享到: