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する場合、この方法では、エラーが発生します。
例えば、sample.twigの中身が以下の場合。
{% extends 'default_frame.twig' %}
{% block main %}
sampleです
{% endblock %}meta.twigの23行目あたりで、RuntimeErrorが発生します。
これを解消するには、以下の作業が必要です。
管理画面の、コンテンツ管理->ページ管理から、新規作成をクリックする。
ページ名、URL、ファイル名を入力する。
今回は、以下のようにする。
ページ名: サンプル
URL: sample
ファイル名: sample
コードは、追加したい内容を書き換える。
例:
{% block main %}
sampleです
{% endblock %}
のようにする。
レイアウト設定の箇所のPCに、
トップページ用のレイアウトなら、トップページ用レイアウトを、
下層ページ用レイアウトなら、下層ページ用レイアウトを選択する。
入力したら、登録をクリックする。
* @Template("sample.twig")これを、以下に修正する。
* @Template("@user_data/sample.twig")sample.twigが表示されていれば、成功です。
まとめ
慣れてしまえば何てことはないのですが、最初はよくわからないかもしれません。
Symfonyの知識があれば理解しやすいので、Symfonyを学んでみてもいいかと思います。
公式サイトのリンクです。
https://symfony.com/
EC-CUBE4を使用してのECサイト制作に困っている方は、一度弊社にご相談ください。
何かお力になれることがあるかもしれません。
もちろん、相談無料ですのでお気軽にお問い合わせください。
