web-dev-qa-db-ja.com

OpenCartのテンプレートを作成するにはどうすればよいですか？

私はOpenCartを初めて使用するので、自分のテーマをOpenCartに適用したいと思います。

デフォルトのテンプレートを直接編集するべきではないことはわかっていますが、デフォルトのテンプレートファイルをコピーして、テーマを適用するように変更するにはどうすればよいですか？

opencart
22
balanv

Balan、catalog\view\theme\defaultフォルダーとそのすべてのサブフォルダーファイルなどをコピーすることから始めます。

だからコピーはあなたの新しいテーマになります。これらのフォルダができたとしましょう

catalog\view\theme\default
catalog\view\theme\my-new-theme

  1. 管理サイトに移動し、[システム]> [設定]を選択します

  2. 「ストア」タブで、「テンプレート」という名前のフィールドのオプションとして、「デフォルト」と「my-new-theme」のオプションが表示されます。 「my-new-theme」を選択して保存します。

  3. Catalog\view\theme\my-new-themeにあるファイルに変更を加えると、すぐに表示されます

31
Brad

opencartでカスタムテーマを作成：

Opencartはフォールバック関数を使用します。つまり、opencartがテーマ内に特定のテンプレートを見つけられない場合、デフォルトのテーマフォルダーで見つけます。したがって、新しいテーマを作成するために、デフォルトのテーマからすべてのファイルをコピーする必要はありません。ただし、テーマを作成するのは、新しいフォルダーテーマを作成して色を変更するだけではありません。このチュートリアルでは、コントローラーとモデルがどのように機能するかについての基本的な理解を学びます。これはテンプレートの変更に関連しています。

先に進む前に、このチュートリアルのテーマはテーマフォルダー内のテーマ（catalog/view/theme/mytheme）を参照し、テンプレートはテンプレートフォルダー内の.tplファイルを参照することを明確にしたいと思います（catalog/view/theme/yourtheme/template）。

ステップ1.「非常に」基本的なテーマを作成する

    Create new folder mytheme on catalog/view/theme/, the folder tree will be like this:

        catalog/view/theme/
            |-> default
            |-> mytheme
    Now go to Admin -> System -> Setting - > Edit Store ->Tab Store -> template -> mytheme.
    Refresh your frontpage. Maybe your site litle bit mess, but your new theme is work!! :)

ステップ2.基本的なテーマ

    Make folder and copy some files from default theme, but DO NOT copy all files. Follow this folder tree:

        catalog/view/theme/
            |-> default
            |-> mytheme
                |-> image/*.* - copy all image
                |-> stylesheet/*.* - copy all stylesheet
                |-> template
                    |-> common
                        |-> header.tpl
        Note:
        We need to copy all the images because it's required by stylesheet.css.
        We need to copy IE stylesheet since it's declared on header.tpl (remove the file when you removing the IE style at header.tpl)
        We neet to copy slideshow.css and carousel.css since it's needed by opencart module.
        Rating star image is hard-coded into Page: category, manufacturer_info, product, review, search, special; Module: bestseller, featured, latest, special. It's up to you whether including those module and page to your theme and used another rating image, or just replacing use default rating star image.
    Now open header.tpl with text editor.
    Search Word default and replace with mytheme
    Refresh your frontpage, and everything should be the same as when you used the default theme.
    To get different visual like changing color etc, you can modificate mytheme/stylesheet/stylesheet.css

ステップ3.テンプレートのカスタマイズ（1）：コントローラーについて

    What template (*.tpl) is need to customize for a "good theme" ? Well, the answer is relative. In step 2 we already and only customizing the header.tpl. The most important rule to remember is never edit default theme template. Copy what you need to your theme folder, see example bellow.

        catalog/view/theme/
            |-> default
            |-> mytheme
                |-> image
                |-> stylesheet
                |-> template
                    |-> common
                        |-> header.tpl
                        |-> footer.tpl|-> information
                        |-> information.tpl|-> product
                        |-> product.tpl
                        |-> category.tpl
                        |-> manufacturer_list.tpl
    To customizing template and work with the controller, you need to understand that opencart used Push-based MVC model -CMIIW.
    In quick explanation:
        When you accessing route=product/category url, opencart call controller/product/category.php file.
        This controller (ex. category.php) will decide which MV-L: Model, View (tpl), language will be load. In category controller (category.php) load:
            3 Model (category, product, image): $this->load->model('...');
            2 View (category.tpl & not_found.tpl): $this->template = '...';
            1 Language: $this->language->load('...')
        The controller also decide what data will be pushed into template and how user input will be processed.
            $this->$this->data['text_price'] = $this->language->get('text_price'); will produce Price in template: <?php echo $text_price; ?>
            When you change the product show (from 15 to 25) at frontpage, controller catch the request with if (isset($this->request->get['limit'])) { ... } then process it $this->data['limits'][] = array(... 'value' => 25, ...);
    Remember that there is no fallback function for controller. If you modificate the controller file manually, it will be replaced when you upgrade the opencart. Instead modificate it manually, you can used vQmod to make "virtual modification". We will talk this on step 5.

ステップ4.テンプレートのカスタマイズ（2）：モデルについて

    A Model in MVC in charge to pull and Push data to database. Before controller get or post a data through model, the spesific model need to be loaded.
        load model: $this->load->model('catalog/product');
        get data: $this->model_catalog_product->getTotalProducts()
        post data: $this->model_catalog_product->editProduct()
    $this->load->model('catalog/product') tell the opencart to load model/catalog/product.php either in admin or catalog controller. getTotalProducts(), editProduct() is a function inside the model/catalog/product.php.
    Now open model/catalog/product.php and find public function getProduct.
        See list after return array, and you will found all product data.
        The question is, if the getProduct() listed all product data, why it doesn't show at category page (frontpage)? This because the category controller decide not to show all data.
        Open controller/product/category.php, find $this->data['products'][] = array to see what product data is used by controller.

ステップ5.テンプレートのカスタマイズ（3）：vQmodについて

    vQmod is a virtual modificate and usually used to make some change to non-fallback file like controller and model without modificating the default file.
    You can download latest version and read further explanation about vQmod here.
    To install vQmod, copy vqmod folder inside the package to opencart root.

        yoursite
            |-> admin
            |-> catalog
            |-> download
            |-> image
            |-> system
            |-> vqmod
    Go to your browser and access: http://localhost/yoursite/vqmod/install. You will see success message: vQmod has been installed on your system!
    On the vQmod package, you will see folder docs and example to give you a refference how vQmod work. Here I will give you some quick refference:
        vQmod File is an .xml file stored at vqmod/xml folder. When executed, the vQmod force opencart to use the modification instead the default file (original file) and produce cache file at vqmod/vqcache.
        One vQmod File able to modificate multiple file; within one file, vQmod able to do multiple modificate operation.
        Example structure inside a vQmod File:
        <modification>
            <id>vQmod File ID</id>
            <version>1.0.0</version> --> vQmod File version
            <vqmver>1.0.8</vqmver> --> minimum vQmod version to work
            <author>your name</author>
            <file name="catalog/controller/product/category.php "> --> the file to modify
                <operation>
                    <search position="replace"><![CDATA[
                    search this code and replace it with code bellow
                    ]]></search>
                    <add><![CDATA[
                    add this new code to replace code above
                    ]]></add></operation>
                <operation>
                    <search position="after"><![CDATA[
                    search this code and add code bellow after it
                    ]]></search>
                    <add><![CDATA[
                    add this new code after code searched above
                    ]]></add></operation></file>
            <file name="...">
                <operation>
                    <search position="before"><![CDATA[
                    search this code and add code bellow before it
                    ]]></search>
                    <add><![CDATA[
                    add this new code before code searched above
                    ]]></add></operation></file></modification>
17
Roy M J

ビュー内のすべてのファイルが.tpl拡張子で終わることに注意してください。

Tplファイルの変数値は、それぞれのコントローラーから取得されます。一方、コントローラーの変数値は、データベースからデータをフェッチするモデルから取得されます。

したがって、tplファイルの変数名を変更した場合は、それぞれのコントローラーファイルの変数名も変更してください。

2
dulton

@JackLB-テンプレートファイルには任意の名前を付けることができます。とにかく、すべてのテンプレートはコントローラーファイルで手動で指定されます。

コントローラーファイルで.tplを検索すると、次のようになります。

if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . 
'/template/common/header.tpl')) {
        $this->template = $this->config->get('config_template') . 
'/template/common/header.tpl';
    } else {
        $this->template = 'default/template/common/header.tpl';
    }

Opencartは、カスタムテンプレートフォルダーでテンプレートを検索します。見つからない場合は、デフォルトのテンプレートにフォールバックします。見つからない場合、エラーが表示されます。

それに応じてロケーションパスを変更します。

しかし、これはより洗練されています-コントローラ/テンプレートに同じ名前を使用するため。

1
Arnis Juraga