在本节中,我们将介绍如何修改具体的每一个页面。在这个文档中,我们主要介绍的是代码层面的事情。

在本系列文档中,所有的操作都是基于我们自己新建的模板,并且我们已经将该默认设置为默认模板了。

当你第一次使用自己新建的模板的时候,你会发现自己新建的模板和商城自带的模板没有任何不同。这是因为,系统在新建模板的时候,只是简单的将默认模板的代码复制到了新的模板。它和系统默认模板一样,也就没什么奇怪了。在本节中,我们将试着让这个模板和默认模板不一样。

1,商城首页布局


首先,我们来看一下这个页面的默认布局:

ZMAX商城——修改首页代码.jpg

作为开发者,或者界面设计者而言,你一定要记住,界面只是CSS和HTML层面的事情,你是可以任意的修改的。关键的问题就在于这个页面是否有你需要的数据。

2,找到目标文件夹


那么上面的页面是怎样产生的呢?将问题简单一点,这个页面是哪一个文件产生的?商城的首页是由ZMAXSHOP的home视图产生的。产生这个页面的代码路劲为:\components\com_zmaxshop\template\mytemplate[这里应该是你自己的模板的名称]\home。在这个文件夹中有一个tmpl文件夹(可能在一些版本中没有),进入这个文件夹,就可以看到产生这个页面的所有文件了。

3,熟悉文件结构


下面的截图展示了这个页面的文件夹结构:

 ZMAX商城——首页布局文件夹结构.jpg

在上面的截图中,你可以看到有如下的文件:

  • default.php [这是入口文件]
  • default_category.php
  • default_foot.php
  • default_head.php
  • default_hot.php
  • default_latest.php
  • default_loadmodule.php

为什么要有这些文件,为什么不是一个大的文件?在编码的过程中,我们将整个输出分成几个小的部分,每一个文件负责这个部分的输出。然后使用default.php这个文件将这些部分缝合在一起。使用这种技术,能够让代码直接的耦合减少,代码的逻辑结构更加的清晰。在ZMAXSHOP的模板中,我们大量的使用这种技术。

4,default.php页面的代码片段


<div id="<?php echo $this->option;?>" class="view-<?php echo $this->view;?>" >
    <form action="<?php echo JRoute::_('index.php');?>" method="post" name="adminForm" id="adminForm">
        <div class="zmaxhead zmaxui">
            <?php echo $this->loadTemplate('head');?>
        </div>
        
        <?php if($this->params->get("home_enable_loadmodule","1")):?>
            <div class="zmaxloadmoule zmaxui">
                <!--  ZMAX 首页加载模块板块 -->
                <?php echo $this->loadTemplate('loadmodule');?>
            </div>
            <div class="zmax-clearfix"></div>
        <?php endif;?>
        
        <?php if($this->params->get("home_enable_category","1")):?>
            <!--  ZMAX 首页分类板块 -->
            <div class="zmaxcategory zmaxui">
                <?php echo $this->loadTemplate('category');?>
            </div>
            <div class="zmax-clearfix"></div>
        <?php endif;?>
        
        <?php if($this->params->get("home_enable_latest","1")):?>
            <!--  ZMAX 首页新品推荐板块 -->
            <div class="zmaxlatest zmaxui">
                <?php echo $this->loadTemplate('latest');?>
            </div>
            <div class="zmax-clearfix"></div>
        <?php endif;?>
        
        <?php if($this->params->get("home_enable_hot","0")):?>
            <!--  ZMAX 首页热销产品板块 -->
            <div class="zmaxhot zmaxui">
                <?php echo $this->loadTemplate('hot');?>
            </div>
            <div class="zmax-clearfix"></div>
        <?php endif;?>
        
        <div class="zmaxfoot zmaxui">
            <?php echo $this->loadTemplate('foot');?>
        </div>
            
        <div>
            <?php echo JHtml::_('form.token');?>
        </div>    
    </form>
</div>

上面的代码结构非常的简单。最上面的一行:

<div id="<?php echo $this->option;?>" class="view-<?php echo $this->view;?>" >

这一行在商城的每一个视图中都有,他主要是使用id 和 类名来定位区别每一个页面。(在不同的页面,id的值 和 class的值是不同的,如果你只想修改某一个特定的页面,使用这两个css过滤器就可以做到)

接下来,大家能够看到我们在div中使用了多个zmaxui类名。关于这一点,大家请参阅前面的章节。

在整个页面中,最重要的一点就是

 <?php echo $this->loadTemplate('XXXXX');?>

这行代码的作用就是将文件XXX文件读入进来。如果你想增加新的文件,你可以创建一个文件,并且这个文件必须以default_开头。然后调用上面的代码就可以了。通过使用loadTemplate函数,default.php页面成功的将各个部分链接在一起了。

5,每一个部分的代码说明


default_ loadmodule.php文件,这个页面可以让你将指定的模块输出到这个首页。

<div class="zmax-loadmoule ">    
    <?php if($this->params->get("loadmoule_show_label")):?>
    <h3 class="zmax-module-title"><?php echo $this->params->get("loadmoule_label");?></h3>
    <?php endif;?>
    
    <?php if($this->module):?>
    <?php echo   JHTML::_('content.prepare', "{loadposition $this->module}"); ?>
    <?php endif;?>
</div>

代码非常的简单,我们只讨论其中的PHP部分,前一部分,判断是否输出一个标题,后一部分直接输出模块的内容。其中$this->module。是需要输出的模块。$this 表示的是视图类的对象。

关于$this这一部分的数据来源,这里的数据都是由模型层产生,这些数据你是无法修改(因为,修改模板只是修改修数据显示的外观)。


default_ category.php文件,这个文件显示分类信息部分

<div >    
    
    <!-- 遍历每一个分类 -->
    <?php if($this->category):?>    
    <div class="zmax-row zmax-item-row">
        <?php foreach($this->category as $c):?>
        <div class="<?php echo $class;?>">
            <div class="zmax-item">
                <?php
                    // 触发onItemBeforeContent事件 
                    $results = $this->dispatcher->trigger('onItemBeforeContent', array('com_zmaxshop.home','category',&amp;$c));    
                   echo trim(implode("\n", $results));
                ?>
                
                <?php 
                    $title = $c->cate->title;
                    $description = $c->cate->description;
                    $img = zmaxcategoryHelper::getCategoryImage($c->cate->id);
                    $url = zmaxlinkHelper::getItemsLinkById($c->cate->id);
                ?>
                【这里有所省略】
                <?php if($this->params->get("category_show_title" ,'1')):?>
                <h3><?php echo $title;?><small><a href="<?php echo $url;?>">(<?php echo $c->count;?>)</a></small></h3>        
                <?php endif;?>
 
            </div>    
        </div> 
</div>

代码非常的明了,就是变量$this->category对象,输出所有的分类信息。关于$this->category对象具有什么属性,大家可以使用print_r查看一下。这这里需要说明的是,中间有一些类似这样的代码

 <?php
                    // 触发onItemBeforeContent事件
                    $results = $this->dispatcher->trigger('onItemBeforeContent', array('com_zmaxshop.home','category',&$c));    
                   echo trim(implode("\n", $results));
                ?>

这些代码您在重写模板的时候是不能够删除掉的,这些是商城支持的事件(插件)。他并不影响你调整商城的外观。


default_ latest.php文件,这个文件显示商城最新产品信息部分

这个很上面的分类基本类似,只是这个板块的数据对象为$this->latest。 在重写这个页面的时候,你也需要记住:不要删除插件部分代码。


default_ hot.php文件,这个文件显示商城最热产品信息部分

这个的数据对象为$this->hot

 

 

 

 

 


文档不够清楚,我还有问题

请将你的问题在下面留言,我们会及时回复

0
  • 目前还没有留言,赶紧抢占沙发