EC-CUBE:売れ筋ランキング スマートフォン表示(MySQL・PostgreSQL両対応)

ここで紹介している内容は、「EC-CUBE:売れ筋ランキングをスマートフォンで表示する」とは異なるもので、MySQL・PostgreSQLの両方に対応しています。

EC-CUBE:売れ筋ランキング(MySQL・PostgreSQL両対応)が作成されていることが条件。

1 ランキングを表示するための専用のページを新規作成する。

(1)下記の4つを作成

 ■html/sphone_ranking.php

 <?php
 // {{{ requires
 require_once './require.php';
 require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Sphone_ranking_Ex.php';

// }}}
 // {{{ generate page

$objPage = new LC_Page_Sphone_ranking_Ex();
 register_shutdown_function(array($objPage, "destroy"));
 $objPage->init();
 $objPage->process();
 ?>

 ■data/class_extends/page_extends/LC_Page_Sphone_ranking_Ex.php

 <?php

// {{{ requires
 require_once CLASS_REALDIR . 'pages/LC_Page_Sphone_ranking.php';

class LC_Page_Sphone_ranking_Ex extends LC_Page_Sphone_ranking {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

 ■data/class/pages/LC_Page_Sphone_ranking.php

 <?php

// {{{ requires
 require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

class LC_Page_Sphone_ranking extends LC_Page_Ex {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 $this->action();
 $this->sendResponse();
 }

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {
 $this->tpl_title = '';
 $objCustomer = new SC_Customer_Ex();
 $this->isLogin = $objCustomer->isLoginSuccess(true);
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
 }
 ?>

 ■data/Smarty/templates/sphone/sphone_ranking.tpl

 <!--▼検索バー -->
 <section id="search_area">
 <form method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">
 <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
 <input type="hidden" name="mode" value="search" />
 <input type="search" name="name" id="search" value="" placeholder="キーワードを入力"  class="searchbox" >
 </form>
 </section>
 <!--▲検索バー -->

(2) データベースにページを登録

 テーブル:dtb_pagelayout
 device_type_id:2
 page_id:30
 page_name:ランキングページ
 url:sphone_ranking.php
 filename:sphone_ranking
 header_chk:1
 footer_chk:1
 edit_flg:2
 author:NULL
 description:NULL
 keyword:NULL
 update_url:NULL
 create_date:作成日
 update_date:作成日

2 ブロックを作成する(PC用のranking.tplが作成済みであることが前提)

(1) ■data/Smarty/templates/sphone/frontparts/bloc/ranking.tpl(recommend.tplをもとに作成)


<!-- ▼ランキング -->

<!--{if count($arrBestProducts) > 0}-->

<section id="recommend_area" class="mainImageInit">

<h2>売れ筋ランキング</h2>

<ul>

<!--{section name=cnt loop=$arrBestProducts}-->

<li id="mainImage<!--{$smarty.section.cnt.index}-->">

<div class="recommendblock clearfix">

<div class="rank">第<!--{$arrBestProducts[cnt].rank|h}-->位</div>

<table>

<tr>

<td class="left">

<div class="image">

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[cnt].product_id|u}-->.html">

<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrBestProducts[cnt].main_list_image|sfNoImageMainList|h}-->&amp;width=80&amp;height=80" alt="<!--{$arrBestProducts[cnt].name|h}-->" /></a>

</div>

</td>

<td class="right">

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[cnt].product_id|u}-->.html"><!--{$arrBestProducts[cnt].name|h}--></a>

<p class="mini comment"><!--{$arrBestProducts[cnt].main_list_comment|h|nl2br}--></p>

<!--{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}-->

<!--{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}-->

<p class="sale_price"><span class="mini">販売価格(税込):</span><span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->円</span></p>

</td>

</tr>

</table>

</div>

</li>

<!--{/section}-->

</ul>

</section>

<!--{else}-->

現在、売れ筋ランキングのデータがありません。

<!--{/if}-->

<!-- ▲ランキング -->

<script type="application/javascript">

<!--//

$(function(){

$('#recommend_area ul li').flickSlide({target:'#recommend_area>ul', duration:5000});

});

//-->

</script>

(2) データベースにブロックを登録
————————————————-
テーブル:dtb_bloc
device_type_id:2
bloc_id:9
bloc_name:ランキング
tpl_path:ranking.tpl
filename:ranking
create_date:作成日
update_date:作成日
php_path:frontparts/bloc/ranking.php
deletable_flg:0
————————————————-

3  管理画面「デザイン管理>スマートフォン>レイアウト設定」でランキングページを選択し、ブロックを配置する。

「ランキング」ブロックと「おすすめ商品」ブロックを入れ替えて、あとはTOPページと同じ配置。

4  ランキングページへのリンクを作成

■data/Smarty/templates/sphone/frontparts/bloc/recommend.tpl(最下部に追加)
(ランキングページを開くためには、「おすすめ商品」ブロックを配置しなければならない)

 <div>
 <ul class="navBox">
 <li><a href="<!--{$smarty.const.ROOT_URLPATH}-->sphone_ranking.php">売れ筋ランキング</a></li>
 </ul>
 </div>

5 CSSに追加

■html/user_data/packages/sphone/css/bloc.css

 /*-----------------------------------------------
 ランキング
 ----------------------------------------------- */
 #recommend_area .rank {
 background-color:#C00;
 padding:1px;
 margin-bottom:5px;
 color:#FFF;
 font-weight:bold;
 text-align:center;
 }
 #recommend_area table td {
 text-align:left;
 vertical-align:top;
 }
 #recommend_area table td.right {
 padding-left:5px;
 }