カスタマイズ：応用/ランキング表示

売れ筋商品の上位をランキング表示させる機能を追加します。
データベースからの情報の取り出し方で、何を基準にランキングするかのカスタマイズが可能です。

編集するファイル

以下のファイルを新規に作成します。

/html/frontparts/bloc/rankig.php
/data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Ranking_Ex.php
/data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Ranking.php
/data/Smarty/templates/default/bloc/ranking.tpl

※Page_FrontParts_Bloc_Ranking_Ex.phpを作らずに、ranking.phpとLC_Page_FrontParts_Bloc_Ranking.phpを直接繋ぐことも可能ですが、今後さらにカスタマイズが入る場合を考慮して、デフォルトの機能と同じ構成としています。

すべて、構成の近い「best5」のファイルをコピーして、編集していきます。

rankig.phpの編集

このファイルでの処理は特にありませんので、インクルードするファイルのパスを変更しておきます。

  • 25行目 
    1. require_once(CLASS_EX_PATH . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5_Ex.php");
    　↓ 
    1. require_once(CLASS_EX_PATH . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Ranking_Ex.php");
  • 30行目 
    1. $objPage = new LC_Page_FrontParts_BLoc_Best5_Ex();
    　↓ 
    1. $objPage = new LC_Page_FrontParts_BLoc_Ranking_Ex();

LC_Page_FrontParts_Bloc_Ranking_Ex.phpの編集

このファイルも同様です。インクルードするファイルを変更しておきます。

  • 25行目 
    1. require_once(CLASS_PATH . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5.php");
    　↓ 
    1. require_once(CLASS_PATH . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Ranking.php");
  • 36行目 
    1. class LC_Page_FrontParts_Bloc_Best5_Ex extends LC_Page_FrontParts_Bloc_Best5 {
    　↓ 
    1. class LC_Page_FrontParts_Bloc_Ranking_Ex extends LC_Page_FrontParts_Bloc_Ranking {

LC_Page_FrontParts_Bloc_Ranking.php

このファイルはロジックを修正していきます。

  • クラス名を変更 
    1. class LC_Page_FrontParts_Bloc_Best5 extends LC_Page_FrontParts_Bloc {
    　↓ 
    1. class LC_Page_FrontParts_Bloc_Ranking extends LC_Page_FrontParts_Bloc {
  • テンプレートを変更 
    1. function init() {

    2.     parent::init();

    3.     $bloc_file = 'best5.tpl';

    4.     $this->setTplMainpage($bloc_file);

    5. }
    　↓ 
    1. function init() {

    2.     parent::init();

    3.     $bloc_file = 'ranking.tpl';

    4.     $this->setTplMainpage($bloc_file);

    5. }
  • 結果を格納する配列名を変更 
    1. //おすすめ商品表示

    2. $this->arrBestProducts = $this->lfGetRanking();

    3.  

    4. $objView->assignobj($this);

    5. $objView->display($this->tpl_mainpage);
    　↓ 
    1. //ランキング表示

    2. $this->arrRanking = $this->lfGetRanking();

    3.  

    4. $objView->assignobj($this);

    5. $objView->display($this->tpl_mainpage);
  • lfGetRanking()を編集 
    1. //おすすめ商品検索

    2. function lfGetRanking(){

    3.     $objQuery = new SC_Query();

    4.  

    5.     $col = "DISTINCT A.*, name, price02_min, price01_min, main_list_image ";

    6.     $from = "dtb_best_products AS A INNER JOIN vw_products_allclass AS allcls using(product_id)";

    7.     $where = "status = 1";

    8.     $order = "rank";

    9.     $objQuery->setorder($order);

    10.  

    11.     $arrBestProducts = $objQuery->select($col, $from, $where);

    12.  

    13.     return $arrBestProducts;

    14. }
    　↓ 
    1. //ランキング検索

    2. function lfGetRanking(){

    3.     $objQuery = new SC_Query();

    4.  

    5.     $col = "T1.product_id, T1.product_name as name,T3.main_list_image,COUNT(*) AS order_count ";

    6.     $from = "dtb_order_detail AS T1

    7.              INNER JOIN dtb_order AS T2 ON T1.order_id = T2.order_id 

    8.              INNER JOIN dtb_products AS T3 ON T1.product_id = T3.product_id";

    9.     $objQuery->setgroupby("T1.product_id,T1.product_name,T3.main_list_image");

    10.     $objQuery->setorder("order_count DESC");

    11.     $objQuery->setlimit(5);

    12.  

    13.     return $objQuery->select($col, $from);

    14. }

ranking.tplの編集

  • 22行目以下を全て置き換えてください。 
    1. <!--▼おすすめ情報ここから-->

    2. 　　　・

    3. 　　　・

    4. 　　　・
    　↓ 
    1. <!--{if count($arrRanking) > 0}-->

    2. <h2>

    3.     <img src="<!--{$TPL_DIR}-->img/side/title_ranking.jpg" width="166" height="35" alt="ランキング" />

    4. </h2>

    5. <div id="rankingarea">

    6.     <ul>

    7.     <!--{foreach from=$arrRanking key=myId item=i}-->

    8.         <li>

    9.             <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$i.product_id}-->">

    10.             <img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$i.main_list_image}-->" width="130px" alt="<!--{$i.name}-->">

    11.             <!--{assign var=rank value=$myId+1}-->

    12.             <span><!--{$rank}-->位：<!--{$i.name}--></span>

    13.             </a>

    14.         </li>

    15.     <!--{/foreach}-->

    16.     </ul>

    17. </div>

    18. <!--{/if}-->
    ランキング用の画像などは別途作成する必要があります。

main.cssの編集

ランキング部分用のCSSを追加しておきます。

  1. /* ランキング

  2. ----------------------------------------------- */

  3. div#rankingarea {

  4.     width: 144px;

  5.     padding: 0 10px 10px 10px;

  6.     border: solid 1px #ccc;

  7. }

  8.  

  9. div#rankingarea img {

  10.     padding: 0px;

  11.     margin: 2px auto;

  12.     vertical-align: bottom;

  13.     display: block;

  14. }

  15.  

  16. div#rankingarea ul li {

  17.     margin-top: 6px;

  18. }

  19.  

  20. div#rankingarea ul li span{

  21.     clear: both;

  22. }

  23.  

  24. div#rankingarea ul li a{

  25.     font-weight: bold;

  26.     color: red;

  27.     text-decoration: none;

  28.     display: block;

  29. }

  30.  

  31. div#rankingarea ul li a:hover{

  32.     color: red;

  33.     background-color: #DDDDDD;;

  34. }

dtb_blocにパスを追加

php_pathカラムに

frontparts/bloc/ranking.php

を追加します。

これで作業は完了です。
管理画面のデザイン管理からブロックを追加してください。
※購入データが存在しないと、何も表示されませんのでご注意ください。

スクリーンショット

ranking.png