【EC-CUBE 4】ID毎に詳細情報を表示するページの作り方

エンティティの自動フェッチ機能を使ってID毎に詳細情報を表示するページの作り方

指定IDのエンティティを取得できる『自動フェッチ』機能を使ってID別ページを作成しよう!

この記事では、URLの末尾にIDを指定することで、そのIDに対応するエンティティ(レコード)を取得できる「自動フェッチ」機能について解説しています。

本記事は、こちらの記事 の続き(オリジナルテーブル『dtb_Maker』を新規作成し、いくつかレコードを追加した状態)からの手順となります。
特定のページからレコードを追加する方法については こちらの記事 で解説しています。

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

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver

目次

実装後の状態

新規作成したテーブル『dtb_Maker』に、3つのレコードが保存されています。

これらのレコード別詳細ページを作成します。

新規作成したdtb_Makerに、3つのデータを保存しておく
『dtb_Maker』の中身
エンティティの自動フェッチによるページの表示例1
エンティティの自動フェッチによるページの表示例2
エンティティの自動フェッチによるページの表示例3

「(ドメイン名)/maker/(id)」というURLを打ち込むと、その末尾のidに対応したレコードが取り出され、情報が表示されます。

デフォルトで用意されている商品詳細ページ「(ドメイン名)/products/detail/(id)」も、末尾のidに対応した商品詳細が表示されますね。

実装までの手順(自動フェッチ)

IDから特定のエンティティ(レコード)を取り出すには、こちらの記事で解説したようにRepositoryのfind()メソッドを使います。

が、このような操作には『自動フェッチ』という便利機能が使えます。
この機能を使うと、URLにIDを渡すだけでその情報に紐づくエンティティ(レコード)を簡単に取り出せます。

自動フェッチによるエンティティ取得のイメージ
  • URL:/maker/1 → ID = 1 のメーカー情報を取得
  • URL:/maker/2 → ID = 2 のメーカー情報を取得

メーカー情報を表示するページを作成する

まずはメーカー情報を表示するためのページ「maker.twig」を作成します。

新規ページは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 Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Eccube\Controller\AbstractController;
use Customize\Entity\Maker;

class MakerController extends AbstractController
{
  /**
   * @Route("/maker/{id}", name="maker")
   * @Template("maker.twig")
   */
  public function index(Request $request, Maker $maker)
  {
      return [
        'Maker' => $maker,
      ];
  }
}

修正ポイントは以下の通りです。

  • 「use Customize\Entity\Maker;」で、抽出したいエンティティを指定します。
  • 「@Route(“/maker/{id}”」とすると、{id}部分で指定されたidのエンティティを引数に渡すことができます。
  • 引数に「Maker $maker」を追加します。(これが{id}部分で指定されたidのエンティティとなります。)

作成したページのTwigを修正する

Controllerから渡された「Maker」を表示できるよう、テンプレートを修正します。
Controllerから渡された情報をTwigで表示する方法については こちらの記事 にて。

{% extends 'default_frame.twig' %}

{% block main %}

  <ul>
    <li>メーカーID: {{ Maker.ID }}</li>
    <li>メーカー名: {{ Maker.name }}</li>
    <li>メーカーコード: {{ Maker.code }}</li>
  </ul>

{% endblock %}

キャッシュの削除

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

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

「(ドメイン名)/maker/1」のように末尾に表示したいidを入れたとき、そのidに紐づく情報が表示されればOKです!

エンティティの自動フェッチによるページの表示例1
末尾を1にしたとき、ID = 1のメーカー情報が表示されている。

まとめ

以上、URLから指定IDの情報を簡単に取得して表示できる「自動フェッチ」について解説しました。

「指定IDのエンティティを取得する」という処理は、商品詳細ページでも見られる通り頻繁に使われます。この機能を通じて、レコードの更新や削除なども簡単に行えるようになるので、ぜひ活用してみてください。

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

この記事を書いた人

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

目次