アイネクシオ(inexio)

私たちはネットワークから新しいアイデアを創出します

EC-CUBE 商品一覧ページにデフォルトの情報がもっとほしい

2015/05/22 2015/03/13

Category:EC-CUBE, PHP, カスタマイズ Tag:, ,

EC-CUBE3の開発が始まり、新しいバージョンの登場が楽しみな気もしますね。
そんな新しいEC-CUBE3とは無関係な内容です・・・。

「EC-CUBEの商品一覧画面に、拡大画像とか、詳細メインコメントとか、デフォルトの情報をいろいろ載せたい」というご依頼がありました。その他調整は置いといて、一覧画面にもっと情報を載せることは、比較的簡単にカスタマイズできるので記載しておきます。

環境

2.13系であれば問題ないと思うけど、実装したのは2.13.3。

  • EC-CUBE 2.13.3
  • EC-CUBEはデフォルトの状態

拡張クラスの準備

商品一覧を出力するロジックを調整します。
以下クラスのlistsメソッドをまるまるコピーします。
/data/class/SC_Product.php

そして、以下拡張クラスにペーストします。
/data/class_extends/SC_Product_Ex.php

拡張クラスの調整

拡張クラスの準備でペーストしたファイルに、目的となるカラム情報を追加します。
ここでは以下の情報を追加することを目的としました。
持っている情報のほぼすべてかなぁ。

  • 詳細-メインコメント main_comment
  • 詳細-メイン拡大画像 main_large_image
  • 詳細-サブタイトル(1) sub_title1
  • 詳細-サブコメント(1) sub_comment1
  • 詳細-サブ画像(1) sub_image1
  • 詳細-サブ拡大画像(1) sub_large_image1
  • 詳細-サブタイトル(2) sub_title2
  • 詳細-サブコメント(2) sub_comment2
  • 詳細-サブ画像(2) sub_image2
  • 詳細-サブ拡大画像(2) sub_large_image2
  • 詳細-サブタイトル(3) sub_title3
  • 詳細-サブコメント(3) sub_comment3
  • 詳細-サブ画像(3) sub_image3
  • 詳細-サブ拡大画像(3) sub_large_image3
  • 詳細-サブタイトル(4) sub_title4
  • 詳細-サブコメント(4) sub_comment4
  • 詳細-サブ画像(4) sub_image4
  • 詳細-サブ拡大画像(4) sub_large_image4
  • 詳細-サブタイトル(5) sub_title5
  • 詳細-サブコメント(5) sub_comment5
  • 詳細-サブ画像(5) sub_image5
  • 詳細-サブ拡大画像(5) sub_large_image5

以下、listsメソッドの27~48行目を追加。
[html]
public function lists(&$objQuery)
{
$col = <<< __EOS__
product_id
,product_code_min
,product_code_max
,name
,comment1
,comment2
,comment3
,main_list_comment
,main_image
,main_list_image
,price01_min
,price01_max
,price02_min
,price02_max
,stock_min
,stock_max
,stock_unlimited_min
,stock_unlimited_max
,deliv_date_id
,status
,del_flg
,update_date

,main_large_image
,main_comment
,sub_title1
,sub_comment1
,sub_image1
,sub_large_image1
,sub_title2
,sub_comment2
,sub_image2
,sub_large_image2
,sub_title3
,sub_comment3
,sub_image3
,sub_large_image3
,sub_title4
,sub_comment4
,sub_image4
,sub_large_image4
,sub_title5
,sub_comment5
,sub_image5
,sub_large_image5
__EOS__;
$res = $objQuery->select($col, $this->alldtlSQL());

return $res;
}
[/html]
これでとりあえず準備はできた。

HTMLの調整

今度は出力するHTMLの調整。
個人的にSmartyは嫌いなんだけど、Smartyの調整となります。
嫌いなことは全然関係ないけどね。

調整するファイルは、PCであれば以下。
/data/Smarty/templates/default/products/list.tpl

スマートフォンであれば以下。
/data/Smarty/templates/sphone/products/list.tpl

Smartyのforeachループの中であれば、以下のような記述で出力できます。
[html]
<!–{foreach from=$arrProducts item=arrProduct name=arrProducts}–>
<!–{* 詳細-メインコメント であれば以下 *}–>
<!–{$arrProduct.main_comment}–>

<!–{* 詳細-サブコメント(5) であれば以下 *}–>
<!–{$arrProduct.sub_comment5}–>
<!–{/foreach}–>
[/html]

とりあえず完成

あとは細かいデザインの調整や、画像の拡大であればスクリプトの調整を行うことでバッチリ。

Avatar photo
家族と音楽とコーヒーを愛し、プログラマーとして存在しています。

執筆者:Takahiro