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}-->

とりあえず完成

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