EC-CUBE4で新規ページを追加する方法

EC-CUBE4でテンプレートをカスタマイズする際、新しいページを追加したいことがあると思います。
しかし、新しいページを追加後、そのページに遷移したい場合、そのままでは遷移できません。

今回は、新しいページに遷移する方法を説明します。
Symfonyの知識がない初心者の方でもわかるように解説しますので、しっかり理解しておきましょう。

以下の環境で説明します。
EC-CUBE 4.1.2

目次

新しいページに遷移する方法とは

ルーティングというものがあります。
ルーティングとは、あるURLがリクエストされた場合の処理を指定したものです。
あるURLがリクエストされた場合、対応しているControllerが処理を行なって、対応しているtwigファイルを表示するという流れになっています。

実際にどうするのか、以下の例で説明します。


とあるボタンをクリックした際に、ドメイン/sampleに遷移させたい場合、
Controllerを作成します。

ECCUBEROOT/src/Eccube/Controller/TopController.phpをコピーします。
ECCUBEROOT/app/Customize/Controller以下に貼り付けます。

ECCUBEROOT/app/Customize/Controller/TopController.phpファイルを編集します。
ファイル名、クラス名をSampleController.phpに、namespaceをCustomizeに変更をします。

<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
namespace Eccube\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Routing\Annotation\Route;

class TopController extends AbstractController
{
    /**
     * @Route("/", name="homepage", methods={"GET"})
     * @Template("index.twig")
     */
    public function index()
    {
        return [];
    }
}

こうなっているところを、以下のように変更します。

//↓変更
namespace Customize\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Routing\Annotation\Route;
//↓追加
use Eccube\Controller\AbstractController;

//class名を変更
class SampleController extends AbstractController
{
    // @Routeと@Templateを変更
    /**
     * @Route("/sample", name="sample", methods={"GET"})
     * @Template("sample.twig")
     */
    public function index()
    {
        return [];
    }
}

@Routeの箇所でurlと名前を設定します。
@templateは、このurlがリクエストされた際に表示するtwigファイルのことです。

今回は、sampleという名前をつけて、sample.twigを表示するようにしました。

最後に、遷移元のボタンのhref属性を

<a href="{{ url('sample') }}">sample</a>

こんな感じで書き換えます。

urlの中身に@Routeで指定したnameを記入すると、それに対応したurlがリクエストされるようになります。

実際にボタンをクリックしてみて、sample.twigに書かれた内容が表示されていたら成功です。

default_frame.twigをextendsする場合

default_frame.twigをextendsする場合、この方法では、エラーが発生します。

例えば、sample.twigの中身が以下の場合。

{% extends 'default_frame.twig' %}
{% block main %}
sampleです
{% endblock %}

meta.twigの23行目あたりで、RuntimeErrorが発生します。

これを解消するには、以下の作業が必要です。

STEP
管理画面からページを追加する。

管理画面の、コンテンツ管理->ページ管理から、新規作成をクリックする。

ページ名、URL、ファイル名を入力する。
今回は、以下のようにする。
ページ名: サンプル
URL: sample
ファイル名: sample

コードは、追加したい内容を書き換える。
例:
{% block main %}
sampleです
{% endblock %}
のようにする。

レイアウト設定の箇所のPCに、
トップページ用のレイアウトなら、トップページ用レイアウトを、
下層ページ用レイアウトなら、下層ページ用レイアウトを選択する。

入力したら、登録をクリックする。

STEP
先程作成したSampleControllerを修正する。
* @Template("sample.twig")

これを、以下に修正する。

* @Template("@user_data/sample.twig")
STEP
表示されるか確認する。

sample.twigが表示されていれば、成功です。

まとめ

慣れてしまえば何てことはないのですが、最初はよくわからないかもしれません。
Symfonyの知識があれば理解しやすいので、Symfonyを学んでみてもいいかと思います。
公式サイトのリンクです。
https://symfony.com/

EC-CUBE4を使用してのECサイト制作に困っている方は、一度弊社にご相談ください。
何かお力になれることがあるかもしれません。
もちろん、相談無料ですのでお気軽にお問い合わせください。

目次
閉じる