日: 2009年2月4日
受注確認メールの支払い先をメール中に挿入する。その時に支払方法ごとに挿入内容を変える。
/data/Smarty/templates/default/mail_templates/order_mail.tplに、支払方法ごとに支払方法を追加する。
<!–{if $arrOrder.payment_method == “銀行振込” }–>
銀行振込み先：○○銀行 ○○支店
口座番号 普通 ○○○○○
口座名義 ○○○○<!–{elseif $arrOrder.payment_method == “郵便振替” }–>
郵便振替え先：記号○○ 番号○○
口座名義 ○○○○<!–{else$arrOrder.payment_method == “○○ }–>
支払い先：○○
<!–{else}–>
代金引換えにて配送いたします。
商品お受取りの際、配達員に代金をお支払いください。<!–{/if}–>
以前に、追加した大変便利なブロック機能。「新着商品をブロックで表示する」（http://www.bton.net46.net/?p=493）
これは実装時には基本PCサイトでのみ動作していたのだけど、携帯でも同じように使用したい。
ということで、ちょこっと改変して、携帯でも使うことにする。
そこで、私は、http://www.bton.net46.net/?p=735で商品登録に携帯用のコメントを追加したので、モバイルサイトでは、PC用の普通の説明文ではなく、携帯用の説明文を表示させることにする。（そうすると絵文字も自由に使えるからね！）
さて、新着商品の表示だけど、トップページで、左に小さな写真、右に商品名、携帯用説明文（最初の60字）を表示させて、写真と商品名には詳細ページへのリンクをつける、ということにしたい。
以前に作成した、/html/frontparts/bloc/new.phpをコピーして、/html/mobile/frontparts/bloc/new.phpとして保存。
コピーしたファイルを開き、最後から2行目、3行目の、
$objPage->init();
$objPage->process();
を
$objPage->mobileInit();
$objPage->mobileProcess();
に変更して保存。
/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}–>&width=60&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] <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用のソースで指定したものと一致しているか確認すること。（変数名が違うと表示されない）
/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行追加しておいた。
モバイルサイトでは、ニュースは、最新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}–>
小さくポイントになるところを解説。
こんなもんかな？
EC-CUBEでは携帯サイトの商品検索は、PCよりしょぼい･･･（失礼！）
というか、こういう仕様になったのにはそれなりの訳もあるのかもしれない（表示のパフォーマンスや色々あるのかもしれないし、単にこっちはとりあえず実装だったのかもしれない）が、PCサイトでは、商品検索でカテゴリ検索ができる。検索窓でカテゴリの一覧から検索対象のカテゴリを選択することができるのだ。
これが、モバイルのほうでは、いきなり検索したい商品名を入力してちょ、とくる。そして別画面で検索のみ行う仕様である。
初めてのユーザーや特定の商品名、キーワードのイメージがないユーザーには、ちょいと使いにくい仕様である。なので、これをカスタマイズして、PCと同じくカテゴリ検索ができるようにする。
こういう感じ。この機能をブロックにして、トップページなどで利用できるようにする。
モバイルサイトでは、ブロックは管理画面から配置するのではなく、該当するテンプレート中に、直接インクルードするので、今回はデータベースと管理画面は触らない。
基本的には、PCサイトのsearchのロジックをMOBILEに移植するだけでOK。
【携帯サイトへカテゴリ検索ブロックの追加】
/html/frontparts/bloc/search_products.php をコピーして、
/html/mobile/frontparts/bloc/search_products.php として保存。
コピーしたファイルを開き、最後から2行目、3行目に、
$objPage->init();
$objPage->ｐrocess();
というそーすがあるのを、
$objPage->mobileInit();
$objPage->mobileProcess();
と変更する。
/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] 商品検索 [emoji:119]</div>
<div style=”font-size:x-small; padding:1px; background-color:#EEE6F7;”> お探しの商品名・型番を入力してください。</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=” 検索 ”>
</form>
これで、検索ブロックの基本は完成。
その３）最後に、トップページへ検索ブロックを埋め込む。
/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へのリンクパスに変更すればいい。
他にも色々やった（オススメや新着のランダム表示ブロックに携帯機能を追加したりとかトップエページにカテゴリリストをボーダーデザインで出すようにしたりとか）けど、以外にスムーズに行き過ぎ、小さく色々さわりすぎたもんで、手順を記録できず、整理するのが大変･･･（＾＾；
次のときに必要だから、思い出して必ず記録する！乙！
今はモバイルサイトの仕様過渡期なので、ちょいと注意が必要なんだけども。
というのも、少し前に、モバイル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にするための手順】
１）/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” />
とする。
２）/data/class/helper/SC_Helper_Mobile.phpのL253あたりに、
function sfMobileInit() {
ini_set(“default_mimetype”, “application/xhtml+xml”); //1行追加
$this->lfMobileInitInput();
これで、OK。