EC-CUBE で新着情報・お知らせの表示件数を変更する方法


[初回公開] 2007.07.26

EC-CUBE の過去のバージョンでは新着情報やお知らせ欄に表示する件数が一定数を上回ると古い情報が表示されなくなり、別途バックナンバーを表示するカスタマイズが必要だったが最近の EC-CUBE は古いお知らせ情報も表示されるようになったがその初期表示数や追加で表示する件数を変更する方法を紹介する。

EC-CUBE で新着情報・お知らせの表示件数を変更する方法




1.EC-CUBE でお知らせを多く出すメリット


EC-CUBE で新着情報・お知らせ欄を利用する用途としては営業日の変更や年末年始など定休日の周知といった事務的な内容で利用されることが多いが、取り扱う商品の入れ替えが多い場合は商品入荷の情報と、その商品へのリンクを貼ることで誘導しやすくなるメリットがある。
また、商品名だけでなく少し説明文も付けることで SEO にも効果があり検索結果に表示されやすくするための助力となる。



2.バージョン 4 系でのお知らせ表示数の変更方法


EC-CUBE の新着情報・お知らせの表示状態

最近の EC-CUBE は過去の新着情報・お知らせ欄を表示するバックナンバーのページが無い代わりに、ボタン「more」をクリックするごとに一定数の新着・お知らせ情報が追加で同じページ内で表示される仕組みになっている。
初期のインストール状態では最大 5 件の新着・お知らせ情報が表示され、ボタンをクリックするとさらに追加で 5 件表示される。
この初期表示とボタンクリック時の追加表示件数を変更するには PHP ファイルはサーバ上で次のコマンドで開いて修正してもよいし、手元のテキストエディタ等で修正したファイルをアップロードしてもよい。

# vi /{EC-CUBE を設置したフルパス}/src/Eccube/Resource/template/default/Block/news.twig


news.twig は実際に HTML タグ等を記入するテンプレートファイルとなり、下記の矢印で示す行の数値を変更することで画面を開いた直後の初期表示件数を変更することができる。

<script>
$(function() {
$('.ec-newsRole__news').each(function() {
var listLength = $(this).find('.ec-newsRole__newsItem').length;
if (listLength > 5) { ←ここ
$(this).find('.ec-newsRole__newsItem:gt(4)').each(function() { ←ここ
$(this).hide();
(略)


次にボタン「more」をクリックした際に追加で新着・お知らせを表示する件数を変更する。

$(this).append('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'more'|trans }}</a>');
var dispNum = 5; ←ここ
$(this).find('#news_readmore').click(function() {
dispNum += 5; ←ここ
$(this).parent().find('.ec-newsRole__newsItem:lt(' + dispNum + ')').show();
if (dispNum >= listLength) {
$(this).hide();
}
})
}
});


初期インストール直後の状態では計 11 個の新着情報があれば、初期の画面表示時に 5 件表示される。
ボタン「moreを押すとさらに 5 件追加されて計 10 件が画面上に表示される。
まだ最後の 1 個が表示されていないのまだボタン「more」がまだ表示されており、「more」をクリックすると最後の 1 件も表示される



3.バージョン 1.3.0 での新着情報の表示方法


旧バージョンでの EC-CUBE の新着情報・お知らせの表示状態

過去の EC-CUBE にはボタン「more」で次々に新着情報・お知らせが表示される仕組みになっていないため、別途バックナンバーを表示するページを用意する必要がある。
用意するものは「処理する PHP ファイル」「HTML テンプレートファイル」の 2 つである。
まずは呼び出し元となる PHP ファイルを用意するために、index.php がある階層にバックナンバー用のディレクトリを用意する。
ここでは「backnumber」という名称とし、そのディレクトリの中にさらに index.php というファイル名のファイルを用意して下記を記述する。

<?php
require_once("../require.php");

class LC_Page {
 function LC_Page() {
  /** 必ず指定する **/
  $this->tpl_mainpage = 'backnumber/index.tpl';
  $this->tpl_page_category = 'backnumber';
  $this->tpl_title = 'お知らせ一覧';
 }
}

$objPage = new LC_Page();
$objView = new SC_SiteView();

// レイアウトデザインを取得
$objPage = sfGetPageLayout($objPage, false, DEF_LAYOUT);

//新着情報取得
$objPage->arrNews = lfGetNews();

// 画面の表示
$objView->assignobj($objPage);
$objView->display(SITE_FRAME);
//-------------------------------------------------------
/* 新着情報取得 */
function lfGetNews(){
 global $tmp_id;
 $conn = new SC_DBConn();
 
 $sql = "SELECT
  news_id,
  news_date,
  rank,
  news_title,
  news_comment,
  news_url,
  news_select,
  link_method,
  creator_id,
  create_date,
  update_date,
  del_flg,
  cast(substring(news_date,1,10) as date) as news_date_disp
  FROM dtb_news
  WHERE del_flg = '0'
  ORDER BY news_date_disp DESC, news_id DESC";
  
  $list_data = $conn->getAll($sql);
 return $list_data;
}


次に HTML テンプレートファイルがある /data/Smarty/templates/ 内にも「backnumber」というディレクトリを作り、「backnumber」ディレクトリの中に下記を記述した index.tpl 名前で保存する。

<table width="" border="0" cellspacing="0" cellpadding="0" summary=" ">
 <tr><td height="15"></td></tr>
 <tr>
  <td bgcolor="#cccccc" align="center">
  <table width="" border="0" cellspacing="1" cellpadding="10" summary=" ">
  <!--{section name=data loop=$arrNews}-->
   <tr>
    <td width="100%" bgcolor="#ffffff" class="fs12">
     <!--{if $arrNews[data].news_url}--><p><a href="<!--{$arrNews[data].news_url}-->" <!--{if $arrNews[data].link_method eq "2"}-->target="_blank"<!--{/if}--> ><!--{/if}--><!--{$arrNews[data].news_title|escape|nl2br}--><!--{if $arrNews[data].news_url}--></a></p><!--{/if}--> (<!--{$arrNews[data].news_date_disp|escape}-->)
     <p><!--{$arrNews[data].news_comment|escape|nl2br}--></p>
    </td>
   </tr>
  <!--{/section}-->
  </table>
  </td>
 </tr>
</table>


サーバにアップロードすれば http://{EC-CUBE のパス}/backnumber/ にアクセスすると登録している新着情報・お知らせが日付の新しい順に表示されるのが確認できる。

関連記事


この記事へのトラックバック