メモ > 技術 > CMS: ECCube > カスタマイズ: ページの作成
■カスタマイズ: ページの作成
■下層ページの作成（管理画面から作成）
管理画面の「コンテンツ管理 → ページ管理 → 新規作成」から作成できる
ヘッダなどが表示されたページにしたければ、「レイアウト設定」で「下層ページ用レイアウト」などを選択する
EC-CUBE4で新しくページを追加する方法 | ホムペディア
https://homupedia.com/eccube4-create-pages.html
レイアウトの利用 - < for EC-CUBE 4.0 Developers />
https://doc4.ec-cube.net/design_layout
URLには「user_data」という文字が含まれるが、これは設定で他のものに変更できる
EC-CUBE4でuser_dataを変更する - Qiita
https://qiita.com/chihiro-adachi/items/3218275ea4fc6d485fe5
■下層ページの作成（コントローラを用意して作成）
Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers />
https://doc4.ec-cube.net/customize_controller
コントローラを作成
html\app\Customize\Controller\TestPageController.php
<?php
namespace Customize\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;
class TestPageController
{
/**
* @Route("/test")
*/
public function testMethod()
{
return new Response('Hello test page !');
}
}
以下にアクセスすると「Hello test page !」と表示される
反映されない場合はキャッシュを削除する
http://eccube4.local/test
■下層ページの作成（コントローラを用意して作成 / テンプレートに対応）
引き続き、テンプレートファイルに対応させてみる
html\app\Customize\Controller\TestPageController.php
<?php
namespace Customize\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Response;
class TestPageController
{
/**
* @Route("/test")
* @Template("Test/index.twig")
*/
public function testMethod()
{
return ['message' => '下層ページの作成'];
}
}
html\app\template\default\Test\index.twig
<h2>Hello !</h2>
<p>message={{ message }}</p>
以下にアクセスすると「Hello ! message=下層ページの作成」と表示される
http://eccube4.local/test
テンプレートファイルを以下のようにすると、bodyタグなどが反映される
ただしこの時点では、共通のヘッダやフッタは表示されない
html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %}
{% block main %}
<h2>Hello !</h2>
<p>message={{ message }}</p>
{% endblock %}
Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers />
https://doc4.ec-cube.net/customize_controller
■下層ページの作成（コントローラを用意して作成 / データベースの参照）
引き続き、データベースを参照してみる
html\app\Customize\Controller\TestPageController.php
<?php
namespace Customize\Controller;
use Eccube\Repository\ProductRepository;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Response;
class TestPageController
{
/**
* @var ProductRepository
*/
protected $productRepository;
/**
* ProductController constructor.
*
* @param ProductRepository $productRepository
*/
public function __construct(
ProductRepository $productRepository
) {
$this->productRepository = $productRepository;
}
/**
* @Route("/test/{id}", requirements={"id" = "\d+"}, name="test")
* @Template("Test/index.twig")
*/
public function testMethod($id)
{
$Product = $this->productRepository->find($id);
if (!$Product) {
throw new NotFoundHttpException();
}
return [
'message' => '下層ページの作成',
'Product' => $Product,
];
}
}
html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %}
{% block main %}
<h2>Hello !</h2>
<p>message={{ message }}</p>
<p>{{ Product.id }}: {{ Product.name }}</p>
{% endblock %}
以下にアクセスすると、URLに応じて「1: 彩のジェラートCUBE」のように商品情報が表示される
http://eccube4.local/test/1
http://eccube4.local/test/2
■下層ページの作成（コントローラを用意して作成 / ヘッダとフッタを表示）
引き続き、ヘッダとフッタを表示してみる
レイアウトは管理画面から設定を行うが、何もしなければ管理画面には認識されない
まずは以下の情報をデータベースに登録する（ただし実際は、データはマイグレーションで追加する方がいい）
INSERT INTO `dtb_page` (`master_page_id`, `page_name`, `url`, `file_name`, `edit_type`, `author`, `description`, `keyword`, `create_date`, `update_date`, `meta_robots`, `meta_tags`, `discriminator_type`) VALUES
(
NULL,
'テストページ', /* ページ名 */
'test', /* url */
'Test/index', /* テンプレートファイル */
2,
NULL,
NULL,
NULL,
NOW(),
NOW(),
NULL,
NULL,
'page'
);
マイグレーションの詳細は、このファイル内の「マイグレーションでのデータ管理」を参照
以下はマイグレーションで追加する場合の例（コマンドで作成したマイグレーションファイルを編集している）
$ php bin/console doctrine:migrations:generate
app\DoctrineMigrations\Version20200820032003.php
<?php declare(strict_types=1);
namespace DoctrineMigrations;
use Doctrine\DBAL\Schema\Schema;
use Doctrine\Migrations\AbstractMigration;
/**
* Auto-generated Migration: Please modify to your needs!
*/
final class Version20200820032003 extends AbstractMigration
{
public function up(Schema $schema) : void
{
$sql =<<<EOL
INSERT INTO `dtb_page` (`master_page_id`, `page_name`, `url`, `file_name`, `edit_type`, `author`, `description`, `keyword`, `create_date`, `update_date`, `meta_robots`, `meta_tags`, `discriminator_type`) VALUES
(
NULL,
'テストページ', /* ページ名 */
'test', /* url */
'Test/index', /* テンプレートファイル */
2,
NULL,
NULL,
NULL,
NOW(),
NOW(),
NULL,
NULL,
'page'
);
EOL;
$this->addSql($sql);
}
public function down(Schema $schema) : void
{
$sql =<<<EOL
DELETE FROM dtb_page WHERE url = 'test';
EOL;
$this->addSql($sql);
}
}
$ php bin/console doctrine:migrations:migrate
これで管理画面「コンテンツ管理 → ページ管理」に「テストページ」が表示される
このページに対して設定を行う
「レイアウト設定」で「PC」を「下層ページ用レイアウト」にして「登録」ボタンを押す
この作業により、今回は以下のデータが登録された
INSERT INTO `dtb_page_layout` VALUES (46, 2, 41, 'pagelayout');
これで以下にアクセスすると、ヘッダやフッタ付きでページが表示される
http://eccube4.local/test/1
dtb_pageテーブルへのデータ追加はどうしても発生するようなので、
本番運営の際はこのデータはマイグレーションで追加する方が無難か
dtb_page_layoutのデータは管理画面からの操作で作成されるので、マイグレーションに含めない方が無難か
要検証
[EC-CUBE 4]コントローラを利用するページを追加してみる | creatorlab
https://www.creatorlab.jp/2019/07/10/eccube4%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E...
■下層ページの作成（コントローラを用意して作成 / 商品一覧と詳細を表示）
html\app\Customize\Controller\TestPageController.php
<?php
namespace Customize\Controller;
use Eccube\Repository\ProductRepository;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Response;
class TestPageController
{
/**
* @var ProductRepository
*/
protected $productRepository;
/**
* ProductController constructor.
*
* @param ProductRepository $productRepository
*/
public function __construct(
ProductRepository $productRepository
) {
$this->productRepository = $productRepository;
}
/**
* @Route("/test", name="test_index")
* @Template("Test/index.twig")
*/
public function testIndex()
{
$Products = $this->productRepository->findAll();
return [
'message' => '商品一覧の作成',
'Products' => $Products,
];
}
/**
* @Route("/test/{id}", requirements={"id" = "\d+"}, name="test_detail")
* @Template("Test/detail.twig")
*/
public function testDetail($id)
{
$Product = $this->productRepository->find($id);
if (!$Product) {
throw new NotFoundHttpException();
}
return [
'message' => '商品詳細の作成',
'Product' => $Product,
];
}
}
html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %}
{% block main %}
<h2>商品一覧</h2>
<p>message={{ message }}</p>
<ul>
{% for Product in Products %}
<li>
<a href="/test/{{ Product.id }}">
{{ Product.id }}
/
{{ Product.name }}
/
{{ Product.create_date|date('Y-m-d H:i:s') }}
</a>
</li>
{% endfor %}
</ul>
{% endblock %}
html\app\template\default\Test\detail.twig
{% extends 'default_frame.twig' %}
{% block main %}
<h2>商品詳細</h2>
<p>message={{ message }}</p>
<dl>
<dt>id</dt>
<dd>{{ Product.id }}</dd>
<dt>name</dt>
<dd>{{ Product.name }}</dd>
<dt>create_date</dt>
<dd>{{ Product.create_date|date('Y-m-d H:i:s') }}</dd>
</dl>
{% endblock %}
■管理画面内ページの作成
html\app\Customize\Controller\Admin\Product\TestController.php
<?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 Customize\Controller\Admin\Product;
use Eccube\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
class TestController extends AbstractController
{
/**
* @Route("/%eccube_admin_route%/test", name="admin_test")
* @Template("@admin/Product/test.twig")
*/
public function index(Request $request)
{
}
}
html\app\template\admin\Product\test.twig
{% extends '@admin/default_frame.twig' %}
{% set menus = ['product'] %}
{% block title %}タイトル{% endblock %}
{% block sub_title %}サブタイトル{% endblock %}
{% block main %}
<p>テストです。</p>
{% endblock %}
これでキャッシュを削除してから
http://eccube4.local/system/test
のように管理画面にアクセスすると、作成したページが表示される
ヘッダやサイドバーは自動的に表示された
EC-CUBE4カスタマイズ - 4系で管理画面に２ステップで新規ページを作る方法
https://umebius.com/eccube/eccube4_create_new_admin_page/
■管理画面内ページの作成（メニューに表示）
app\config\eccube\packages\eccube_nav.yaml
category_csv_import:
name: admin.product.category_csv_upload
url: admin_product_category_csv_import
の直下に以下を追加
product_test:
name: "Test Page"
url: admin_test
これで管理画面の「商品管理 → カテゴリCSV登録」の下に「Test Page」が表示され、
クリックすると上記で作成したページに遷移する
項目名を日本語化したい場合、外部リソースにする必要があるみたい（未検証）
EC-CUBE4カスタマイズ - 4系で管理画面に新規メニュー項目を追加する方法
https://umebius.com/eccube/ecceube4_insert_new_admin_menu/
■管理画面内ページの作成（データベースを参照）
html\app\Customize\Controller\Admin\Product\TestController.php
<?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 Customize\Controller\Admin\Product;
use Eccube\Controller\AbstractController;
use Eccube\Repository\ProductRepository;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
class TestController extends AbstractController
{
/**
* @var ProductRepository
*/
protected $productRepository;
/**
* ProductController constructor.
*
* @param ProductRepository $productRepository
*/
public function __construct(
ProductRepository $productRepository
) {
$this->productRepository = $productRepository;
}
/**
* @Route("/%eccube_admin_route%/test/{id}", requirements={"id" = "\d+"}, name="admin_test")
* @Template("@admin/Product/test.twig")
*/
public function index(Request $request, $id)
{
$Product = $this->productRepository->find($id);
if (!$Product) {
throw new NotFoundHttpException();
}
return [
'Product' => $Product,
];
}
}
html\app\template\admin\Product\test.twig
{% extends '@admin/default_frame.twig' %}
{% set menus = ['product'] %}
{% block title %}タイトル{% endblock %}
{% block sub_title %}サブタイトル{% endblock %}
{% block main %}
<p>テストです。</p>
<p>{{ Product.id }}: {{ Product.name }}</p>
{% endblock %}