ここで紹介している内容は、「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}-->&width=80&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; }