ITOBEN STYLE > EC-CUBEで売れ筋ランキングを表示する 2012年2月28日カテゴリー:未分類 EC-CUBEで売れ筋ランキングを表示する ここでのカスタマイズはMySQL限定となります。 サーバーにより負担をかけず、PostgreSQLにも対応した↓こちらの方がベターかと思います。 EC-CUBE:売れ筋ランキング(MySQL・PostgreSQL両対応) 購入回数をもとにランキングブロックを作成する。1度に複数個購入しても1個とカウント。 (1)下記ファイルを作成する(おすすめ商品[recommend]をもとに作成してある) ① html\frontparts\bloc\ranking.php ② class_extends\page_extends\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking_Ex.php ③ class\pages\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking.php ④ Smarty\templates\default\frontparts\bloc\ranking.tpl (2)データベースにブロックを登録 テーブル:dtb_bloc device_type_id:10 bloc_id:11 bloc_name:ランキング tpl_path:ranking.tpl filename:ranking create_date:作成日 update_date:作成日 php_path:frontparts/bloc/ranking.php deletable_flg:0 (3)CSSに追加する。 ■html/user_data/packages/default/css/bloc.css —————————————————— /* =============================================== ▼ランキング =============================================== */ #ranking_area .bloc_body{ border:none; } #ranking_area table { margin-bottom:0; border:none; } #ranking_area table td { padding:0px; border:none; vertical-align:top; } #ranking_area li { list-style:none; margin-bottom:0; padding-bottom:5px; background:url(../img/background/line_dot_01.gif) repeat-x bottom; } #ranking_area .rank { font-size:130%; font-weight:bold; padding-bottom:5px; } #ranking_area .rank div { padding-left:35px; padding-top:10px; height:20px; } #ranking_area #rank_1 { background:url(../img/ranking/rank_1.png) no-repeat left bottom; } #ranking_area #rank_2 { background:url(../img/ranking/rank_2.png) no-repeat left bottom; } #ranking_area #rank_3 { background:url(../img/ranking/rank_3.png) no-repeat left bottom; } #ranking_area #rank_4 { background:url(../img/ranking/rank_4.png) no-repeat left bottom; } #ranking_area #rank_5 { background:url(../img/ranking/rank_5.png) no-repeat left bottom; } #ranking_area .left { width:97px; } #ranking_area .image { border:#999 1px solid; background-color:#FFF; padding:3px; width:80px; } —————————————————— (4)下記の順位の画像を「ranking」フォルダに作成し、フォルダごとアップロードする。 ■html/user_data/packages/default/img/ranking 画像名は、プログラムに関係しているので変更しない。 rank_1.png rank_2.png rank_3.png rank_4.png rank_5.png (5)表示数を変更するには、下記ファイルを操作 ■class\pages\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking.php ——————————————————- 最下部にあるコードの数字を変更する。「5」は上位5位までを表示するという意味。 $objQuery->setLimit(5); ——————————————————-
ここでのカスタマイズはMySQL限定となります。
サーバーにより負担をかけず、PostgreSQLにも対応した↓こちらの方がベターかと思います。
EC-CUBE:売れ筋ランキング(MySQL・PostgreSQL両対応)
購入回数をもとにランキングブロックを作成する。1度に複数個購入しても1個とカウント。
(1)下記ファイルを作成する(おすすめ商品[recommend]をもとに作成してある)
① html\frontparts\bloc\ranking.php
② class_extends\page_extends\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking_Ex.php
③ class\pages\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking.php
④ Smarty\templates\default\frontparts\bloc\ranking.tpl
(2)データベースにブロックを登録
テーブル:dtb_bloc
device_type_id:10
bloc_id:11
bloc_name:ランキング
tpl_path:ranking.tpl
filename:ranking
create_date:作成日
update_date:作成日
php_path:frontparts/bloc/ranking.php
deletable_flg:0
(3)CSSに追加する。
■html/user_data/packages/default/css/bloc.css
——————————————————
/* ===============================================
▼ランキング
=============================================== */
#ranking_area .bloc_body{
border:none;
}
#ranking_area table {
margin-bottom:0;
border:none;
}
#ranking_area table td {
padding:0px;
border:none;
vertical-align:top;
}
#ranking_area li {
list-style:none;
margin-bottom:0;
padding-bottom:5px;
background:url(../img/background/line_dot_01.gif) repeat-x bottom;
}
#ranking_area .rank {
font-size:130%;
font-weight:bold;
padding-bottom:5px;
}
#ranking_area .rank div {
padding-left:35px;
padding-top:10px;
height:20px;
}
#ranking_area #rank_1 {
background:url(../img/ranking/rank_1.png) no-repeat left bottom;
}
#ranking_area #rank_2 {
background:url(../img/ranking/rank_2.png) no-repeat left bottom;
}
#ranking_area #rank_3 {
background:url(../img/ranking/rank_3.png) no-repeat left bottom;
}
#ranking_area #rank_4 {
background:url(../img/ranking/rank_4.png) no-repeat left bottom;
}
#ranking_area #rank_5 {
background:url(../img/ranking/rank_5.png) no-repeat left bottom;
}
#ranking_area .left {
width:97px;
}
#ranking_area .image {
border:#999 1px solid;
background-color:#FFF;
padding:3px;
width:80px;
}
——————————————————
(4)下記の順位の画像を「ranking」フォルダに作成し、フォルダごとアップロードする。
■html/user_data/packages/default/img/ranking
画像名は、プログラムに関係しているので変更しない。
rank_1.png rank_2.png rank_3.png rank_4.png rank_5.png
(5)表示数を変更するには、下記ファイルを操作
■class\pages\frontparts\bloc\LC_Page_FrontParts_Bloc_Ranking.php
——————————————————-
最下部にあるコードの数字を変更する。「5」は上位5位までを表示するという意味。
$objQuery->setLimit(5);
——————————————————-