解读ISC的模板文件架构和模板编写方法

By | 2009/08/14
5 Comments

    ISC也就是Interspire Shopping Cart， 是一个基于php+mysql的商业的网店程序。虽然没有Zen-Cart和osCommerce 的用户数据庞大，但凭借其安装简单，功能强大，界面友好的特点，我相信会有越来越多的人喜欢。

    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模板就好了.  如果不清楚可以参考已经有的功能面板是怎么调用的. 只要明白了调用流程,就很容易做到.

本页链接: http://www.dengor.com/archives/184.html

转载注明出处, 谢谢!

5 thoughts on “解读ISC的模板文件架构和模板编写方法”

  1. Pingback: 用CSS强制改变链接的颜色 - 登高望远

  3. Brian Campbell Jersey

    I’m new on here, I hit upon this website I come up with It appealing helpful and its helped me unlit a lot. I determination be masterly to promote & subsidize other users like it has helped me.

  4. mastermind

    你好，我有个ISC模板修改需要外包，你的QQ是？我们加了以后详谈

  5. Fake Fake Ray Bans sunglasses

    Hey there! I’ve been following your web site for a while now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to say keep up the great work!

Comments are closed.