2015年7月18日土曜日

【ECCUBE3】最近購入された商品のブロックの追加

ECCUBE3にて最近購入された商品を表示するブロックを追加していきましょう。
ECCUBE2系の頃とは作り方すっかり変わっていますが、慣れてしまえば簡単な追加はやりやすいです。

最終的な表示は下記の様になります。

まずは管理画面からブロックを追加しましょう。
コンテンツ管理>ブロック管理から新規入力で追加します。

それぞれ下記の様に入力します。ブロックデータはとりあえず何か入力しておきます。
ブロック名 最近購入された商品
ファイル名 recentPurchase.twig
ブロックデータ hoge

登録するとデータベースのdtb_blockに追加されます。
今回はただの画像やテキストを表示するブロックではなく、データベースから値を取得して表示するため、dtb_blockのlogic_flgを0から1に変更します。
logic_flgを1にするとFrontControllerProviderにコントローラーを探しに行きます。

次は、FrontControllerProviderにコントローラーを登録します。
/eccube/src/Eccube/ControllerProvider/FrontControllerProvider.php
75~79行目あたりのblockが定義されてるあたりに下記行を追加
$c->match('/block/recentPurchase', '\Eccube\Controller\Block\recentPurchaseController::index')->bind('block_recentPurchase');

登録したコントローラーを作成します。
下記ファイルを新規作成。
/eccube/src/Eccube/Controller/Block/recentPurchaseController.php

内容は下記のとおり。
namespace Eccube\Controller\Block;

use Eccube\Application;

class recentPurchaseController
{
    public function index(Application $app)
    {
        $OrderList = $app['orm.em']->getRepository('\Eccube\Entity\OrderDetail')
            ->findBy(
                array(),
                array('id' => 'DESC')
            );

        return $app['view']->render('Block/recentPurchase.twig', array(
            'OrderList' => $OrderList,
        ));
    }
}

コントローラーに登録が出来ましたので、下記twigを作成していきます。
/eccube/src/Eccube/Resource/template/default/Block/recentPurchase.twig

中身は下記の通り、新着商品のcss使いまわしてます。レスポンシブデザインにも対応してます。
<div id="contents_top">
  <div id="item_list">

    <div class="col-sm-12">
      <h2 class="heading00">最近購入された商品</h2>
    </div>

    <div class="row">
      {% for Order in OrderList | slice(0,8) %}
        <div class="col-sm-3 col-xs-6">
            <div class="pickup_item">
                <span class="date">{{ Order.Order.order_date|date("Y年m月d日H時i分") }}</span>
                <a href="{{ url('product_detail', {'id': Order.Product.id}) }}">
                    <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{ Order.Product.main_list_image|no_image_product }}"></div>
                    <dd class="item_comment">{{Order.Product.description_detail[:30] ~ '...' }}</p>
                    <dl>
                      <dt class="item_name">{{Order.product_name}}</dt>
                      <dd class="item_price">{{ Order.Price }}</dd>
                    </dl>
                </a>
            </div>
      </div>
      {% endfor %}
    </div>
    
  </div>
</div>

最後に管理画面のコンテンツ管理>ページ管理、該当のページのレイアウト管理から最近購入された商品ブロックを好きな所に配置します。

以上で8件の最近購入された商品が表示されます。


0 コメント:

コメントを投稿