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メソッドを変更。

 if( $rename === true ){
 ↓
 preg_match("/category_/", $rename, $matches);
 if(count($matches)>0){
 $uniqname = $rename;
 }elseif( $rename === true ){

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

 <input type="hidden" name="image_key" value="" />
 <!--{foreach key=key item=item from=$arrForm.arrHidden}-->
 <input type="hidden" name="<!--{$key}-->" value="<!--{$item|h}-->" />
 <!--{/foreach}-->

◆登録フォームのコードを変更


<input type="text" name="category_name" value="<!--{$arrForm.category_name|h}-->" size="30" class="box30" maxlength="<!--{$smarty.const.STEXT_LEN}-->" />

<a class="btn-normal" href="javascript:;" onclick="fnModeSubmit('edit','',''); return false;"><span class="btn-next">登録</span></a><span class="attention">&nbsp;（上限<!--{$smarty.const.STEXT_LEN}-->文字）</span>

↓

<input type="text" name="category_name" value="<!--{$arrForm.category_name|h}-->" size="30" class="box30" maxlength="<!--{$smarty.const.STEXT_LEN}-->" /><span class="attention">&nbsp;（上限<!--{$smarty.const.STEXT_LEN}-->文字）</span><br />

<!--{if $arrForm.mode == 'pre_edit' || $arrForm.mode == 'upload_image' || $arrForm.mode == 'delete_image'}-->

<!--{assign var=key value="pc_image"}-->

画像サイズ：[<!--{$smarty.const.CATEGORY_PC_IMAGE_WIDTH}-->×<!--{$smarty.const.CATEGORY_PC_IMAGE_HEIGHT}-->]<br>

<span class="attention"><!--{$arrErr[$key]}--></span>

<!--{if $arrForm.arrFile[$key].filepath != ""}-->

<img src="<!--{$arrForm.arrFile[$key].filepath}-->" width = "570" height = "150" alt="<!--{$arrForm.name|h}-->" />　<a href="" onclick="fnModeSubmit('delete_image', 'image_key', '<!--{$key}-->'); return false;"><br />[画像の取り消し]</a><br />

※表示されているのはスマートフォン用の画像です。<br/>

<!--{/if}-->

<input type="file" name="<!--{$key}-->" size="40" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" />

<a class="btn-normal" href="javascript:;" name="btn" onclick="fnModeSubmit('upload_image', 'image_key', '<!--{$key}-->'); return false;">アップロード</a><br />

<!--{/if}-->

<a class="btn-normal" href="javascript:;" onclick="fnModeSubmit('edit','',''); return false;"><span class="btn-next">登録</span></a>

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

（3）商品一覧ページに画像を表示できるようにする
①　■data/class/pages/products/LC_Page_Products_List.php
129行目あたりに追加。画像のファイルパスをデータベースから取得。

 //カテゴリ画像の取得
 $this->category_image = $objQuery->select('pc_image,mb_image,sphone_image', 'dtb_category', 'category_id = ?', array($this->arrForm['category_id']));

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


<!--★タイトル★-->

<h2 class="title"><!--{$tpl_subtitle|h}--></h2>

<!--★カテゴリ画像★-->

<!--{if $category_image[0].pc_image}-->

<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$category_image[0].pc_image|h}-->" alt="カテゴリ画像" class="picture cate_img" />

<!--{/if}-->

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

 <!--★カテゴリ画像★-->
 <!--{if $category_image[0].mb_image}-->
 <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$category_image[0].mb_image|h}-->" alt="カテゴリ画像" /><br>
 <!--{/if}-->

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

←タイトルの下

 <!--★カテゴリ画像★-->
 <!--{if $category_image[0].sphone_image}-->
 <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$category_image[0].sphone_image|h}-->" alt="カテゴリ画像" /><br>
 <!--{/if}-->

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


<!--{if $category_image[0].pc_image}-->

<!--★タイトル／背景にカテゴリ画像★-->

<div style="background:url(<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$category_image[0].pc_image|h}-->) no-repeat; width:100%; height:<!--{$smarty.const.CATEGORY_PC_IMAGE_HEIGHT}-->px;">

<div style="background-color:#000; padding:5px 0 0 10px; opacity:0.5;"><h2 style="font-size:170%; color:#FFF;"><!--{$tpl_subtitle|h}--></h2></div>

</div>

<!--{else}-->

<!--★タイトル★-->

<h2 class="title"><!--{$tpl_subtitle|h}--></h2>

<!--{/if}-->

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

■html/user_data/packages/default/css/contents.css


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

このエントリーをはてなブックマークに追加