EC-CUBE 商品詳細ページのカスタマイズ方法

Pocket

EC-CUBE商品詳細ページの使い方とカスタマイズ方法

EC-CUBE 商品詳細ページのカスタマイズ方法

商品詳細ページのファイル構成

EC-CUBEの商品詳細ページのカスタマイズに必要なファイルは以下の場所にあります。

  • data->class->pages->products->LC…Products_Detail.php
  • data->class_extends->pages_extends->products->LC…Products_Detail_Ex.php
  • html->products->detail.php
  • data->Smarty->templates->template_name->products->detail.tpl
  • html->user_data->packages->template_name->css->contents.css

上の2つがクラスファイル。取得したいデータを変更したい場合はここを変更します。3つめはコントローラ。4つめがテンプレート。HTMLの構造を変更するときはここを変更します。最後がCSSファイル。テンプレートファイル内のpackagesフォルダにもCSSがありますが、ここを変更してもスタイルが変わらないので注意。

商品詳細ページの見た目をカスタマイズ

EC-CUBEの商品詳細のスタイルをカスタマイズするには、主にcontents.cssを編集します。デフォルトでは340行目あたりからおすすめ商品のスタイルが設定されています。
page-product-detail-css
購入ボタン画像の変更や、商品画像のサイズ変更なども行えます。

商品詳細ページで使えるデータ一覧

EC-CUBEのdetail.phpクラスで使えるデータ、配列は以下の通り。こちらも商品一覧同様、action関数内で飛び交う変数や配列は多いですが、実際使うのは少なめです。

  • $tpl_product_id : 現在のページの商品ID
  • $arrProduct : 現在のページの商品情報
  • $tpl_subtitle : ページタイトル
  • $arrRelativeCat : 関連カテゴリ
  • $productStatus : 商品のステータス
  • $arrReview : 現在の商品のレビュー情報
  • $arrRecommend : 現在の商品のおすすめ商品リスト

$arrProductから取得できるデータ配列はデータベースのdtb_productsを参照。

データの出力方法

商品詳細ページは一覧ページと違い、各コンテンツが独立して作られています。なので必要な場所に必要なデータを読み込ませればOK。

テンプレートのカスタマイズもSmartyの書き方がわかればとくに難しいものではないので、デフォルトテンプレートの構造を参考にしながら、先ほど紹介した配列や変数をHTMLコードに組み込めば簡単に作れます。