Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. OpenCart
Code

用 OpenCart 創建自定義主題:簡介

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Create a Custom Theme With OpenCart.
Create a Custom Theme With OpenCart: Part Two

Chinese (Traditional) (中文(繁體)) translation by Niau Wu (you can also view the original English article)

在本系列中,我將解釋如何用流行的開源電子商務框架 OpenCart 創建自定義主題在第一部分中,我將解釋 OpenCart 主題的基本結構。

在開始之前,我假設您已經安裝了 OpenCart。如果還沒安裝,請瀏覽 OpenCart 在線文檔並設置之(安裝過程不在本教程的範圍之內)。一旦您安裝了 OpenCart ,就讓我們開始吧!

快速瀏覽 OpenCart 結構

基本 OpenCart 架構

OpenCart 使用 MVC 設計模式,允許分離數據和顯示(Presentation)。身為主題開發者的您,不必擔心要一直調整應用程序邏輯和模板代碼。

當涉及到組織架構, OpenCart 提供了相當簡潔的目錄結構。凡是涉及到後端接口的文件都放在 admin 目錄。處理前端接口文件放置在 catalog 目錄。但是我們真正感興趣的是 catalog 目錄。在本系列教程的末了,我們將完成自定義前端主題,。

OpenCart 設計模式:MVC-L

目錄結構

Model(模型) - View(檢視) - Controller(控制器),或簡稱 MVC ,是軟件開發領域非常流行的設計模式。OpenCart 只是增加了另一種元素:語言(Language),這就是為什麼我們把它稱為 MVC-L。

在本例中,view 部分,會放置主題相關的所有代碼。快速瀏覽 catalog 結構,看一下 OpenCart 施了什麼魔法。

內容簡介

  1. Controller(控制器),負責處理應用程序邏輯。
  2. Language(語言),適用於分離多語言網站的特定語言信息。
  3. Model(模型),負責從後端數據庫獲取數據。
  4. View(檢視),我們將花更多的時間於此!負責呈現前端佈局。

熟悉顯示層

視圖結構

預設的 OpenCart 主題有提供 view 目錄。這就是我們要在本節探討的部分。在更深層,還有兩個目錄:javascripttheme

現在,我們假設所有需要的 JavaScript 文件都放在 javascript 目錄。有時有一個例外,在這種情況下,我們也可以將樣式表(stylesheet)和相關的圖像文件放在此目錄下。例如, OpenCart 提供了不只含 JavaScript 的彩盒庫(colorbox library)。

我們真正感興趣的是 theme 目錄。進一步來看,有一個名為 default 的目錄,是 OpenCart 提供的唯一內建主題。不要被更深層的主題結構嚇著了,稍後我們將更詳細的探索。現在,看一下主題的結構。

預設主題結構

  1. Image(圖像),如您所想,所有有關主題的圖像文件都放在這裡。
  2. Stylesheet(樣式表),樣式表的外觀相關代碼。
  3. Template(模板),正如其名,可以在這裡找到所有前端模板的文件。所有的模板文件組織在一個模塊化的方式讓事情變得整潔乾淨。

例如,快速瀏覽一下模板下的 account 目錄,會看到大多數文件都是在前端與用戶界面。下一篇文章我們會詳述。

模板的世界

模板結構

正如我前面提到的,OpenCart 提供了組織模板文件的好方法。在這篇文章中,我會盡力解釋 template 目錄的內部。此外,值得注意的是,雖然 OpenCart 配有一堆內建的模塊,提供了一個基本的購物車功能,也可以根據自定義需求開發自己的模塊。

那麼,讓我們來仔細看看這個模板的分類。

模板分類

  1. Common(常見的)。 跨不同頁面的模板公共元素文件都放在這個目錄中。例如包括頁眉(header),頁腳(footer)和側邊欄(sidebar)相關的模板。如果打算使用在不同的頁面,也應該把您的模板文件放在這裡,長遠來看這樣比較好維護 。當然,不是強制要這樣做,但它是很好的做法也應該這樣做。
  2. Error(錯誤), 目前,只是保留在此的錯誤模板。
  3. Information(信息), 可以在這裡找到聯繫頁面、網站導航頁面和靜態信息頁面的相關模板。
  4. Module(模塊), 保存模板種類的重要的目錄。正如我剛才在 OpenCart 說,我們可以創建自己的自定義模塊,以滿足自定義要求,所以這是有關自定義模塊模板文件存放的地方。

除了上述的模板結構,還有包含特定頁面的模板文件目錄。在 OpenCart 而言,其為特殊的 route(路由)模板文件。

例如,當您訪問前端的“My Account(我的帳戶)”頁面,相關的模板在 catalog/view/theme/default/template/account 。之後,我們將學習如何從頁面的 URL 路徑找到一個特定的模板文件。

摘要

此為本系列的第一部分的結尾。您應該熟悉了 OpenCart 的基本主題結構。

在接下來的部分,我們將學習如何在 OpenCart 創建自定義主題。如果有任何問題或意見,歡迎留下您的評論!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.