10分鐘學會OpenCart自定義主題

發表於

10分鐘學會OpenCart自定義主題

堅持了就是神話，放棄了就是笑話。

OpenCart預設主題結構

Image(圖像):所有有關主題的圖像文件都放在這裡。
Stylesheet(樣式表):樣式表的外觀相關代碼。
Template(模板):在這裡找到所有前端模板的文件。所有的模板文件模塊化，讓事情變得整潔乾淨。

模板分類

Common(常見的)

跨不同頁面的模板公共元素文件都放在這個目錄中。例如包括頁首(header)，頁尾(footer)和側邊欄(sidebar)相關的模板。如果打算使用在不同的頁面，也應該把您的模板文件放在這裡，長遠來看這樣比較好維護。

Information(信息)

可以在這裡找到聯繫頁面、網站導航頁面和靜態信息頁面的相關模板。

Module(模塊)

保存模板種類的重要的目錄。我們可以創建自己的自定義模塊，以滿足自定義要求，所以這是有關自定義模塊模板文件存放的地方。

創建自定義主題

一般分為兩種情況：
想要用所選擇的新界面完全取代預設的前端界面，
想改變一些東西如顏色組合、佈局結構和品牌相關的變化。

1.從後端啟動自定義主題。登錄後端，進入System(系統)>Settings(設置)。會列出所有 OpenCart 安裝存儲可用的商店(store)。

2.點擊 Action(動作)欄位的 Edit(編輯)鏈接，應該會開啟商店的配置界面。

3.點擊 General。選擇我們的自定義主題，列在 default 主題的 Template(模板)下拉框中。選擇並點擊 Save(保存)按鈕來套用變更。

  • 已經建立了mycustomtheme作為商店的啟動主題，首先會在
    catalog/view/theme/mycustomtheme/template/common/home.tpl嘗試找文件。如果找到了，OpenCart 就會使用該文件，並停止搜尋過程。

  • 如果OpenCart在啟動主題找不到home.tpl，將還回到預設的主題，並嘗試使用
    catalog/view/theme/default/template/common/home.tpl。home.tpl一定會在，除非限制了預設主題模板文件！

4.繼續在自定義的主題目錄template下創建一個名為common的新目錄。現在從default主題的 template/common目錄複製home.tpl和header.tpl模板文件。貼到我們主題的新創建的common目錄。

5.從default主題的stylesheet目錄複製所有的樣式表文件，並貼到我們主題的stylesheet目錄。image 目錄亦同，雖然目前我們會忽略這個目錄。

6.只將需要自定義的模板文件複製到自定義主題。因為缺少的文件會從 default 主題中獲取，所以沒有必要保持相同文件的副本，除非您需要修改它。保持和 default 主題相似的文件結構。

7.讓我們從自定義主題獲取並來改變之，找到下面的代碼：

1
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

並替換成mycustomtheme，其它所需要的樣式表引用亦同。

1
<link rel="stylesheet" type="text/css" href="catalog/view/theme/mycustomtheme/stylesheet/stylesheet.css" />

通過這種方式，我們確保了所有的樣式表文件是從自定義主題載入。

OpenCart模板介紹

OpenCart提供的模板，可以將它們分成三個不同的類別。
有助於我們理解在前端生成完整頁面到底需要些什麼。

  • 佈局模板

就OpenCart而言，模板被稱為佈局。您可以想像一個佈局模板是一個裝飾模板，用於收集頁面不同區域的內容，將該內容壓入佈局，然後生成一個完整的頁面。

佈局模板可以引用像標題，頁腳，側邊欄元素和模塊內容等元素。對於商店前端中的幾乎每個頁面，都存在一個關聯的佈局模板。

OpenCart也允許您從後端創建佈局，這也是您可以更改某些前端頁面的部分結構的另一種方式。

  • 子模板

這種模板為特定內容生成一個子模板。在一般情況下，內容由子模板生成並被推送到佈局模板中。這種最簡單的例子是template/common/header.tpl。它負責為前端的每個頁面生成標題部分。

正如我們前面所討論的那樣，OpenCart提供了一個很好的方式來組織模板文件，使得它header.tpl在common目錄中是有意義的。該目錄中的大多數模板都會生成插槽特定的內容，最終插入到佈局中。

  • 模塊模板

請記住，模塊就像一個塊，它被推送到佈局模板中的特定區域。正如你可能已經猜到的那樣，模塊模板與不同的模塊有關，正如我們所看到的，OpenCart帶有很多內置的模塊來擴展核心功能。

默認情況下，佈局模板中有四個不同的區域位置可用。他們是：

內容頂部、內容底部、左列、右欄

您可以將模塊分配給這些位置中的任何一個。顧名思義，如果您已將模塊分配到“Content Top”位置，它將顯示在頁面的主要內容之上。模塊模板可以在template/module目錄中找到，所以如果你要創建一個新的模塊，你必須在這個目錄下放置一個相關的模板。

模塊模板和子模板這兩個都被視為子模板，並在頁面生成過程中被推送到佈局模板。

在前端佈局發現模板

每當訪問前端的頁面時，應用程序將執行以下過程：

  • 根據URL中設置的“route”變量，OpenCart找到一個合適的控制器來處理請求。我們將看到一個“route”變量究竟是什麼，以及它在後面的章節中做了什麼。現在，我們假設它將OpenCart引導到適當的控制器文件以供執行。

  • 現在由控制器來完成剩下的工作。控制器是包含語言文件和模型文件等其他元素的地方。它還獲取並設置要推送到顯示模板的實際內容。

  • 一旦控制器完成建立的內容，它將這個信息交給一個視圖元素，該視圖元素負責向用戶顯示最終的輸出。這裡需要注意的是，控制器還會設置佈局模板的文件名，這個佈局模板文件名將在稍後階段被視圖使用。

  • 最後，一個視圖元素拉取所需的模板文件，並使用之前在控制器中準備的內容對其進行裝飾。該過程通過將輸出發送給最終用戶而結束。

現在考慮一個您想要更改商店前端中任何頁面的佈局結構的場景。這引發的第一個問題是我們如何去尋找與特定頁面相關的模板。雖然沒有具體的方法來做這個，但讓我們來看看一些可用的方式。

1.基於結構的預測

這是預測任何路線相關模板的最簡單方法。“route”是鏈接URL中的查詢字符串變量。

例如，請考慮前端顯示給用戶的登錄頁面中的以下鏈接URL：

http://www.youropencartdomain.com/index.php?route=account/login

所以在上面的URL中，account/login是對我們有用的“route”參數的值。您可以簡單地將此值映射到template默認主題的目錄。在這種情況下，您最終得到的模板路徑如下所示：

{opencart_document_root}/catalog/view/theme/default/template/account/login.tpl

正如你可能已經註意到的那樣，“route”值的第二部分“login”成為模板文件名（login.tpl在上面的例子中）。

2.極客之路

在大多數情況下，上述方法應該可以工作，但是在這種情況下，您將需要查看控制器文件。同樣，route參數也有助於找到相關的控制器文件。

讓我們考慮在前端顯示給用戶的登錄頁面的鏈接URL：

http://www.youropencartdomain.com/index.php?route=account/login

您可以映射相對於路徑的值catalog/controller來查找關聯的控制器文件。所以在這種情況下，您最終應該使用的控制器文件是：

{opencart_document_root}/catalog/controller/account/login.php

正如您可能已經註意到的那樣，“route”值的第二部分“登錄”成為控制器文件名（login.php 在上述情況下）。一旦你找到一個相關的控制器文件，你應該看看這樣的代碼：

this->template = 'default/template/account/login.tpl';

這是控制器告訴OpenCart它應該從“默認”主題顯示“ login.tpl ”佈局模板的方式。當然，如果這個模板已經在你的自定義主題中被覆蓋了，它將會被優先考慮！

在為任何頁面尋找佈局模板而討論的兩種方法中，第一種方法更適合主題開發人員，第二種方法適合那些對代碼感覺更舒適的人。

佈局模板的通用元素

找到您想要自定義的特定佈局模板我們將看到佈局模板中的一些常見元素。

打開佈局模板文件default/template/account/login.tpl以供參考。

$ header 在OpenCart頁面中顯示標題部分的內容。
與此相關的模板可以在這裡找到default/template/common/header.tpl

$ footer 在OpenCart頁面中顯示頁腳部分的內容。
與此相關的模板可以在這裡找到default/template/common/footer.tpl

$ column_left 負責顯示從後端分配給“Column Left”位置的所有模塊的輸出。
與此相關的模板可以在這裡找到default/template/common/column_left.tpl

$ column_right 負責顯示從後端分配給“Column Right”位置的所有模塊的輸出。
與此相關的模板可以在這裡找到default/template/common/column_right.tpl

$ content_top 負責顯示從後端分配給“Content Top”位置的所有模塊的輸出。
與此相關的模板可以在這裡找到default/template/common/content_top.tpl

$ content_bottom 負責顯示從後端分配給“Content Bottom”位置的所有模塊的輸出。
與此相關的模板可以在這裡找到default/template/common/content_bottom.tpl

在你想自定義特定模塊的輸出的情況下，
與此相關的模板可以在這裡找到default/template/module/{modulename.tpl}

在“賬戶”模塊的情況下，文件是default/template/module/account.tpl
模塊模板文件的命名約定很容易猜到，因為它與模塊的名稱完全相同。