Labo

[EC-CUBE 2.11.1] 新着商品を表示

2011年07月28日 / 投稿者名:fukap


商品登録画面の商品ステータスの「NEW」にチェックを入れた商品を、任意の件数だけPCに自動表示させるブロックの作り方です。
※EC-CUBE2.11.5 で試したコードはこちら。

 

html/frontparts/bloc/product_flag.php を以下のように作成します。

<?php

// {{{ requires
require_once(CLASS_EX_REALDIR . "page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_FrontParts_Bloc_ProductFlag_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();

?>

次に data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag_Ex.php を以下のように作成します。

<?php

// {{{ requires
require_once(CLASS_REALDIR . "pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php");

/**
 * 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();
    }
}

?>

さらに、data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php を以下のように作成します。

<?php

// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

/**
 * 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 = SC_Helper_DB_Ex::sfGetBasisData();
        $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("name", "mtb_status_image", "id = ? ", array($productFlag));

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

        $col = "dtb_products.product_id, dtb_products.name, dtb_products.main_list_image, dtb_products.main_list_comment AS comment, MIN(dtb_products_class.price02) AS price02_min, MAX(dtb_products_class.price02) AS price02_max";
        $from = "dtb_products INNER JOIN dtb_products_class ON dtb_products.product_id = dtb_products_class.product_id INNER JOIN dtb_product_status ON dtb_products.product_id = dtb_product_status.product_id";
        $where = "dtb_products.del_flg = 0 AND dtb_products.status = 1 AND dtb_product_status.product_status_id = ?";
        $groupby = "dtb_products.product_id, dtb_products.name, dtb_products.main_list_image, dtb_products.main_list_comment, dtb_product_status.product_id, dtb_products.update_date";
        $this->groupby=$objQuery->setGroupBy($groupby);

        //商品の表示はupdate_dateが新しい順
        $order = "dtb_products.update_date DESC";
        $this->order=$objQuery->setOrder($order);

        $arrFlagList = $objQuery->select($col, $from, $where, array($productFlag));

        //商品の表示をランダムに抽出する場合は以下のコメントを外してください。
        //srand((double)microtime()*1000000);  //乱数生成器を初期化
        //shuffle($arrFlagList);

        $this->arrFlagProducts = array_slice($arrFlagList, 0, $listCount);

        $objView->assignobj($this);
        $objView->display($this->tpl_mainpage);
    }

    /**
     * デストラクタ.
     *
     * @return void
     */
    function destroy() {
        parent::destroy();
    }
}

?>

さらに、data/Smarty/templates/default/frontparts/bloc/productFlag.tpl を以下のように作成します。

<!--{if count($arrFlagProducts) > 0}-->
<div class="bloc_outer clearfix">
    <div id="recomend_area">
        <h2>新着商品</h2>
        <!--{section name=cnt loop=$arrFlagProducts step=2}-->
        <div class="bloc_body clearfix">
            <div class="recomendleft clearfix">
                <div class="productImage">
                    <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->">
                        <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrFlagProducts[cnt].main_list_image|sfNoImageMainList|h}-->&amp;wi
dth=80&amp;height=80" alt="<!--{$arrFlagProducts[cnt].name|h}-->" /></a>
                </div>
                <div class="productContents">
                    <h3>
                        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->"><!--{$arrFlagProducts[cnt].name|h}--></a>
                    </h3>
                    <!--{assign var=price01 value=`$arrFlagProducts[cnt].price01_min`}-->
                    <!--{assign var=price02 value=`$arrFlagProducts[cnt].price02_min`}-->
                    <p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
                        <span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
                    </p>
                    <p class="mini comment"><!--{$arrFlagProducts[cnt].comment|h|nl2br}--></p>
                </div>
            </div>

            <div class="recomendright clearfix">
                <div class="productImage">
                    <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->
                    <!--{if $arrFlagProducts[$cnt2]|count > 0}-->

                    <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt2].product_id|u}-->">
                    <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrFlagProducts[$cnt2].main_list_image|sfNoImageMainList|h}-->&amp;widt
h=80&amp;height=80" alt="<!--{$arrFlagProducts[$cnt2].name|h}-->" /></a>
                </div>
                <div class="productContents">
                    <h3>
                        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt2].product_id|u}-->"><!--{$arrFlagProducts[$cnt2].name|h}--></a>
                    </h3>

                    <!--{assign var=price01 value=`$arrFlagProducts[$cnt2].price01_min`}-->
                    <!--{assign var=price02 value=`$arrFlagProducts[$cnt2].price02_min`}-->

                    <p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
                        <span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
                    </p>
                    <p class="mini comment"><!--{$arrFlagProducts[$cnt2].comment|h|nl2br}--></p>
                    <!--{/if}-->
                </div>
            </div>

        </div>
        <!--{/section}-->
    </div>
</div>
<!--{/if}-->

PostgreSQL のスーパーユーザーである postgres にログインして、dtb_bloc に追加したブロックの情報を挿入します。
phpMyAdmin や phpPgAdmin でやっていただいても良いです。

su - postgres
psql database_name

bloc_id の最大値を調べておきます。

# select max(bloc_id) from dtb_bloc;
 max
-----
   9
(1 row)

追加したブロックのレコードを dtb_bloc に挿入します。2つ目のパラメータが bloc_id です。

insert into dtb_bloc values(10,10,'productFlag','productFlag.tpl','productFlag',now(),now(),'frontparts/bloc/product_flag.php',0);

最後に、管理画面にログインして、デザイン管理 > PC > レイアウト設定 で、productFlag ブロックが未使用ブロックに表示されているのを確認したら、あとは適当なエリアにドラッグ&ドロップして配置します。
適当な商品で、商品ステータスを「NEW」にしてみて、商品が表示されるか確認してみてください。

2011/08/10 9:35 コードを一部修正

[EC-CUBE 2.11.1] 新着商品を表示 への25件のコメント

  1. EC初心者 より:

    参考にさせていただき新着表示ブロックを作成させていただきました。
    問題なく表示されているのですが、削除した商品まで表示されてしまいます。
    del_flgを識別していないのではと思っておりますが、何処で判別させるのかわからず困っております。
    宜しければお教えいただけませんでしょうか?
    お手数をお掛けいたしますが何卒宜しくお願い致します。

  2. fukap より:

    コメントありがとうございます。

    ちょっと今、検証できる環境がないのですが、さしあたり、
    data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_ProductFlag.php の61行目で、

    $where = "dtb_products.del_flg = 0 AND dtb_product_status.product_status_id = ?";

    にしていただくとうまくいきそうです。
    一度、お試しいただけますでしょうか?

  3. EC初心者 より:

    ご回答有難う御座います。
    問題なく表示されました。

    追加で申し訳ないのですが、1列に3行を表示させたいのですが、どうすればよいでしょうか?

    以下のようにしてみましたが、3番目に3番目の同じ商品が表示されてしまいます。

    お手数ですがお教えいただければ幸いです。

    <!--{if count($arrFlagProducts) > 0}-->
    
        
            <img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_newitem.jpg" alt="新着商品" class="title_icon" />
            <!--{section name=cnt loop=$arrFlagProducts step=3}-->
            
                
    <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->"><img src="/upload/save_image<!--{$smarty.const.ROOT_URLPATH}--><!--{$arrFlagProducts[cnt].main_image|sfNoImageMainList|h}-->" width="170" height="102" alt="<!--{$arrFlagProducts[cnt].name|h}-->" /></a>
                    
                        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[cnt].product_id|u}-->"><!--{$arrFlagProducts[cnt].name|h}--></a>
                        <!--{assign var=price01 value=`$arrFlagProducts[cnt].price01_min`}-->
                        <!--{assign var=price02 value=`$arrFlagProducts[cnt].price02_min`}-->
                        <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
                            <!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円
                        
                        <!--{$arrFlagProducts[cnt].comment|h|nl2br}-->
                    
                
    
                    
                        <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->
                        <!--{if $arrFlagProducts[$cnt2]|count > 0}--><a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt2].product_id|u}-->"><img src="/upload/save_image<!--{$smarty.const.ROOT_URLPATH}--><!--{$arrFlagProducts[$cnt2].main_image|sfNoImageMainList|h}-->" width="170" height="102" alt="<!--{$arrFlagProducts[$cnt2].name|h}-->" /></a>
                    
                        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt2].product_id|u}-->"><!--{$arrFlagProducts[$cnt2].name|h}--></a>
    
                        <!--{assign var=price01 value=`$arrFlagProducts[$cnt2].price01_min`}-->
                        <!--{assign var=price02 value=`$arrFlagProducts[$cnt2].price02_min`}-->
    
    					<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
                            <!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円
                        
                        <!--{$arrFlagProducts[$cnt2].comment|h|nl2br}-->
                        <!--{/if}-->
                    
                
    
                    
                        <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->
                        <!--{if $arrFlagProducts[$cnt3]|count > 0}--><a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt3].product_id|u}-->"><img src="/upload/save_image<!--{$smarty.const.ROOT_URLPATH}--><!--{$arrFlagProducts[$cnt3].main_image|sfNoImageMainList|h}-->" width="170" height="102" alt="<!--{$arrFlagProducts[$cnt3].name|h}-->" /></a>
                    
                        <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrFlagProducts[$cnt3].product_id|u}-->"><!--{$arrFlagProducts[$cnt3].name|h}--></a>
                        <!--{assign var=price01 value=`$arrFlagProducts[$cnt3].price01_min`}-->
                        <!--{assign var=price02 value=`$arrFlagProducts[$cnt3].price02_min`}-->
     <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):
                            <!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円
                        
                        <!--{$arrFlagProducts[$cnt3].comment|h|nl2br}-->
                        <!--{/if}-->
                    
                
    
            <!--{/section}-->
        
    
    <!--{/if}-->
  4. EC初心者 より:

    申し訳ありません。
    先ほど記載した内容がうまく表示されませんでした。
    また、文面も間違っていました。
    3番目に3番目の同じ商品が表示されてしまいます。ではなく、正しくは、
    3番目に2番目の同じ商品が表示されてしまいます。

  5. fukap より:

    すいません、このコメントではコードがうまく張れませんね^^;
    コードが表示されるようにこちらでコメントを若干修正いたしました。
    ご不便お掛けしてすいません。

    問題点は、assignを使って、cnt2 と cnt3 という2つの変数を定義しているのに、同じ値を代入していることです。
    value= の後が同じですよね。正しくは、

    <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2`}-->
    <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->

    だと思います。

  6. EC初心者 より:

    ご対応有難う御座います。うまく表示されました。
    大変助かりました。

  7. onchan より:

    ”非公開”にした商品も表示されるようでしたので、LC_Page_FrontParts_Bloc_ProductFlag.phpの61行目に「dtb_products.status = 1」を追加させて頂いたところうまくいきましたので、ご報告させていただきました。

    ■before

    $where = "dtb_products.del_flg = 0 AND dtb_product_status.product_status_id = ?";

    ■after

    $where = "dtb_products.del_flg = 0 AND dtb_products.status = 1 AND dtb_product_status.product_status_id = ?";

  8. fukap より:

    status が要りましたね。
    ご指摘ありがとうございます!
    修正いたしました。

  9. mkt より:

    参考にさせていただき、表示する事ができました!
    商品名、価格の他に、メーカー名を表示させたいと思っています。
    メーカー名の表示には、データベースより dtb_productsのmaker_idを参照し、dtb_makerと紐付けしてやれば良いかと思ったのですが、記述の仕方が分からず苦戦しております。
    これは、ご教授頂ける内容なのでしょうか?
    よろしくお願いいたします。

  10. fukap より:

    仰る通りでいけますね。
    このサンプルに適用するとすれば、
    $col に、dtb_maker.name as maker_name を追加し、$from に、inner join dtb_maker on dtb_products.maker_id = dtb_maker.maker_id
    を追加する形だと思います。
    テンプレ側では、

    <!--{$arrFlagProducts[cnt].maker_name}-->

    とかで取得できそうです。
    これらをヒントに頑張ってみてください。

  11. mkt より:

    ご教授ありがとうございました。
    上記の通りでメーカー名の取得ができました。
    殆ど答えのヒントに感謝いたします。
    ありがとうございました。

  12. ピンバック: [EC-CUBE 2.11.4] 商品一覧ブロックを作成する | NAKWEB × EC-CUBE

  13. kicksui より:

    参考にさせていただき新着表示ブロックを作成させていただきました。この表示を横一列に4つ、又は8つ並べたい場合はどのようにしたらよいかご教授いただけないでしょうか?よろしくお願いします。

  14. fukap より:

    基本的には、data/Smarty/templates/default/frontparts/bloc/productFlag.tpl の修正で良いと思います。

    productFlag.tpl のソースをじっくり眺めてもらうとわかりますが、

    <!--{section name=cnt loop=$arrFlagProducts step=2}-->

    の、step値でループの増減値が変えられますので、
    4列にしたい場合はstep=4、8列にしたい場合はstep=8 とします。

    またproductFlag.tpl のソースは、1列目の商品情報を出力する部分と、
    2列目の商品情報を出力する部分に分かれていますので、それに習って
    3列目や4列目を出力するソースを書き足せばできます。

    LC_Page_FrontParts_Bloc_ProductFlag.php で、

    $listCount = 4;

    となっていますので、お好みで数字を増やしてみてください。

    開発コミュニティにもこの手のご相談はよくありますので、
    ご参考にしてみてください。

  15. kicksui より:

    早速ありがとうございます、1列に3行というコメントを参考に1行に3列はうまく出来たのですが
    それにあと1列足すことができませんでした。「2列目の商品情報を出力する部分に分かれていますので、それに習って
    3列目や4列目を出力するソースを書き足せばできます。」具体的に書き足すソースをご教授いただけないでしょうか?よろしくお願いします。

  16. fukap より:

    申し訳ございませんが、該当コードを書く予定はしばらくありませんので、
    今まで得た情報や、開発コミュニティの情報でご対処ください。

  17. kicksui より:

    いえいえ、始めから無理なことをお願いしているのは承知しています、ご助言ありがとうございます。
    試行錯誤の上、無事に表示できるようになりました。
    参考までにですが
    2つ目の商品のassignを

    <!--{assign var=cnt4 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-3`}--><!--{if $arrFlagProducts[$cnt4]|count > 0}-->

    3つ目の商品のassignを

    <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2`}--><!--{if $arrFlagProducts[$cnt3]|count > 0}-->

    4つ目の商品のassignを

    <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}--><!--{if $arrFlagProducts[$cnt2]|count > 0}-->

    としたところ正しく表示することができました。お時間とらせてしまって、感謝しています。
    ありがとうございました。

  18. DR-K より:

    様々な検索をして、当ページにたどり着きました。
    現在、当サンプルを使用して表示させようとしているのですが、現在2つのNEW商品があるのに1商品しか表示されません。
    ソース自体には一切(表示用のタイトル意外)手を加えていません。
    この場合、どこを変更すればいいのかアドバイスを下さい。
    環境は
    EC-CUBEバージョン 2.11.4
    PHPバージョン PHP 5.1.6
    DBバージョン MySQL 5.0.77
    です。
    宜しくお願いします。

  19. DR-K より:

    CSSの反映は成功しました。
    [PHP][/PHP]などのrecomendをrecommendに変更しました。
    ですが、1商品しか表示されないのはそのままです。
    ご教授お願いします。

  20. fukap より:

    当ページの内容はタイトルにも書かれている通り、EC-CUBE 2.11.1 のみ動作確認をしております。
    2.11.4 については動作確認をしておりませんので、その旨ご了解ください。
    (時間があるときに見てみようとは思いますが・・)

  21. DR-K より:

    2.11.1のみですか、了解しました。
    まだ導入前ですのでそちらで試してみます

  22. ピンバック: [EC-CUBE 2.11.5] 新着商品を表示する | NAKWEB × EC-CUBE

  23. ピンバック: [EC-CUBE 2.11.5] 新着商品を表示する その2 | NAKWEB × EC-CUBE

  24. ピンバック: [EC-CUBE 2.11.5] 新着商品を表示する その3 | NAKWEB × EC-CUBE

  25. ピンバック: EC-CUBEに手間いらずの半自動お薦めブロックを作成 | 戯れ問答

kicksui へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

* Copy This Password *

* Type Or Paste Password Here *

*

コメント欄にコードを挿入したい場合は、[php][/php] を使ってください。