[EC-CUBE 4] トップページに新着商品を表示するカスタマイズ

EC-CUBE4になってTOPページのデザインも、より魅力的なものになりました。

しかし、トップページにある新着商品は、自動で更新されるものになっていません。

そこで今回は、商品を追加したときに自動で更新するようにカスタマイズしていきます。

また、カスタマイズ方法ですが、EC-CUBE3ではできなかった本体のソースコードを変更しない方法で実装していきます。

※ 商品を追加したときに、自動で更新するようにしていきます。

手順

1. 修正ファイルを設置
2. moreボタンを適切なリンクに変更
3. TwigExtentionを利用し、新着商品を取得
4. 新着商品をTwigテンプレート反映

1.修正ファイルを設置

今回必要なファイルは、2ファイルになります。

/app
 Ltemplate
　Ldefault
　 LBlock
    Lnew_item.twig
 LCustomize
　LTwig
　 LExtension
    LTwigExtension.php

まず、新着商品のTwigファイルをコピーします。

src/Eccube/Resource/template/default/Block/new_item.twig

app/template/default/Block/new_item.twig

次にTwigExtention用のファイルを作成します。

app/Customize/Twig/Extension/TwigExtension.php

2.moreボタンを適切なリンクに変更

moreボタンを見るとリンク先が商品一覧になっています。

リンク先の商品一覧のソート順を新着順となるようにリンクを修正します。

app/template/default/Block/new_item.twig#L20

href="{{ url('product_list') }}"

href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}"

3.TwigExtentionを利用し、新着商品を取得

Twig側で「CustomizeNewProduct()」を実行したときに、新着商品3件返す仕様にします。

まず、メソッドを定義します。

app/Customize/Twig/Extension/TwigExtension.php

public function getFunctions()
    {
        return array(
            new \Twig_SimpleFunction('CustomizeNewProduct', array($this, 'getCustomizeNewProduct')),
        );
    }

続いて商品情報を返すメソッドです。

    /**
     * 
     * 新着商品3件返す
     * 
     * @return Products|null
     */
    public function getCustomizeNewProduct()
    {
        try {
            // 検索条件の新着順を定義
            $searchData = array();
            $qb = $this->entityManager->createQueryBuilder();
            $query = $qb->select("plob")
                ->from("Eccube\\Entity\\Master\\ProductListOrderBy", "plob")
                ->where('plob.id = :id')
                ->setParameter('id', $this->eccubeConfig['eccube_product_order_newer'])
                ->getQuery();
            $searchData['orderby'] = $query->getOneOrNullResult();

            // 定義した「$searchData」を引数にしてQueryBuilderObjectを取得
            $qb = $this->productRepository->getQueryBuilderBySearchData($searchData);


            // 新着順の商品情報3件取得
            $query = $qb->setMaxResults(3)->getQuery();
            $products = $query->getResult();
            return $products;

        } catch (\Exception $e) {
            return null;
        }
        return null;
    }

実装内容を説明します。

商品情報の取得には、既存のproductRepositoryを利用するため
productRepository->getQueryBuilderBySearchData()の引数の検索条件に新着順を定義します。

        // 検索条件の新着順を定義
        $searchData = array();
        $qb = $this->entityManager->createQueryBuilder();
        $query = $qb->select("plob")
            ->from("Eccube\\Entity\\Master\\ProductListOrderBy", "plob")
            ->where('plob.id = :id')
            ->setParameter('id', $this->eccubeConfig['eccube_product_order_newer'])
            ->getQuery();
        $searchData['orderby'] = $query->getOneOrNullResult();

定義した「$searchData」を引数にしてQueryBuilderObjectを取得します。

        // 定義した「$searchData」を引数にしてQueryBuilderObjectを取得
        $qb = $this->productRepository->getQueryBuilderBySearchData($searchData);

商品情報3件取得するようにします。

        // 商品情報3件取得
        $query = $qb->setMaxResults(3)->getQuery();
        $products = $query->getResult();
        return $products;

以上です。

4.新着商品をTwigテンプレート反映

実装したTwigExtentionを利用して、商品情報を出力します。

{#
/*
 *
 * Copyright (C) SPREAD WORKS Inc. All Rights Reserved.
 *
 */
#}
{% set Products = CustomizeNewProduct() %}
{% if Products|length > 0 %}
<div class="ec-role">
    <div class="ec-newItemRole">
        <div class="ec-newItemRole__list">
            <div class="ec-newItemRole__listItem">
                <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
                    <span class="ec-secHeading__en">{{ 'front.block.new_item.title__en'|trans }}</span>
                    <span class="ec-secHeading__line"></span>
                    <span class="ec-secHeading__ja">{{ 'front.block.new_item.title__ja'|trans }}</span>
                    <a class="ec-inlineBtn--top" href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}">{{ 'front.block.new_item.more'|trans }}</a>
                </div>
            </div>
            
            {% for Product in Products %}
            <div class="ec-newItemRole__listItem">
                <a href="{{ url('product_detail', {'id': Product.id}) }}">
                    <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
                    <p class="ec-newItemRole__listItemTitle">{{ Product.name }}</p>
                    <p class="ec-newItemRole__listItemPrice">
                    {% if Product.hasProductClass %}
                        {% if Product.getPrice02Min == Product.getPrice02Max %}
                            {{ Product.getPrice02IncTaxMin|price }}
                        {% else %}
                            {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
                        {% endif %}
                    {% else %}
                        {{ Product.getPrice02IncTaxMin|price }}
                    {% endif %}
                    </p>
                </a>
            </div>
            {% endfor %}

        </div>
    </div>
</div>
{% endif %}

app/template/default/Block/new_item.twig#L8-L9

・TwigExtentionのCustomizeNewProduct()を取得し、0件以上の場合は出力するようにします。

app/template/default/Block/new_item.twig#L21-L40

・Productsをループ処理します。URL、画像、商品名、価格を出力します。

最後に

バージョン3の時よりも簡単にカスタマイズができるようになりました。

アイディア次第で様々な機能を実装することができますので、ぜひチャレンジしてみてください。

今回利用したファイルを用意しましたので、参考にしてください。