EasyCart/模板制作(二)

• 网站前端左列

/default/ Public目录下的left.html文件是网站底部的模板。模板的制作具体如下。

1、引用菜单（可选择类型）

   <include file="Public:floatmenu" />

2、热卖产品

    <iterate
    name="HotPorducts"
    id="vo">

    <div
    class="m_pro">

    <div class="m_pro_img">

    <a
    href="{:build_url($vo,'pro_url')}"
    title="{:build_url($vo,'pro_name')}" >

    <img src="{:build_url($vo,'pro_smallimage')}"
    alt="{:build_url($vo,'pro_name')}" />

    </a>

    </div>

      <div class="m_pro_name">


    <a href="{:build_url($vo,'pro_url')}">{:build_url($vo,'pro_name')}</a>


    </div>

      <div
    class="m_pro_pri">{:build_url($vo,'pro_price')} </div>

    </div>

    </iterate>

• 网站前端首页

/default/Home目录下的Index-index.html文件是首页的模板。

1、引入模板的头部

   <include file="Public:header" />

2、引入模板的左边部分

   <include file="Public:left" />

3、引入模板的底部

   <include file="Public:footer" />

4、中间部分部分的填写

如推荐产品的模板填写如下：

    <iterate name="FeaturedPorducts"
    id="vo">


    <div class="pro">

       
    <div class="pro_img">

    <a  href="{:build_url($vo,'pro_url')}"  title="{:build_url($vo,'pro_name')}"
    >

    <img
    src="{:build_url($vo,'pro_smallimage')}"  alt="{:build_url($vo,'pro_name')}"
    />

    </a>

    </div>

       
    <div ><a href="{:build_url($vo,'pro_url')}">{:build_url($vo,'pro_name')}</a></div>

       
    <div class="pro_pri">{:build_url($vo,'pro_price')}</div>


    </div>

    </iterate>

其中FeaturedPorducts是存放数据库中查找出来的推荐产品数组。

   {:build_url($vo,'pro_url')}

是在模板中函数调用，会生成产品详细页面的URL地址。

   {:build_url($vo,'pro_name')}

会生成产品名称。

   {:build_url($vo,'pro_smallimage')}

会生成产品小图的图片的引用地址。

   {:build_url($vo,'pro_price')}

会生成产品的价格

• 网站前端类别页

/default/Home目录下的cate.html文件是类别页的模板。

说明：类别页主要是显示类别产品，和网站的左列

1、引入模板的头部

   <include file="Public:header" />

2、引入模板的左边部分

   <include file="Public:left" />

3、引入模板的底部

   <include file="Public:footer" />

4、面包屑的填写

    <a href="/">Home</a>

          <volist
    name="catep" id="vo"> >

    <a
    href="{:build_url($vo,'cate_url')}"
    >{:build_url($vo,'cate_name')}</a>

    </volist>

5、中间部分部分的填写

    <iterate name="list"
    id="vo">


    <div class="g_pro">

      
    <div>

    <a href="{:build_url($vo,'pro_url')}"
    title="{:build_url($vo,'pro_name')}" >

    <img
    src="{:build_url($vo,'pro_smallimage')}"
    alt="{:build_url($vo,'pro_name')}" />

    </a>

    </div>

         
    <div ><a
    href="{:build_url($vo,'pro_url')}">{:build_url($vo,'pro_name')}</a>  </div>

         
    <div class="g_pro_pri"> {:build_url($vo,'pro_price')}
    </div>


    </div>

    </iterate>

6、分页部分的填写

    <table width="690"
    border="0" cellspacing="0" cellpadding="0">

          
    <tr>

             
    <td>Displaying {$startRow} to {$endRow} (of {$totalRows}
    products)</td>

             
    <td align="right">{$page}</td>

          
    </tr>

       
    </table>

7、产品排序功能

    <form
    method="get">

       <label for="disp-order-sorter">Sort
    by: </label>

       <select name="order"
    onchange="this.form.submit();" id="disp-order-sorter">

                 <option value="id"

              <eq
    name="_REQUEST['order']" value="id">selected</eq>

              >Sort by id

              </option>

             
    <option value="name"

              <eq
    name="_REQUEST['order']"
    value="name">selected</eq>

              >Sort by name

              </option>

              <option value="price"

              <eq
    name="_REQUEST['order']"
    value="price">selected</eq>

              >Sort by price

              </option>

              <option value="dateline"


              <eq
    name="_REQUEST['order']"
    value="dateline">selected</eq>

              >Sort by update

              </option>

         </select>

         <select name="sort"  onchange="this.form.submit();" >

              <option value="0"

              <eq
    name="_REQUEST['sort']" value="0">selected</eq>

              >Descending

              </option>

              <option value="1"

              <eq
    name="_REQUEST['sort']" value="1">selected</eq>

              >Ascending

              </option>

          </select>

    </form>

参考来源

• http://www.easycart.cn/bbs/portal.php?mod=view&aid=58