使用 OpenCart 建立自訂主題簡介

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

在繼續之前，我假設您已經在本機工作站上安裝了可用的 OpenCart。如果情況並非如此，請檢查 OpenCart 線上文件並進行設定（因為這樣做超出了本教學的範圍）。一旦安裝了可用的 OpenCart，您就可以開始使用了！

快速了解 OpenCart 結構

OpenCart 使用 MVC 設計模式構建，允許分離資料和表示之間的關注點。作為主題開發人員，您無需一直擔心調整包含應用程式邏輯和模板程式碼的檔案。

OpenCart 在框架組織方面提供了非常乾淨的目錄結構。所有與後端介面相關的檔案都放在admin目錄下。處理前端介面的檔案放在catalog目錄下。但我們真正感興趣的是 catalog 目錄，因為最終我們將在本教學系列的最後得到自訂前端主題。

OpenCart 設計模式：MVC-L

模型視圖控制器（MVC）是軟體開發領域非常流行的設計模式。 OpenCart 只是在其中添加了另一個元素：語言，這就是我們將其稱為 MVC-L 的原因。

在我們的例子中，view 部分是我們放置所有主題相關程式碼的地方。在 catalog 結構的快速概述中，我們將了解 OpenCart 如何發揮其魔力。

元素概述

1. 控制器。它負責處理應用程式邏輯。
2. 語言。它對於分離多語言網站的語言特定資訊很有用。
3. 模型。它負責從後端資料庫中獲取資料。
4. 查看。這是我們大部分時間都會度過的地方！它負責渲染前端佈局。

熟悉表示層

預設的 OpenCart 主題位於 view 目錄中。這是我們將在本節中探討的部分。再更深層次，還有兩個目錄：javascript 和 theme。

現在，我們假設所有必要的 JavaScript 檔案都放置在 javascript 目錄中。有時有例外，在這種情況下，我們也可以將樣式表和相關圖像檔案放置在該目錄下。例如，OpenCart 提供了 colorbox 函式庫，它不只包含 JavaScript。

我們真正感興趣的是 theme 目錄。再進一步看，有一個名為 default 的目錄，這是 OpenCart 提供的唯一內建主題。不要被更深層的主題結構所淹沒，因為我們很快就會更詳細地探討它。現在，看看主題的結構是什麼樣的。

預設主題結構

1. 圖片。正如您可能已經猜到的，與主題相關的所有圖像檔案都位於此處。
2. 樣式表。與皮膚相關的代碼（可能是樣式表）將放在此處。
3. 模板。顧名思義，你可以在這裡找到所有的前端範本檔案。所有模板檔案都以模組化方式組織，以保持整潔。

例如，如果您快速查看範本下的 account 目錄，您會發現大多數檔案都與前端的使用者畫面相關。我們將在下一篇文章中更詳細地討論這一點。

模板世界

正如我之前提到的，OpenCart 提供了一種組織模板檔案的好方法。在本文中，我將嘗試解釋 template 目錄中的內容。在繼續之前，值得注意的是，儘管 OpenCart 附帶了一堆內建模組，提供了基本購物車所需的功能，但您也可以根據您的自訂要求開發自己的模組。

話雖如此，讓我們仔細看看模板分類。

模板分類

1. 通用。 不同頁面的通用元素的範本檔案會放置在此目錄中。範例包括頁首、頁尾和側邊欄相關範本。如果您打算在不同頁面上使用模板文件，您還應該將模板文件放置在這裡，這樣從長遠來看更容易維護。當然，這不是強制性的，但按照應該的方式做事情是件好事。
2. 錯誤。 目前，這裡只是錯誤模板。
3. 資訊. 您可以在此處找到與聯絡頁面、網站地圖頁面和靜態資訊頁面相關的範本。
4. 模組。  就其保存的範本類型而言，這是一個重要的目錄。正如我之前在 OpenCart 中所說，我們可以創建自己的自訂模組來滿足我們的自訂要求，因此您可以在此處放置與自訂模組相關的模板檔案。

除了上面解釋的模板結構之外，還有其他模板目錄包含特定於頁面的模板檔案。就 OpenCart 而言，我們可以說它們是路線特定的模板檔案。

例如，當您造訪前端的「我的帳戶」頁面時，應在 catalog/view/theme/default/template/account 下找到與之關聯的範本。在本系列的後面部分，我們將了解如何透過查看該頁面的 url 路徑來尋找特定的範本檔案。

摘要

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

在下一部分中，我們將學習如何在 打開購物車。如果您有任何問題或回饋，請隨時留下您的 評論！

以上是使用 OpenCart 建立自訂主題簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！