EC-CUBE 商品一覧ページにデフォルトの情報がもっとほしい
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行目を追加。
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の調整。
個人的にSmartyは嫌いなんだけど、Smartyの調整となります。
嫌いなことは全然関係ないけどね。
調整するファイルは、PCであれば以下。
/data/Smarty/templates/default/products/list.tpl
スマートフォンであれば以下。
/data/Smarty/templates/sphone/products/list.tpl
Smartyのforeachループの中であれば、以下のような記述で出力できます。
<!--{foreach from=$arrProducts item=arrProduct name=arrProducts}--> <!--{* 詳細-メインコメント であれば以下 *}--> <!--{$arrProduct.main_comment}--> <!--{* 詳細-サブコメント(5) であれば以下 *}--> <!--{$arrProduct.sub_comment5}--> <!--{/foreach}-->
とりあえず完成
あとは細かいデザインの調整や、画像の拡大であればスクリプトの調整を行うことでバッチリ。