[edit] 主樣版

檔案： /templates/樣版名稱/index.html

[edit] 概略說明

我們以xtc5樣版為例，主樣版的設計順序如下：

• 網頁外觀編輯

<div id="wrap">
	<div id="header">
		<div id="logo">公司Logo</div>
		<div id="search">搜尋區塊</div>
	</div>
	<div id="topmenuwrap">
		<ul id="topmenu">
			<li>購物內容</li>
			<li>帳號資訊</li>
			<li>結帳</li>
			<li>登出</li>
		</ul>
		<div id="languages">語言區塊</div>
	</div>
	<div id="breadcrumb">導覽列</div>
	<div id="contentwrap">
		<div id="leftcol">左區塊</div>
		<div id="content">中央區塊</div>
		<div id="rightcol">右區塊</div>
	</div>
<p class="footer">底部宣告</p>
</div>

• 載入語言定義檔

{config_load file="$language/lang_$language.conf" section="index"}

• 載入功能變數

{$store_name} ...等

• 載入各功能區塊

{$box_CATEGORIES} ...等

• 載入中央區塊

{$main_content} ...等

• 加入判斷式

{if $account}
 ...
{/if}

原始語法：

{config_load file="$language/lang_$language.conf" section="index"}
<div id="wrap">
	<div id="header">
		<div id="logo">
                    <img src="{$tpl_path}img/top_logo.jpg" alt="{$store_name}" />
                </div>
		<div id="search">{$box_SEARCH}</div>
	</div>
	<div id="topmenuwrap">
		<ul id="topmenu">
			<li><a href="{$cart}">{#link_cart#}</a></li>
			{if $account}
			<li><a href="{$account}">{#link_account#}</a></li>
			{/if}
			<li><a href="{$checkout}">{#link_checkout#}</a></li>
			{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
			<li><a href="{$logoff}">{#link_logoff#}</a></li>
			{php} } {/php}{/if}
		</ul>
		<div id="languages">{$box_LANGUAGES}</div>
	</div>
	<div id="breadcrumb">{$navtrail}</div>
	<div id="contentwrap">
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
		<div id="leftcol">{$box_CATEGORIES}{$box_ADD_QUICKIE}{$box_CONTENT}
{$box_INFORMATION}{$box_LAST_VIEWED}{$box_REVIEWS}{$box_SPECIALS}{$box_WHATSNEW}</div>
		{/if}
		<div
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
			id="content"
		{else}
			id="contentfull"
		{/if}
		 >{$main_content}</div>
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
		<div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}
{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}
{$box_MANUFACTURERS}</div>
		{/if}
	</div>
<p class="footer">Your Company Footer here</p>
</div>

中文解釋：

{config_load file="$language/lang_$language.conf" section="index"}<!-- 載入語言定義檔 -->
<div id="wrap">
	<div id="header">
		<div id="logo">
                   <img src="/templates/xtc5/img/top_logo.jpg" alt="{$商店名稱}" />
                </div>
		<div id="search">{$搜尋區塊}</div>
	</div>
	<div id="topmenuwrap">
		<ul id="topmenu">
			<li><a href="{$購物內容連結}">{#購物內容#}</a></li>
			{if $會員}
			<li><a href="{$帳號資訊連結}">{#帳號資訊#}</a></li>
			{/if}
			<li><a href="{$結帳連結}">{#結帳#}</a></li>
			{if $會員}{php} if (isset($_SESSION['會員編號'])) { {/php}
			<li><a href="{$登出連結}">{#登出#}</a></li>
			{php} } {/php}{/if}
		</ul>
		<div id="languages">{$語言區塊}</div>
	</div>
	<div id="breadcrumb">{$導覽列}</div>
	<div id="contentwrap">
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}<!-- 判斷是否在結帳程序 -->
		<div id="leftcol">{$商品分類區塊}{$快速購買區塊}{$相關說明區塊}
                {$資訊台區塊}{$最近瀏覽商品區塊}{$商品評論區塊}{$特價商品區塊}{$新上架商品區塊}</div>
		{/if}
		<div
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}<!-- 判斷是否在結帳程序 -->
			id="content"
		{else}
			id="contentfull"
		{/if}
		 >{$中央區塊}</div>
		{if !strstr ($smarty.server.PHP_SELF, 'checkout')}<!-- 判斷是否在結帳程序 -->
		<div id="rightcol">{$購物車內容區塊}{$會員登入區塊}{$管理資訊區塊}{$電子報區塊}
                {$暢銷商品區塊}{$客戶群組資訊區塊}{$貨幣切換區塊}{$廠商資訊區塊}{$廠商選擇區塊}</div>
		{/if}
	</div>
<p class="footer">將貴公司的名稱、宣告...等加在此處</p>
</div>

[edit] 網頁標籤對照圖

圖例說明：

• wrap區塊標籤：我們可以將它當作是一個放置整個主題外觀的容器。
  • header：整個放置主題頂部的容器。
    • logo：放置商店logo圖片的容器。
    • search：放置搜尋區塊的容器。
  • topmenuwrap：放置主題頂部選單的容器。
    • topmenu：放置功能選單的容器。
    • languages：放置語系切換區塊的容器。
  • breadcrumb：放置導覽列的容器。
  • contentwrap：放置主題主要內容的容器。
    • leftcol：放置左列功能區塊的容器。
    • content：放置主要功能的容器。
    • rightcol：放置右列功能區塊的容器。
  • footer：放置主題底部宣告的容器。

[edit] 功能變數對照圖

很多人在設計樣版時，都誤以為功能區塊的放置位置有侷限特定左右欄位，所以版面設計往往只有2欄或3欄式的排版法，其實各功能區塊可以自由的放置在任何位置，像本範例：xtc5樣版中的search及languages區塊就是一例。 因此在編輯xt:Commerce樣版時，我們可以跳脫過去購物車系統樣版設計的思維，版面並不是一成不變，在設計樣版前，我們只要規劃好各項功能區塊及主要內容的需求後，在外觀部份是可以自由揮灑創意的。這也正是xt:Commerce的外觀彈性的優勢及迷人之處。

[edit] 載入變數對照表

[edit] 語言常數對照

語言檔路徑位置： /語言/lang_語言.conf ,例： /tchinese/lang_tchinese.conf

[edit] 判斷式說明

• 判斷是否已登入會員身份

{if $account}
   ...
{/if}

• 判斷是否能透過SESSION取得會員編號

{php} if (isset($_SESSION['customer_id'])) { {/php}
   ...
{php} } {/php}{/if}

• 判斷是否處於結帳程序，是：隱藏左右區塊，否：顯示左右區塊

{if !strstr ($smarty.server.PHP_SELF, 'checkout')}
   ...
{else}
   ...
{/if}

樣版檔案關係表-主樣版

主樣式