Naga Blog

EC-CUBE

EC-CUBEで、新着商品の紹介をトップページに表示する方法。

EC-CUBEって新着商品の表示が標準でついていないんですヨ。開発元的には、オススメ管理を使って新着商品の案内もやってねということらしいのですが、オススメと書かれている以上、システム使う側としては、最も売りたい商品を表示したい訳で、混在するというのは何かと問題があると思うんですヨ。その事を顧客に話したら、やはり、それでは困るという事で、新商品を追加したら簡単にトップページに掲載できるか調べてみました。

基本的に時限式だと見せたい期間が自由にコントロールできないので、販売戦略をたてる側としては都合が悪いだろうと判断。商品管理画面で、NEWのチェックマークのON、OFFで、トップページに商品を掲載したりしなかったりできる方法を探しました。色々と検索してみたら、色々な方法で新着商品の表示を実現されている方がいたのですが、どれもしっくり来なかったんですヨ。

最後の頼みの綱という訳で、EC-CUBEの開発コミュニティに行ってみたら、｢新入荷商品をブロックに表示したい｣というスレッドがたっていました。ありましたヨ。自分と同じように新着商品の案内を考えている方が多かったようで、そこで紹介されていた方法が、自分の要求にピッタリでした。早速、組み込むことにしましたヨ。

以下、覚え書きも兼ねて、手順を書いときます。

まず、注意書き。今回カスタマイズを施した環境は、EC-CUBE 2.3.4・CERVSERVER・MySQL 5.1.22-rc・PHP 5.2.5です。今後の開発で、使えなくなる場合もあります。

まず、WebブラウザーからEC-CUBEの管理画面にアクセスし、ログインします。上部のメニューから｢デザイン管理｣に入ります。そこからさらに｢ブロック編集｣に入り、新規ブロックを作成します。

ブロック名は新着商品、ファイル名はproductFlag(.tpl)として下さい。現時点では内容の欄は空のままで良いです。登録を押したら、productFlag.tplというファイルがサーバに作成されます。

次は、データベースの作業になります。phpMyAdmin等を使って、EC-CUBEのデータが格納されているデータベースにアクセスして下さい。データベースのテーブル一覧から｢dtb_bloc｣を選択、編集画面に入って下さい、｢新着商品｣という項目が作られているので、それを編集します。編集画面に入ると、｢php_path｣が空欄になってまして、そこに｢frontparts/bloc/product_flag.htm｣と記入します。これで値がNULL値から変更されます。

次に、この｢product_flag.htm｣を作ります。下記のコードをコピーして、エディタ等にペースト、｢product_flag.htm｣と名前を付けて保存します。

<?php
// {{{ requires
require_once(CLASS_EX_PATH . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag_Ex.htm");
// }}}
// {{{ generate page
$objPage = new LC_Page_FrontParts_Bloc_ProductFlag_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

出来上がったファイルを、FTPソフト等を使ってサーバの下記の場所にアップロードします。

/html/frontparts/bloc/product_flag.htm

次に、｢LC_Page_FrontParts_Bloc_ProductFlag_Ex.htm｣を作ります。下記のコードをコピーして、エディタ等にペースト、｢LC_Page_FrontParts_Bloc_ProductFlag_Ex.htm｣と名前を付けて保存します。

<?php
// {{{ requires
  require_once(CLASS_PATH . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.htm");
/**
* productStatus のページクラス(拡張).
*
* LC_Page_FrontParts_Bloc_ProductFlag をカスタマイズする場合はこのクラスを編集する.
*
*/
class LC_Page_FrontParts_Bloc_ProductFlag_Ex extends LC_Page_FrontParts_Bloc_ProductFlag {
 // }}}
// {{{ functions
/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}
/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

出来上がったファイルを、FTPソフト等を使ってサーバの下記の場所にアップロードします。

/data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag_Ex.htm

次に、｢LC_Page_FrontParts_Bloc_ProductFlag.htm｣を作ります。下記のコードをコピーして、エディタ等にペースト、｢LC_Page_FrontParts_Bloc_ProductFlag.htm｣と名前を付けて保存します。

<?php
// {{{ requires
require_once(CLASS_PATH . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc.htm");
/**
* productStatus のページクラス.
*
* @package Page
*/
class LC_Page_FrontParts_Bloc_ProductFlag extends LC_Page_FrontParts_Bloc {
// }}}
// {{{ functions
 /**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$bloc_file = 'productFlag.tpl';
$this->setTplMainpage($bloc_file);
}
 /**
* Page のプロセス.
*
* @return void
*/
function process() {
if (defined("MOBILE_SITE") && MOBILE_SITE) {
$objView = new SC_MobileView();
} else {
$objView = new SC_SiteView();
}
$objSiteInfo = $objView->objSiteInfo;
// 基本情報を渡す
$objSiteInfo = new SC_SiteInfo();
$this->arrInfo = $objSiteInfo->data;
$objQuery = new SC_Query();
//検索したい商品のステータスを設定
//NEW→1, 残りわずか→2, ポイント2倍→3, オススメ→4, 限定品→5
$productFlag = 1;
//検索する商品のステータスをランダムに決定し、表示させたい場合は以下のコメントを外してください。
//$id_count = $objQuery->count(mtb_status);
//$productFlag = rand(1,$id_count);
 
$this->statusName =$objQuery->get("mtb_status_image", "name", "id={$productFlag}");
 
//表示する商品の件数
$listCount = 8;
 
$ret = "";
$arrTmp[$productFlag] = "1";
 
for($i = 1; $i <= $productFlag; $i++) {
if($arrTmp[$i] == "1") {
$ret.= "1";
} else {
$ret.= "_";
}
}
if($ret != "") {
$ret.= "%";
}
//$col = "dtb_products.product_id, dtb_products.name, dtb_products.main_image,
//MIN(dtb_products_class.price02) AS price02_min, MAX(dtb_products_class.price02) AS price02_max";
//$from = "dtb_products INNER JOIN dtb_products_class using(product_id)";
//$where = "product_flag LIKE ¥"{$ret}¥"";
//$groupby = "product_id";
//$this->groupby=$objQuery->setgroupby($groupby);
//商品の表示はupdate_dateが新しい順
//$order = "dtb_products.update_date DESC";
//$this->order=$objQuery->setorder($order);
$col = "DISTINCT price02_min, product_id, price02_max, main_image, product_flag, name";
$from = "vw_products_allclass AS T1";
$where = "product_flag LIKE '{$ret}'";
//商品の表示はproduct_id逆順
$order = "product_id DESC";
$this->order=$objQuery->setorder($order);
$arrFlagList = $objQuery->select($col, $from, $where);
 
//商品の表示をランダムに抽出する場合は以下のコメントを外してください。
//srand((double)microtime()*1000000);//乱数生成器を初期化
//shuffle($arrFlagList);
$this->arrFlagProducts = array_slice($arrFlagList, 0, $listCount);
$objSubView = new SC_SiteView();
$objSubView->assignobj($this);
$objSubView->display($this->tpl_mainpage);
}
  
/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

出来上がったファイルを、FTPソフト等を使ってサーバの下記の場所にアップロードします。

/data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.htm

表示する件数を変更する場合は、下記の部分に書かれた数値を任意の数にする事で変更できます。

//表示する商品の件数
$listCount = 8;

次に、最初に空のまんま作った｢新着商品｣こと｢productFlag.tpl｣の中身を作ります。まず、WebブラウザーからEC-CUBEの管理画面の上部のメニューから｢デザイン管理｣に入り、そこからさらに｢ブロック編集｣に入ります。同じ｢ブロック編集｣にある｢オススメ商品｣の中身をコピーして、｢新着商品｣にペーストします。次に下記のコード参考に内容を修正してみて下さい。ぶっちゃけ｢$arrBestProducts｣と書かれた部分を｢$arrFlagProducts｣に変更すれば動くと思いますが、自分の場合、若干表示がおかしくなったので所々修正してます。下記のコードで表示される情報は、商品写真、商品名、価格のみが表示されるようになっています。後、下記のコードは、装飾用のタグや、CSSのセレクタ名は省いていますので、ご注意下さい。

<!--▼新着商品ここから-->
<!--{if count($arrFlagProducts) > 0}-->
  
<h3>新着商品</h3>
  
<!--{section name=cnt loop=$arrFlagProducts step=2}-->
  
<a href="<!--{$smarty.const.URL_DIR}-->products/detail.htm?product_id=<!--{$arrFlagProducts[cnt].product_id}-->">
<!--{if $arrFlagProducts[cnt].main_list_image != ""}-->
<!--{assign var=image_path value="`$arrFlagProducts[cnt].main_list_image`"}-->
<!--{else}-->
<!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
<!--{/if}-->
<img src="<!--{$smarty.const.SITE_URL}-->resize_image.htm?image=<!--{$arrFlagProducts[cnt].main_image|sfRmDupSlash}-->&width=65&height=65" alt="<!--{$arrFlagProducts[cnt].name|escape}-->" />
</a>
  
<!--{assign var=price01 value=`$arrFlagProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrFlagProducts[cnt].price02_min`}-->
<h4><a href="<!--{$smarty.const.URL_DIR}-->products/detail.htm?product_id=<!--{$arrFlagProducts[cnt].product_id}-->"><!--{$arrFlagProducts[cnt].name|escape}--></a></h4>
  
価格<span class="font-size-2minus">(税込)</span>：<em class="font-color-red">
<!--{if $price02 == ""}-->
<!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</em>
  
<span class="font-size-2minus"><!--{$arrFlagProducts[cnt].comment|escape|nl2br}--></span>
  
<!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
<!--{if $arrFlagProducts[$cnt2]|count > 0}-->
  
<a href="<!--{$smarty.const.URL_DIR}-->products/detail.htm?product_id=<!--{$arrFlagProducts[$cnt2].product_id}-->">
<!--{if $arrFlagProducts[$cnt2].main_list_image != ""}-->
<!--{assign var=image_path value="`$arrFlagProducts[$cnt2].main_list_image`"}-->
<!--{else}-->
<!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
<!--{/if}-->
<img src="<!--{$smarty.const.SITE_URL}-->resize_image.htm?image=<!--{$arrFlagProducts[$cnt2].main_image|sfRmDupSlash}-->&width=65&height=65" alt="<!--{$arrFlagProducts[$cnt2].name|escape}-->" />
</a>
  
<!--{assign var=price01 value=`$arrFlagProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrFlagProducts[$cnt2].price02_min`}-->
<h4><a href="<!--{$smarty.const.URL_DIR}-->products/detail.htm?product_id=<!--{$arrFlagProducts[$cnt2].product_id}-->"><!--{$arrFlagProducts[$cnt2].name|escape}--></a></h4>
  
価格<span class="font-size-2minus">(税込)</span>：<em class="font-color-red">
<!--{if $price02 == ""}-->
<!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
<!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</em>
  
<span class="font-size-2minus"><!--{$arrFlagProducts[$cnt2].comment|escape|nl2br}--></span>
  
<br class="clear" />
  
<!--{/if}-->
  
<!--{/section}-->
  
<!--{/if}-->
<!--▲新着商品情報ここまで-->

これで、各商品の管理画面から｢NEW｣のチェックマークをONにすれば、新着商品をトップページに表示する事ができます。

ナカナカ面倒に手順ですけど、必要な場面が多く出てくるので、憶えていて損はないと思いますヨ。

コメント [5]

途方にくれていたところ、このブログに出会いました。
大変参考になりました。
有り難う御座います。

>dica
遅レスですみません。
かなり古い情報でしたので、現バージョンに対応するのは大変だったかと思います。色々とEC-Cubeの情報も出していきたいのですが、いかんせん構築依頼が無いで、止まっております。

naganaga様のこの記事のおかげで、ECCUBEのトップに新着情報を表示することができました！
ありがとうございました。

ついで質問で大変恐縮なのですが、商品説明も表示させようとするとどのようにすればよいでしょうか？

があるのにphpを編集してもうまく表示させることができませんでした。。。

なかなかうまくいかずかなり迷走しています。
ご教授頂けると大変救われます。
何卒、よろしくお願い致します。

>naopeさん

新着商品に、おすすめ情報と同じように商品説明は、自分がカスタマイズに挑戦した時は、色々と試してみて結局付けられませんでした。新着商品表示は無茶な事をさせているので、色々と制約があっても仕方ないかと思います。ただ、EC-Cubeの現行バージョンだと可能かもしれません。EC-Cube 開発コミュニティサイト：http://xoops.ec-cube.net/で質問をしてみる方が確実な回答が得られると思いますヨ。

上記URLは制作中のサイトです。
最高のカスタマイズですね・・・
ありがとうございます。
とても苦戦しましたが勉強になりました。

About this entry

このページは、naganagaが2009年3月10日 17:27に書いたブログ記事です。

ひとつ前のブログ記事は「EC-CUBEを、推奨サーバじゃないCORESERVERにインストールする手順。」です。

次のブログ記事は「EC-CUBEの商品カテゴリメニューの全部出しに挑戦。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。