ウェブ、ショウジン

モバイル向けEC-CUBEで商品サムネイル画像を表示する

2010-4-20
Category
CMS

EC-CUBE version 2.4.x(たぶん2.4.3か2.4.4)

EC-CUBEのモバイル向けページでは、カテゴリなどの商品一覧ページにおいて商品のサムネイル画像が表示されないらしい。

1系だと表示できるそうだけど、2系ではできないとか?(1系をいじったことないので詳しくは知らない)

でも、カテゴリごとの商品一覧ページでサムネイル画像を表示したいので表示できるようにする。

この場合の「サムネイル画像」とは、商品登録において「一覧-メイン画像」として登録した画像。この画像はサイズが130×130で縦横比固定で出力される。

まず、携帯電話でのアクセスをリダイレクトさせる処理をしている
html/require.phpを編集する。

html/require.php

header("Location: ". SC_Utils_Ex::sfRmDupSlash($url . $path));
exit;

に、以下のようなif文を追加。

// resize_image.phpのときだけリダイレクトを解除
if(!preg_match("/resizse_image.php/i", $path)){
    header("Location: ". SC_Utils_Ex::sfRmDupSlash($url . $path));
    exit;
}

次に、カテゴリごとの商品一覧をリスト表示する
data/Smarty/templates/default/mobile/products/list.tplに以下の記述を追加。
(同ディレクトリ内にcategory_list.tplってのもあったけど、あれはなんだろう?)

商品一覧なのでリストで各商品情報を取得している。なのでforeach文の中にサムネールを表示する記述を追加する。

<!--{foreach from=$arrProducts key=i item=arrProduct}-->

という記述の後(このforeach文の中なら好きな場所に)

data/Smarty/templates/default/mobile/products/list.tpl

<!--▼携帯にサムネイルを表示する ここから-->
<img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image}-->" alt="<!--{$arrProduct.name|escape}-->" /><br />
<!--▲携帯にサムネイルを表示する ここまで-->

imgタグ内に幅を指定する「width=”100″」とかをハードコーディングしてしまえば
そのサイズに固定することも出来る。

しない状態では、前述のように130×130の中で縦横比固定でリサイズされる模様。

以下の記事が参考になりました。ありがとうございました。
EC-CUBE2系のモバイルサイトでサムネイル表示をする

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿