商品リストおよび商品詳細ページのカスタムテンプレートを作成する方法
この記事では、商品リストおよび商品詳細ページのカスタムテンプレートを作成する方法について説明します。
また、これらのカスタムテンプレートをMy Changesアドオンの一部として保存します。
My Changesアドオンのフォルダーにカスタムテンプレートを保存することには、以下2つの利点があります。
- 作成または変更したテンプレートファイルの追跡が簡単に行えます。
- アップグレード後に変更を再適用する必要が無くなります。
designまたはvar/themes_repositoryフォルダーで作業できます。
先に進む前に、これらのフォルダー構造を理解してください。
商品リストのテンプレート
デフォルトでは、CS-Cartには、商品リスト用の3つのテンプレートタイプが用意されています。
- グリッド(products_multicolumns.tpl)
- オプションなしのリスト(products_without_options.tpl)
- コンパクトリスト(short_list.tpl)
これらのテンプレートのいずれかをデフォルトとして設定するには、管理パネルを開き、基本設定→表示設定→「商品一覧ページのレイアウト設定」に進みます。
My Changesアドオンを利用して商品リストのカスタムテンプレートを追加するには、カスタム商品リストのテンプレート設定を含むファイルと、テンプレート自体のファイルを作成します。
テンプレートのディレクトリ構造
|
└─ addons/
|
└─ my_changes/
|
└─ blocks/
|
├─ list_templates/
| |
| └─ modern_list.tpl (商品リストのテンプレート)
|
└─ product_list_templates/
|
└─ products_modern_list.tpl(テンプレートの設定ファイル)
設定を含むファイルには、追加するテンプレートとその設定が記述されています。
既存の商品リストテンプレートの1つをtemplates/blocks/list_templates
からtemplates/addons/my_changes/blocks/list_templates
にコピーしてから、テンプレートの名前を変更することをお勧めします。
既存のテンプレートのファイルをコピーすることで構文エラーのリスクを最小限に抑えることができます。
テンプレート設定ファイルの例
{** template-description:tmpl_modern **}
{** 上記の行は、テンプレートの名前がtmpl_modernと呼ばれる言語変数に格納されることを意味します **}
{** 以下は、テンプレートの場所と設定です。**}
{include file="addons/my_changes/blocks/list_templates/modern_list.tpl"
show_name=true
show_sku=false
show_rating=true
show_features=true
show_prod_descr=true
show_old_price=true
show_price=true
show_clean_price=true
show_list_discount=true
show_discount_label=true
show_product_amount=true
show_product_edp=true
show_add_to_cart=true
show_list_buttons=true
show_descr=true }
テンプレート設定の簡単な説明
名称 | タイプ | 説明 |
---|---|---|
show_name | Boolean (true / false) | 商品名を表示 |
show_sku | Boolean (true / false) | 商品コードを表示 |
show_rating | Boolean (true / false) | レビュー(星)を表示 |
show_features | Boolean (true / false) | 商品の追加情報を表示 |
show_old_price | Boolean (true / false) | 商品の通常価格を表示します。 |
show_price | Boolean (true / false) | 商品価格を表示 |
show_clean_price | Boolean (true / false) | 税込みの価格を表示 |
show_discount_label | Boolean (true / false) | 割引額を表示 |
show_product_amount | Boolean (true / false) | 在庫数を表示 |
show_add_to_cart | Boolean (true / false) | カートに追加ボタンを表示 |
show_list_buttons | Boolean (true / false) | リストボタンを表示 (欲しいものリストに追加、比較リストに追加など) |
show_descr | Boolean (true / false) | 商品の説明を表示 |
but_role | Text | テンプレートでのボタンの表示方法。 使用可能な[役割]のいずれかを選択。 Action Text Delete Big Tool |
すべて正しく設定出来ていれば、新しいテンプレートが管理パネルの[一般設定]→[表示設定]に表示されます。
カスタムテンプレートが表示されない場合は、[アドオン]→[アドオンの管理]に移動し、My Changes アドオンが有効であることを確認します。
var/themes_repository/templates/addons/my_changes
で作業している場合、My Changesをアンインストールする必要があります。
My Changesはアドオンの管理から再度インストールしてください。

上の画像でもわかるように、アドオンの翻訳を含むファイルに作成したカスタム商品リストの言語変数を追加する必要があります。言語変数の名前は、テンプレート設定ファイルで商品リストをどのように呼び出したかによって異なります。
この場合、次のコードをvar/langs/en/addons/my_changes.po
に追加する必要があります。
msgctxt "Languages::tmpl_modern"
msgid "Modern list"
msgstr "Modern list"
作成した商品リストのテンプレートを有効にすると、ストアフロントのカテゴリページに表示されます。ただし、テンプレートにはアイコンがありません。

アイコンの名前は、テンプレートの名前から決定されます。
たとえば、テンプレート設定ファイルの名前がproducts-modern-list
の場合、アイコンの名前はty-icon-products-modern-list
になります。画像を用紙してCSSを書き換えてください。
商品詳細ページのテンプレート
デフォルトでは、CS-Cartには、商品詳細ページ用の2つのテンプレートタイプが用意されています。
- デフォルトのテンプレート(default_template.tpl)
- 商品画像大(bigpicture_template.tpl)
これらのテンプレートのいずれかをデフォルトとして設定するには、管理パネルを開き、一般設定→表示設定→商品詳細ページのビューに進みます。
My Changesアドオンを介して商品詳細ページのカスタムテンプレートを作成するには、templates/addons/my_changes/blocks/product_templates
ディレクトリに.tpl
ファイルを作成する必要があります。
テンプレートの構造
templates/
|
└─ addons/
|
└─ my_changes/
|
└─ blocks/
|
└─ product_templates/
|
└─ modern_template.tpl
templates/blocks/product_templates
から既存のテンプレートのいずれかをコピーすることをお勧めします。コピーしたファイル名はmodern_template.tpl
とします。

繰り返しになりますが、言語変数をアドオンの翻訳ファイルに追加する必要があります。言語変数の名前は、テンプレートファイルの名前と同じです。この例では、modern_template
です。
次のコードをvar/langs/en/addons/my_changes.po
に追加する必要があります。
msgctxt "Languages::modern_template"
msgid "Modern Product"
msgstr "Modern Product"
Updated over 3 years ago