タグ: EC-CUBE

【EC-CUBE】PCサイトで追加した新着商品ブロックを携帯サイトでも追加する

以前に、追加した大変便利なブロック機能。「新着商品をブロックで表示する」(http://www.bton.net46.net/?p=493

 これは実装時には基本PCサイトでのみ動作していたのだけど、携帯でも同じように使用したい。

ということで、ちょこっと改変して、携帯でも使うことにする。

そこで、私は、http://www.bton.net46.net/?p=735で商品登録に携帯用のコメントを追加したので、モバイルサイトでは、PC用の普通の説明文ではなく、携帯用の説明文を表示させることにする。(そうすると絵文字も自由に使えるからね!)

さて、新着商品の表示だけど、トップページで、左に小さな写真、右に商品名、携帯用説明文(最初の60字)を表示させて、写真と商品名には詳細ページへのリンクをつける、ということにしたい。

その1)ブロックのPHPを作成する。

以前に作成した、/html/frontparts/bloc/new.phpをコピーして、/html/mobile/frontparts/bloc/new.phpとして保存。

コピーしたファイルを開き、最後から2行目、3行目の、

$objPage->init();
$objPage->process();

$objPage->mobileInit();
$objPage->mobileProcess();

に変更して保存。

その2)ブロック作成。

/data/Smarty/templates/default/mobile/frontparts/bloc/にnew.tplを作成し、下記ソースを参考に表示用のテンプレートブロックを作成する。

<!–{if count($arrFlagProducts) > 0}–>
<div style=”background-color:#3cf; color:#fff; font-size:small; padding:1px; text-align:center;”>新着商品</div>
<div style=”font-size:x-small; background-color:#cff;”>
<!–{section name=cnt loop=$arrFlagProducts step=1 max=6}–>
<!–{if $arrFlagProducts[cnt].main_list_image != “”}–>
<!–{assign var=image_path value=”`$arrFlagProducts[cnt].main_list_image`”}–>
<!–{else}–>
<!–{assign var=image_path value=”`$smarty.const.NO_IMAGE_DIR`”}–>
<!–{/if}–>
<div style=”clear:both;”><a href=”<!–{$smarty.const.MOBILE_DETAIL_P_HTML}–><!–{$arrFlagProducts[cnt].product_id}–>”><img src=”<!–{$smarty.const.SITE_URL}–>resize_image.php?image=<!–{$image_path|sfRmDupSlash}–>&amp;width=60&amp;height=60″ alt=”<!–{$arrFlagProducts[cnt].name|escape}–>” style=”float:left;margin-top:3px; margin-right:3px; margin-bottom:8px; margin-left:3px;” align=”left” border=”0″ /></a>
<span style=”<!–color:#f36;–>”>[emoji:148]&nbsp;<a href=”<!–{$smarty.const.MOBILE_DETAIL_P_HTML}–><!–{$arrFlagProducts[cnt].product_id}–>”><strong><!–{$arrFlagProducts[cnt].name|escape}–></strong></a></span><br /><br />
[emoji:76]<span style=”color:#666;”><!–{if !$arrProduct.comment7}–><!–{$arrFlagProducts[cnt].main_list_comment|mb_strimwidth:0:60:”…”|escape|nl2br}–><!–{else}–><!–{$arrFlagProducts[cnt].comment7|mb_strimwidth:0:60:”…”|escape|nl2br}–><!–{/if}–></span><br clear=”all” /></div>
<!–{/section}–>
</div>

ポイント。

リサイズイメージで、商品画像を60×60pxに変換している。
SECTIONのループで、max=6と指定しているので、新着商品は6個表示される。
imgタグのSTYLE属性で画像を左にfloatさせている。ドコモXHTMLでは、floatの解除は、brタグではできないので、divタグのスタイル属性でstyle=”clear:both;”とするんであるが、古い携帯の場合、これでクリアされないかもしれないので、念のため、保険代わりに<br clear=”all” />も追加しておく。
最後のほうで、携帯用のコメント(comment7)があれば、それを表示し、携帯コメントが登録されていなければ、PC用のコメントを表示する、としている。また、コメントはいずれも全角30字とし、それ以上長いものは、省略させている。
こんなとこ。
変数名が前回保存したPC用のソースで指定したものと一致しているか確認すること。(変数名が違うと表示されない)

その3)データベースから抽出されるデータにcommnet7を追加しておく。

/data/class/db/dbfactory/SC_DB_DBFactory_MYSQL.php

のL368あたりから(ver.2.3.3の場合)vw_products_allclassというのがあるので、この中の           comment3,の下あたりにcomment7,を1行追加。

ついでなので、その20行ほど下の、

 T0.comment3,の下にも、
 T0.comment7,を1行追加しておいた。

【EC-CUBE】携帯サイトのニュース表示を調整する

モバイルサイトでは、ニュースは、最新1つだけ、しかもタイトルのみしか表示されない。

これだと更新履歴や商品入荷情報などを配信したい場合、ちょいと不都合。

ということで、モバイルサイトのニュースでも、

日付: 「2009.02.01」 というように。
タイトル:「○○が入荷しました!」というように。
本文:「オススメの人気ブランド○○のTシャツ緊急入荷!急げ!」というように。(また、本文は、文字数を頭から20字のみ表示、というように丸めたい場合もあると思うので、それも踏まえて改修。)

こういう表記になるように変更する。

これも基本、PCサイトのソースを持ってきて変更するだけ。

NEWSはPCと同じCLASSのロジックを使用しているので、基本テンプレのファイルを修正するだけでOK。
PCサイトのほうからソースをコピーしてきて、モバイル用に表示のHTMLを変更していく。

ニュースブロックの中身を変更する。

/data/Smarty/templates/default/mobaile/frontparts/bloc/news.tpl

を開く。

ソースを下記を参考に変更する。(※XHTMLで記述している)

<div style=”color:#666; font-size:small;”><strong>NEWS!!</strong></div>
<!–{section name=data loop=$arrNews}–>
<!–{assign var=”date_array” value=”-“|explode:$arrNews[data].news_date_disp}–>
<div style=”color:#666; font-size:x-small;”>[emoji:e54]<!–{$date_array[0]}–>.<!–{$date_array[1]}–>.<!–{$date_array[2]}–></div>
<div style=”color:#666; font-size:x-small;”>
<!–{if $arrNews[data].news_url}–><a href=”<!–{$arrNews[data].news_url}–>”>
<!–{/if}–>
<!–{$arrNews[data].news_title|escape|nl2br}–>
<!–{if $arrNews[data].news_url}–></a></span>
<!–{/if}–><br />
<!–{$arrNews[data].news_comment|mb_strimwidth:0:40:”…”|escape|nl2br}–>
</div>
<!–{/section}–>

小さくポイントになるところを解説。

  1. SECTIONでloopさせている$arrNewsは、ニュースの数だけ繰り返し、という意味なので、例えば最新の3つのニュースを表示するのであれば、$arrNewsではなく、「3」といれる。
  2. <!–{$date_array[0]}–>.<!–{$date_array[1]}–>.<!–{$date_array[2]}–>は、2009.02.01というように日付の区切りを[.]にしているので、/にしたければ、[/]に変更すればよいし、[]、[]、[]としたければ、そのように記述。
  3. mb_strimwidth:0:40:”…”| この部分で、ニュース本文の最初(0文字目)から40字目(半角なので、全角文字の場合は、これで20字ということ)までを表示し、最後に[…]を追加する、ということを言っている。[…]を[続く]としたり、他の記号にすることもできるし、40字ではなく60字などにすることもできる。

 こんなもんかな?

【EC-CUBE】携帯サイトの検索でもカテゴリ一覧検索を使用したい

EC-CUBEでは携帯サイトの商品検索は、PCよりしょぼい・・・(失礼!)

というか、こういう仕様になったのにはそれなりの訳もあるのかもしれない(表示のパフォーマンスや色々あるのかもしれないし、単にこっちはとりあえず実装だったのかもしれない)が、PCサイトでは、商品検索でカテゴリ検索ができる。検索窓でカテゴリの一覧から検索対象のカテゴリを選択することができるのだ。

これが、モバイルのほうでは、いきなり検索したい商品名を入力してちょ、とくる。そして別画面で検索のみ行う仕様である。
初めてのユーザーや特定の商品名、キーワードのイメージがないユーザーには、ちょいと使いにくい仕様である。なので、これをカスタマイズして、PCと同じくカテゴリ検索ができるようにする。

searchimage

こういう感じ。この機能をブロックにして、トップページなどで利用できるようにする。
モバイルサイトでは、ブロックは管理画面から配置するのではなく、該当するテンプレート中に、直接インクルードするので、今回はデータベースと管理画面は触らない。

基本的には、PCサイトのsearchのロジックをMOBILEに移植するだけでOK。

【携帯サイトへカテゴリ検索ブロックの追加】

その1)ブロック用PHP作成。

/html/frontparts/bloc/search_products.php をコピーして、
/html/mobile/frontparts/bloc/search_products.php として保存。

コピーしたファイルを開き、最後から2行目、3行目に、

$objPage->init();
$objPage->process();

というそーすがあるのを、

$objPage->mobileInit();
$objPage->mobileProcess();

と変更する。

その2)ブロック作成。

/data/Smarty/templates/default/mobile/frontparts/bloc/に、SearchProducts.tplという名称でテンプレファイルを作成し、PC用のSearchProducts.tplを参考にしながら、コーディング。

参考までに、上記のようなデザインにするためのコードは下記。(※XHTMLにてコーディングした場合)

<div style=”background-color:#96c; color:#fff; font-size:small; padding:1px; text-align:center;”>[emoji:119]&nbsp;商品検索&nbsp;[emoji:119]</div>
<div style=”font-size:x-small; padding:1px; background-color:#EEE6F7;”>&nbsp;お探しの商品名・型番を入力してください。</div>
<div style=”text-align:center; font-size:x-small;”><br /><form name=”search_form” id=”search_form” method=”get” action=”<!–{$smarty.const.URL_DIR}–>products/list.php”>
カテゴリから選ぶ<br />
<input type=”hidden” name=”mode” value=”search” />
<select name=”category_id”>
<option label=”全ての商品” value=””>全ての商品</option>
<!–{html_options options=$arrCatList selected=$category_id}–>
</select><br />
商品名を入力する<br />
<input type=”text” name=”name2″ maxlength=”50″ value=”<!–{$smarty.get.name|escape}–>” />
<br />
<input type=”submit” name=”search” value=”&nbsp;&nbsp;&nbsp;検索&nbsp;&nbsp;&nbsp;”>
</form>

これで、検索ブロックの基本は完成。

その3)最後に、トップページへ検索ブロックを埋め込む。

/data/Smarty/templates/default/mobile/top.tpl の、検索窓を表示したい箇所に、

<!–{include_php file=`$smarty.const.MOBILE_HTML_PATH`frontparts/bloc/search_products.php}–>

と記述。もちろん他のページでもかまわない。現状のEC-CUBEの構造で、検索ページの中身をカテゴリ検索の形に変更したいのであれば、

/html/mobile/products/search.php と

/data/Smarty/templates/default/mobile/products/search.tpl のソースを上記で出来上がるソースに置き換えればいい。(または、別に上記ソースを作成しておいて、商品検索のリンクのみ、/html/mobile/frontparts/bloc/search_products.phpへのリンクパスに変更すればいい。

他にも色々やった(オススメや新着のランダム表示ブロックに携帯機能を追加したりとかトップエページにカテゴリリストをボーダーデザインで出すようにしたりとか)けど、以外にスムーズに行き過ぎ、小さく色々さわりすぎたもんで、手順を記録できず、整理するのが大変・・・(^^;

次のときに必要だから、思い出して必ず記録する!乙!

【EC-CUBE】携帯サイトをXHTML仕様にする

今はモバイルサイトの仕様過渡期なので、ちょいと注意が必要なんだけども。

というのも、少し前に、モバイルXHTMLの標準化について、なんとなく関係各処でオーソライズされたらしいので。けれど、しばらくは、色々な事情からこのネタも生きることであろう。

モバイルサイトをXHTMLにすると何がいいかというと、ドコモでインラインCSSが使えるようになる。
ドコモなどで、文字に背景をつけたいとかインラインスタイルを書いて色々ちょいと調整したいとか、ただでさえ制限の多い携帯のコーディングで、少しでも自由な表現をするには、やっぱりスタイルシートが使えないと不便。

画像の多様で容量上げて凝ったデザインにするのはECではつらいので、モバゲーみたいに色々デザインされたページを無理なくコードで実現しようとすると、やっぱりCSSが必要なんである。

細かいところは、携帯サイトのコーディングについて詳しいサイトがいくつも公開されているので、そちらにお願いすることにして、とりあえず抑えておくポイントは、EC-CUBEのようなシステムベースだから3キャリア共通でHTMLソースを使用したいという場合には、XHTMLで、ドコモ向けにコーディングし、小さなところで、auやソフトバンク向けに調整する、ということが必要なんである。

ドコモでは、XHTMLは、docタイプが適切に出力されて、MIMEタイプがapplication/xhtml+xmlとして認識されて、などいくつかの制限がクリアされないとXHTMLと認識されず、HTMLと認識されてしまう。

EC-CUBEはSMARTYのテンプレートを使用しているので、ページがdisplayされる前に、mimetypeにxhtml+xmlをセットする。

【EC-CUBEの携帯サイトを3キャリア対応のXHTMLにするための手順】

1)/data/Smarty/templates/default/mobile/site_frame.tplのヘッダを、

<?xml version=”1.0″ encoding=”Shift_JIS”?> ※この行はなくても可。
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1)1.0//EN” “i-xhtml_4ja_10.dtd”>
<html xml:lang=”ja”> 

または、

<?xml version=”1.0″ encoding=”Shift_JIS”?> ※この行はなくても可。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”application/xhtml+xml; charset=Shift_JIS” />

とする。

2)/data/class/helper/SC_Helper_Mobile.phpのL253あたりに、

 function sfMobileInit() {
ini_set(“default_mimetype”, “application/xhtml+xml”);  //1行追加
$this->lfMobileInitInput();

これで、OK。

【EC-CUBE】携帯サイトで、画像リサイズの問題を解決する

その1)

デザイン画像について。

EC-CUBEでは、携帯サイトに使用している画像は、容量圧縮のため、自動的に低解像度のJPGに変換され、アクセスごとにアクセスしてきた携帯端末の画面サイズに合わせてリサイズされ、/upoad/mobile_image/にたまっていく。

けれど、これをされると、最初から携帯サイト向けに最適化したデザイン画像まで全てJPGで圧縮されるため、画質がエラきたない;しかも、小さなサイズの画像も横幅が一旦画面いっぱいになるようにサイズ変更される。(なんで、GIFで容量も最適化してアップロードした携帯用画像までJPG変換するのか・・・)

これでは、どの端末で見ても携帯画面の横幅いっぱいに画像が表示されますよ、奥さん。以上の弊害が大きすぎるので、もう少しグレードアップして、本当にキレイに最適化されるまで、暫定的にこの自動リサイズ機能は使わないことにする。

auやドコモでは、横幅いっぱいにしたい画像は、横幅が大きければ端末のほうで自動的にリサイズして表示してくれるので、240px位で作っておけばいいのだ。

/data/require_base.php

のL72あたり(EC-CUBE Ver.2.3.3の場合)、

require_once(CLASS_PATH . “SC_MobileImage.php”);

をコメントアウト。

これで勝手にリサイズ&変換されなくなる。

ただし、これで、横幅自動変換機能はあくまで携帯端末の機能に頼ることになるので、ソフトバンクの高解像度携帯など、一部の携帯では、横幅が広いのに小さくしか画像が表示されず、レイアウトがちょいと見にくいなど、弊害もなくはないということは認識しておく必要アリ。

その2)

つぎに、商品画像について。

商品画像は、管理画面の商品登録で、大・中・小の3種類の大きさで保存される。(必須登録は中サイズで、中または大画像をアップロードすると、それより小さいサイズは登録時に自動的にリサイズされた画像が作成される)

これは、どのサイズもPCサイトではそれなりの大きさ及び画質で表示させたいので、携帯用に小さい画像にしてしまうのは、ちぃとな~。

ところが、携帯では、なぜかresize_imageが使用できない。。。

このままでは、携帯ページのコーディングで画像サイズを指定して小さく見せることはできるが、商品リストに画像も表示したいときなんかは、画像自体は元の容量だから、容量制限のキビシイ携帯サイトでは、やっぱりつらいのである。

ということで、require.phpを少し修正して、携帯サイトでも、resize_imageが使用できるようにする。これで容量エコになる♪

携帯サイトでresize_imageがうまく動作しないのは、リダイレクトが影響しているらしい。

/html/require.php のコード、一番下のほうに、

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

というソースがあるので、これを、

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

と変更。

表示させるほうのHTMLは、

<img src=”<!–{$smarty.const.SITE_URL}–>resize_image.php?image=<!–{$image_path|sfRmDupSlash}–>&amp;width=60&amp;height=60″>

などとすればOK。

参考サイト:http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=1838&forum=11