EC-CUBE EC-CUBEのカスタマイズ・制作会社　強いネットショップ構築します｜EC-Orange

EC-Orange とは
ネットショップ開業
代理店の方へ

EC-CUBE カスタマイズ

EC-CUBEインストール

EC-CUBE 環境構築ノウハウ

EC-CUBE 基本構成理解

ソースコード読解

EC-CUBE カスタマイズ：初歩

EC-CUBE カスタマイズ：基礎

EC-CUBE カスタマイズ：応用

EC-CUBE 機能拡張ノウハウ

EC-CUBE プラチナパートナー

EC-CUBE カスタマイズ    売れ筋商品をランキング表示！

    EC-CUBE カスタマイズ  >  EC-CUBE カスタマイズ：応用  >  ランキング表示

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

売れ筋商品の上位をランキング表示させる機能を追加します。
データベースからの情報の取り出し方で、何を基準にランキングするかのカスタマイズが可能です。
ちなみにEC-Orangeではレコメンド機能にも対応しています。

ECサイトでは、”ついで買い”はとっても重要な購買行動の一つです。
関連性の高いものに結びついた商品は、購買の確率をぐっとあげますし、
読み手にも新しい発見や流行を提供されると、閲覧が楽しいもの

ランキングが載ってだけで、特に女性はチェックしたくなっちゃいます！
たくさんの商品をお客様に見ていただきましょう。

ランキング表示については、EC-CUBE No.1パートナー 最新情報ブログにも記事があります。
「ランキング」、「「ちゃんとやるだけ」大規模ECサイト（その４）」もご参照ください。

EC-CUBEのQ&Aにもランキングの並べ替えについての記事があります。

    システム開発でお悩みの方は、ネットショップ構築パッケージ EC-Orange にお問い合わせください


編集するファイル

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

/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");
  • 30行目
  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を追加しておきます。

  • 22行目以下を全て置き換えてください。
  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

を追加します。

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

スクリーンショット

EC-CUBE_カスタマイズ-ランキング表示




EC-CUBEのカスタマイズや、ECサイトの開発・構築でお困りなら、
ネットショップ構築パッケージEC-Orangeにお問い合わせください！

ページトップへ
会社概要 プライバシーポリシー お問い合わせ
©2006-2010 EC-Orange All rights reserved.