【EC-CUBE 4】同じタグが付いた商品一覧ページを作る方法

Controllerから表示ページにデータを渡す方法(初心者向け)

同じタグが付いた商品を抽出して、カテゴリーと同じように一覧表示したいけどどうすれば?

この記事では、各商品に好きなだけ付与できる「タグ」を使って、同じタグが付いた商品をデータベースから引っ張ってきて一覧表示する方法を紹介します。
EC-CUBE 4のカスタマイズを行いたい方の参考になればと思います!

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver
ブラウザ:Google Chrome

なおデバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については こちらの記事 で解説しています。

各種プラグインとの整合性は確認しておりませんので、ご留意お願いします。
まず流れを掴んでおくために、この記事と同じ「Sampleページ」を試しに作ってみることをオススメします。

目次

完成ページ

今回は、前回作成した新規ページ(URL: ドメイン名/lists/sample)に、特定のタグが付いた商品だけを表示する「商品一覧ページ」を作成します。

【サンプル】タグを付けた商品の一覧ページ

商品登録時に【サンプル】というタグを設定し、そのタグが付いた商品のメイン画像・商品名・価格が表示される一覧ページです。(上図のサンプル_1〜サンプル_4には、【サンプル】というタグが付いています。)

なお、新規ページは ” 管理画面 > コンテンツ管理 > ページ管理 ” から作成したものでも構いませんが、その場合のページURLには「user_data」が含まれてしまい、Controllerファイルの作成がやや難しいです。(参考:新規ページのControllerを作成する方法

特別な理由がなければ、こちらの記事を参考にベースとなるControllerを作成してから取り掛かるのがオススメです。

作成手順

  1. 商品一覧を表示させる新規ページを作成。前回作成済のため、本記事ではスキップ)
  2. 新規ページのControllerを作成。
  3. 商品一覧を表示するためのコードを新規ページに記載。
  4. EC CUBE 管理画面にてキャッシュを削除。

かなりざっくり書くとこんな手順。
とはいえ、『② Controllerの作成』と『③ 新規ページにコードを記載』は慣れていないと意味不明です。

コピペだけでも使えるようにしてみたので、こちらを見本にしつつ少しずつ応用してもらえればと思います。

Controllerの作成

以下のようなControllerファイルを作成し、ファイルサーバーのapp/Customize/Controllerにアップします。

今回は、前回の記事 でControllerを作成済のため、そのファイルを以下の通り修正しました。

<?php

namespace Customize\Controller;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Eccube\Controller\AbstractController;
use Eccube\Entity\Product;
use Eccube\Repository\ProductRepository;

class SamplePageController extends AbstractController
{
   /**
     * @var ProductRepository
     */
    protected $productRepository;

    /**
     * @param ProductRepository $productRepository
     */
     public function __construct(ProductRepository $productRepository) {
        $this->productRepository = $productRepository;
    }
    
    /**
     * @Route("/lists/sample", name="lists_sample")
     * @Template("sample.twig")
     */
    public function index(Request $request)
    {
        $customQb = $this->productRepository->createQueryBuilder('p');
        $customQb->innerJoin('p.ProductTag', 'pt')
            ->innerJoin('pt.Tag', 't')
            ->andWhere('t = :Tag')
            ->setParameter('Tag', 16);

        $TagProducts = $customQb->getQuery()->getResult();

        return [
            'TagProducts' => $TagProducts,
        ];

    }    
}

このControllerによって、@Routeで指定したURL(上記の例ではドメイン名/lists/sample)にアクセスしたときに、データベースから特定のタグをもつ商品データを引っ張ってくることができます。

ちなみに、何が書いてあるかを簡単に解説すると、

15〜25行目

Repository(リポジトリ)を操作するための決まり文句。
なお、Repositoryはデータベースを操作するための機能で、基本的な使い方は こちらの記事 を参照

33〜39行目

タグIDが「16」の商品データ一式を、「$TagProducts」という変数に格納。
赤字の「16」は、一覧表示させたいタグのIDに書き換えてください。
タグIDは管理ページの「タグ管理」にて確認できます。

42行目

次項のTwigファイルに記載される変数「TagProducts」に、「$TagProducts」のデータ(=タグIDが「16」の商品データ)を格納。

Controllerから表示ページ(Twigファイル)にデータを渡す仕組みがわからず、きちんと理解したい方は以下記事を参考にしてみてください。

新規ページ(Twigファイル)の編集

管理画面のコンテンツ管理 > ページ管理から、先程のControllerで指定したページを編集します。

なお、このファイルの大部分は、デフォルトで用意されている「商品一覧ページ」を参考にしています。

{% extends 'default_frame.twig' %}

{% block main %}
  <div class="ec-shelfRole">
      <ul class="ec-shelfGrid">
          {% for TagProduct in TagProducts %}
              <li class="ec-shelfGrid__item">
                {# 商品画像の表示 #}
                <p class="ec-shelfGrid__item-image">
                    <img src="{{ asset(TagProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ TagProduct.name }}" loading="lazy">
                </p>
                {# 商品名の表示 #}
                <p>{{ TagProduct.name }}</p>
                {# 価格の表示 #}
                <p class="price02-default">
                    {% if TagProduct.hasProductClass %}
                        {% if TagProduct.getPrice02Min == TagProduct.getPrice02Max %}
                            {{ TagProduct.getPrice02IncTaxMin|price }}
                        {% else %}
                            {{ TagProduct.getPrice02IncTaxMin|price }} ~ {{ TagProduct.getPrice02IncTaxMax|price }}
                        {% endif %}
                    {% else %}
                        {{ TagProduct.getPrice02IncTaxMin|price }}
                    {% endif %}
                </p>
              </li>
          {% endfor %}
      </ul>
  </div>

{% endblock %}

ここでポイントになるのは、6行目の「TagProducts」です。

前述のControllerで、タグIDが「16」の商品データを「TagProducts」で受けるように設定しました。
従って、ここの「TagProducts」にはタグID = 16の商品データが格納されていることになります。

その商品データを、for文を用いて「TagProduct」として一つずつ取り出し、

  • TagProduct.main_list_image →【メイン画像】
  • TagProduct.name →【商品名】
  • TagProduct.getPrice →【価格】

というように表示しています。
もちろん、商品データの他の値(商品IDなど)を表示させることも可能です。

本記事のコードそのままに作られたページは、商品の公開ステータス(公開、非公開、廃止)に関係なく商品が表示されてしまいます。

ステータスが「公開」以外で非表示にする方法は、以下記事にて解説しています。

キャッシュを削除

ここまでで準備完了です。
管理画面からキャッシュを削除して、ページにアクセスしてみましょう。

キャッシュ管理からキャッシュを削除できます。

冒頭でお見せしたような一覧ページが表示されればOKです!

【サンプル】タグを付けた商品の一覧ページ

まとめ

以上、特定のタグが付いた商品のみを表示する「タグ商品一覧ページ」を作る方法を紹介しました。

Controllerの部分は、特に初心者の方はよくわからないと思いますが、とりあえず今は「このように書くんだ」くらいの気持ちで大丈夫かと。今後も引き続き色々なページを作る方法を載せていくので、場数を踏んで徐々に慣れていってもらえればと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次