2012年3月8日カテゴリー:

EC-CUBE:商品一覧ページのカテゴリごとに画像を表示する

下記書籍をもとに書いています。詳しくは、本をお読みください。

(1)データベースに画像のファイルパスを登録する。
 dtb_categoryに3個のカラムを追加する。
■フィールド:pc_image 種別:TEXT
■フィールド:mb_image 種別:TEXT
■フィールド:sphone_image 種別:TEXT

 画像の縦・横サイズをmtb_constantsテーブルに登録する。下記6個。
id:CATEGORY_PC_IMAGE_WIDTH
name:765(←サイズは想定している環境に合わせる)
rank:1232(←適宜)
remarks:PCカテゴリ画像横幅

id:CATEGORY_PC_IMAGE_HEIGHT
name:200
rank:1233
remarks:PCカテゴリ画像縦幅

id:CATEGORY_SPHONE_IMAGE_WIDTH
name:320
rank:1234
remarks:スマートフォンカテゴリ画像横幅

id:CATEGORY_SPHONE_IMAGE_HEIGHT
name:83
rank:1235
remarks:スマートフォンカテゴリ画像縦幅

id:CATEGORY_MB_IMAGE_WIDTH
name:240
rank:1236
remarks:モバイルカテゴリ画像横幅

id:CATEGORY_MB_IMAGE_HEIGHT
name:62
rank:1237
remarks:モバイルカテゴリ画像縦幅

 システム設定>パラメーター設定を開き、「この内容で登録する」をクリック。

(2)管理画面からカテゴリ画像をアップロード・登録できるようにする。


 ■data/class/pages/admin/products/LC_Page_Admin_Products_Category.php
—————————————–
約20カ所の変更・追加
—————————————–

 ■data/class/SC_UploadFile.php
ファイル名の生成方法の追加。一番下、lfGetTmpImageNameメソッドを変更。
[php]
if( $rename === true ){

preg_match(“/category_/”, $rename, $matches);
if(count($matches)>0){
$uniqname = $rename;
}elseif( $rename === true ){
[/php]

 ■data/Smarty/templates/admin/products/category.tpl
管理画面 商品管理>カテゴリー登録のテンプレート変更
◆hidden要素を追加
[php]


登録 (上限文字)

 (上限文字)

画像サイズ:[×]

登録

[/php]

 アップロードできる画像サイズは、デフォルトでは1000KBになっているので、それより大きい画像をアップロードしようとすると、エラーメッセージが出る。
パラメータの「IMAGE_SIZE」の数値を変更する。

(3)商品一覧ページに画像を表示できるようにする
 ■data/class/pages/products/LC_Page_Products_List.php
129行目あたりに追加。画像のファイルパスをデータベースから取得。
[php]
//カテゴリ画像の取得
$this->category_image = $objQuery->select(‘pc_image,mb_image,sphone_image’, ‘dtb_category’, ‘category_id = ?’, array($this->arrForm[‘category_id’]));
[/php]

 商品一覧ページに画像を表示する。
【パターン1】各ページのタイトルの下に表示する場合
■data/Smarty/templates/default/products/list.tpl(PC)
★タイトル★の下に追加
[php]

■data/Smarty/templates/mobile/products/list.tpl(携帯)
一番上の「This file is part of EC-CUBE」コメントアウトの次(最初のコードとして)に追加。
[php]


■data/Smarty/templates/sphone/products/list.tpl(スマートフォン)

←タイトルの下
[php]


【パターン2】div要素の背景に指定する。(PCのみ)
■data/Smarty/templates/default/products/list.tpl(PC)
★タイトル★の箇所を書き換える。
[php]

[/php]

(4) 3カラムに対応するために、CSSに追加。ただし、上記のパターン2を利用した時は、画像の右側一部が表示されない。

■html/user_data/packages/default/css/contents.css
[php]

/* カテゴリごとの画像表示
———————————————– */
#three_maincolumn img.cate_img {
width:100%;
}

[/php]