同じタグが付いた商品を抽出して、カテゴリーと同じように一覧表示したいけどどうすれば？
この記事では、各商品に好きなだけ付与できる「タグ」を使って、同じタグが付いた商品をデータベースから引っ張ってきて一覧表示する方法を紹介します。
EC-CUBE 4のカスタマイズを行いたい方の参考になればと思います！
なおデバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法については こちらの記事 で解説しています。
各種プラグインとの整合性は確認しておりませんので、ご留意お願いします。
まず流れを掴んでおくために、この記事と同じ「Sampleページ」を試しに作ってみることをオススメします。
完成ページ
今回は、前回作成した新規ページ（URL: ドメイン名/lists/sample）に、特定のタグが付いた商品だけを表示する「商品一覧ページ」を作成します。
商品登録時に【サンプル】というタグを設定し、そのタグが付いた商品のメイン画像・商品名・価格が表示される一覧ページです。（上図のサンプル＿１〜サンプル＿４には、【サンプル】というタグが付いています。）
なお、新規ページは ” 管理画面 ＞ コンテンツ管理 ＞ ページ管理 ” から作成したものでも構いませんが、その場合のページURLには「user_data」が含まれてしまい、Controllerファイルの作成がやや難しいです。（参考：新規ページのControllerを作成する方法）
特別な理由がなければ、こちらの記事を参考にベースとなるControllerを作成してから取り掛かるのがオススメです。
作成手順
- 商品一覧を表示させる新規ページを作成。（前回作成済のため、本記事ではスキップ）
- 新規ページのControllerを作成。
- 商品一覧を表示するためのコードを新規ページに記載。
- 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の部分は、特に初心者の方はよくわからないと思いますが、とりあえず今は「このように書くんだ」くらいの気持ちで大丈夫かと。今後も引き続き色々なページを作る方法を載せていくので、場数を踏んで徐々に慣れていってもらえればと思います。