【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字などにすることもできる。

 こんなもんかな?