[EC-CUBE 4] トップページにカテゴリ一覧を表示するカスタマイズ

前回トップページに新着商品を表示するカスタマイズを紹介しました。

今回は、そのコードを利用して特定のカテゴリの商品を表示していきます。

カテゴリには「新入荷」を利用します。「新入荷」以外のカテゴリにすることもできますので、最後までお付き合いください。

※本記事は、前回の続きとなりますので、ご覧いただいていない場合は、以下の記事をご覧ください。

トップページに「新入荷」商品を表示

手順

1. カテゴリIDを確認する
2. moreボタンのリンクに変更とテキストの修正
3. TwigExtentionを修正し、「新入荷」商品情報を取得

1.カテゴリIDを確認する

管理画面にログインし、商品管理->カテゴリ管理を選択してください。

新入荷のカテゴリIDは「2」であることを確認します。

※今回は、新入荷のカテゴリIDの「2」を利用しますが、「2」以外が設定されている場合や他のカテゴリの商品を表示させる場合は、該当のカテゴリIDをご利用ください。

2.moreボタンのリンクに変更とテキストの修正

moreリンク先を新入荷商品一覧に変更し、「新入荷商品」へ文言修正します

app/template/default/Block/new_item.twig#L14-L19

<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 class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
<span class="ec-secHeading__en">NEW STOCK</span>
<span class="ec-secHeading__line"></span>
<span class="ec-secHeading__ja">新入荷商品</span>
<a class="ec-inlineBtn--top" href="{{ url('product_list') }}?category_id=2">{{ 'front.block.new_item.more'|trans }}</a>
</div>

3.TwigExtentionを修正し、「新入荷」商品情報を取得

前回のコードに「新入荷」の商品を検索するコードを追加します。

app/Customize/Twig/Extension/TwigExtension.php#L82

            // 検索条件の新着順を定義
            $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();

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

            // 検索条件の新着順を定義
            $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();

            // 新入荷商品を表示
            $new_stock_id = 2;
            $qb = $this->entityManager->createQueryBuilder();
            $query = $qb->select("ctg")
                ->from("Eccube\\Entity\\Category", "ctg")
                ->where('ctg.id = :id')
                ->setParameter('id', $new_stock_id)
                ->getQuery();
            $searchData['category_id'] = $query->getOneOrNullResult();

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

最後に

今回も簡単なカスタマイズで、特定のカテゴリを表示することができました。

カテゴリのピックアップは、トップ以外にも、商品一覧、商品詳細、購入完了画面などの画面で表示することで、商品の訴求ができるようになります。

ぜひ、お試しください。