0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

EC-CUBE 3でコードを編集してページを作成する

Last updated at Posted at 2019-05-02

はじめに

EC-CUBEで固定ページを作成するときに、管理画面経由で作成すると、user_dataというURLが付いちゃうのと、データベースの値に左右されてしまう点が気になったので、そもそもコントローラとか追加したらページ作成できるのではないかと思って試してみました。
(あと地味にURLの最後をスラッシュで終われない点も気になりました)

こちらでのメリットとしては、プログラム側に記述されているので、データベースの値を併せなくてもページ自体は表示できるので、Gitなどでファイルを共有すればページも閲覧できるようになる点かと思います。

注意点

下記の流れはEC-CUBE3のコアファイルを編集しています。「とりあえずページ追加したい」という方以外は下記の流れで作らない方が良いと思います。

ルーティング

ルーティングは、src/Eccube/ControllerProvider/FrontControllerProvicer.phpで操作しているようです。
中身はSilexのルーティングの記述ですね。

例えば、

  • /foo/ でアクセスできるページを
  • src/Eccube/Controller/StaticPageController
  • foo メソッドから呼び出して
  • foo という名前でurl関数から呼び出せる

様にする場合下記のような記述になります。

$c->match('/foo/', '\Eccube\Controller\StaticPageController::foo')->bind('foo');

特にこの記述がコアファイルに直接記入してしまっているのが問題です。他にいい方法がアレば…。

プラグインでも良いんですけど、結局インストールと有効化することでDBに依存してしまうのが気になる。

コントローラ

次にStaticPageControllerを作ってみます。

今回は単純に静的なページを追加するイメージで考えていますので、単純にビューを呼び出すだけの記述になりますが、特定カテゴリーの商品の一覧とかを表示させたい場合は、ここから必要なRepositoryを呼べばよいはずです。

<?php
namespace Eccube\Controller;

use Eccube\Application;

class StaticPageController extends AbstractController
{
    public function foo(Application $app)
    {
        return $app->render('Static/foo.twig');
    }
}

これで、Static/foo.twigが読み込まれるようになりました。

ちなみに、上記はコアファイル配下に設置していますが、composer.jsonにautoloadされるディレクトリを追加して、別の場所にコントローラを追加してしまえば、コアファイルとの切り離しも可能だと思います。

ビュー

ビューファイルはコアファイルに含める必要はありません。
app/template/default/Static/foo.twigを作成すれば、src配下のファイルよりも優先されて読み込まれます。

なお、管理画面上から追加していないので、titleやmeta情報などは少し強引に設定する必要があります。

{# titleに値を入れれば<title>追加される #}
{% set title = 'ページタイトル' %}

{# レイアウトテンプレートを指定 #}
{% extends 'default_frame.twig' %}

{# メタ情報を挿入する #}
{% block meta_tags %}
<meta name="description" content="ページの説明ほげほげ">
{# OGP情報とか、canonicalとか #}
{% endblock %}

{# CSSを読み込む #}
{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/path/to/foo.css" type="text/css" media="all">
{% endblock %}

{# JavaScriptを読み込む #}
{% block javascript %}
<script src="{{ app.config.front_urlpath }}/path/to/foo.js"></script>
{% endblock %}

{% block main %}
{# メインコンテンツエリア、ここに色々記述する #}
{% endblock %}

これで/foo/にアクセスるとページが表示されるようになっているはずです。

終わりに

とりあえずは思ったとおりにページが作れて満足です。(他にもっといい方法がありそうですけども)
EC-CUBE4ではこういった要望も満たされてると良いんですが調べていません、どうなんでしょうね?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?