ZenCart的模板設計說簡單其實也挺簡單的說複雜也比較複雜,需要一定的時間來熟悉。一旦你瞭解了它的結構,就會慢慢習慣了。
首先要閱讀常見問答部分的:如何添加、製作新模板。ZenCart的設計沒有什麼特別,與以前設計HTML頁面是一樣的。只是整個頁面分成了好幾個部分,並加入了php代碼。(設計Zencart模板製作需要理解PHP和CSS樣式定義)
通常,頁面分爲頁眉(header),頁腳(footer),邊框(sideboxes)。所以設計頁面的時候,要記住ZenCart是如何組織這些頁面的。
頁面是通過Css樣式表來控制的。樣式表控制表格單元的背景圖案、字體的顏色和樣式等等。所以,假如你需要修改邊框標題欄的字體,那麼查看樣式表文件。(這裏推薦使用IE8開發者工具來調整)
ZenCart在頁面添加圖像有兩種方式。可以使用圖像目錄的相對路徑,或者在模板中用php變量定義圖像。如果你使用https服務器,並且採用相對圖像路徑,那麼https的圖像目錄下也要有同樣的圖像,否則https服務器很可能會給出警告提示。(這個其實無所謂的 開通https需要刀的沒有必要呵呵)
ZenCart可以設置成任意的html/flash的界面,只是比通常的html頁面的設計費時。你可以從修改缺省的模板開始,先修改CSS文件和三欄格式的界面。開始先採用不同的顏色,很快就可以設計出完全不同的風格。
最後,在設計模板前要先計劃好你網頁的內容,事半功倍。
下面是zencart頁面各部分相常用對應模板文件的一個列表:
文件路徑 | 註釋 |
index.php | 主文件 |
includes/templates/[custom template folder]/common/html_header.php | 頁面的head部分 |
includes/templates/[custom template folder]/common/tpl_main_page.php | 頁面的body部分 |
includes/templates/[custom template folder]/common/tpl_header.php | 所有頁面的頁眉 |
(column left) |
|
includes/templates/[custom template folder]/common/main_template_vars.php | 決定頁面的內容部分,缺省爲 ‘tmp_index_default.php’ |
首頁 – 缺省 | |
includes/templates/[custom template folder]/templates/tpl_index_default.php | 首頁模板文件 |
首頁 – 顯示分類 | |
includes/templates/[custom template folder]/templates/tpl_index_categories.php | 首頁上顯示分類時的模板文件 |
includes/modules/[custom template folder]/pages/index/category_row.php | 選擇要顯示的分類 |
includes/templates/[custom template folder]/templates/tpl_index_category_row.php | 顯示分類 |
首頁 – 顯示指定分類 | |
includes/templates/[custom template folder]/templates/tpl_index_product_list.php | 首頁上顯示指定的分類時採用的模板文件 |
includes/modules/[custom template folder]/product_listing.php | 將商品數據添加到數組 |
includes/templates/[custom template folder]/templates/tpl_modules_product_listing.php | 顯示商品數量和商品導航菜單 |
includes/templates/[custom template folder]/common/tpl_list_box_content.php | 顯示商品數組 |
商品信息頁面 | |
includes/templates/[custom template folder]/templates/tpl_product_info_display.php | 顯示單件商品信息 |
購物車頁面 | |
includes/templates/[custom template folder]/templates/tpl_shopping_cart_default.php | 購物車頁面 |
(column right) |
|
includes/templates/[custom template folder]/common/tpl_footer.php |