ドキュメントAPIリファレンスCS-Cart.jp

商品リストおよび商品詳細ページのカスタムテンプレートを作成する方法

Suggest Edits

この記事では、商品リストおよび商品詳細ページのカスタムテンプレートを作成する方法について説明します。

また、これらのカスタムテンプレートを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はアドオンの管理から再度インストールしてください。

990

上の画像でもわかるように、アドオンの翻訳を含むファイルに作成したカスタム商品リストの言語変数を追加する必要があります。言語変数の名前は、テンプレート設定ファイルで商品リストをどのように呼び出したかによって異なります。

この場合、次のコードをvar/langs/en/addons/my_changes.poに追加する必要があります。

msgctxt "Languages::tmpl_modern"
msgid "Modern list"
msgstr "Modern list"

作成した商品リストのテンプレートを有効にすると、ストアフロントのカテゴリページに表示されます。ただし、テンプレートにはアイコンがありません。

980

アイコンの名前は、テンプレートの名前から決定されます。

たとえば、テンプレート設定ファイルの名前が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とします。

990

繰り返しになりますが、言語変数をアドオンの翻訳ファイルに追加する必要があります。言語変数の名前は、テンプレートファイルの名前と同じです。この例では、modern_templateです。

次のコードをvar/langs/en/addons/my_changes.poに追加する必要があります。

msgctxt "Languages::modern_template"
msgid "Modern Product"
msgstr "Modern Product"

Updated over 3 years ago