【EC-CUBE】新しいフロントページを追加する方法

2022 10/29

2016年12月7日 2022年10月29日

EC-CUBE２で新規にフロントページを追加する方法の解説です。

dtb_pagelayoutにレコードを追加する

dtb_pagelayoutに新しいレコードを追加します。

各カラムの値は下記のように設定します。

page_id	既存のレコードと重複しない値にします。
device_type_id	PCやスマホ別のIDです（下記参照）。
page_name	ページの名前です。管理画面や、フロントに表示されます。
url	追加するページのURLです。
filename	テンプレートファイルのファイル名。(.tplは不要)
edit_flg	2を設定して管理画面からも編集出来るようにします。

device_type_idの種別

device_type_id	端末
1	モバイル
2	スマートフォン
10	PC

サンプルSQL

PC用のテストページ(test/index.php)ページを追加するなら下記のようなSQLになります。

INSERT INTO `dtb_pagelayout` (`device_type_id`, `page_id`, `page_name`, `url`, `filename`, `header_chk`, `footer_chk`, `edit_flg`, `author`, `description`, `keyword`, `update_url`, `create_date`, `update_date`, `meta_robots`) VALUES ('10', '38', 'テストページ', 'test/index.php', ‘test/test', '1', '1','2', NULL, NULL, NULL, NULL, CURRENT_TIME(), CURRENT_TIME(), NULL);

PHPファイルを作成

上記でdtb_pagelayoutに追加レコードにurlに対応したPHPファイルを作成します。

PHPファイルはページクラスの呼び出しくらいしかしないので、適当な既存のphpファイルをコピーして、ページクラスの部分のみ書き換えればOKです。
場所はデフォルトでは、ドキュメントルート直下の「html」ディレクトリです。

サンプルPHPファイル

test/index.phpのサンプルです。
ページクラスをpage_extends/test/LC_Page_Test_Ex.phpとしています。

<?php
require_once '../require.php';
// ページクラスを書き換え（１）
require_once CLASS_EX_REALDIR . 'page_extends/test/LC_Page_Test_Ex.php';

//  ページクラスを書き換え（２）
$objPage = new LC_Page_Test_Ex();
$objPage->init();
$objPage->process();

ページクラスを作成

PHPファイルで呼び出ししたページクラスを設置します。

このクラスのactionメソッドに、ビジネスロジックを実装していきます。

既存のページクラスと作りを合わせましょう。
LC_Page_Exを継承してクラスを作成します。

ディレクトリは、「data/class_extends」配下です。

ページクラスのサンプル

ビジネスロジックがないの空のページクラスのサンプルです。

<?php
require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

class LC_Page_Test_Ex extends LC_Page_Ex
{
    /**
     * Page を初期化する.
     *
     * @return void
     */
    public function init()
    {
        parent::init();
    }

    /**
     * Page のプロセス.
     *
     * @return void
     */
    public function process()
    {
        parent::process();
        $this->action();
        $this->sendResponse();
    }

    /**
     * Page のアクション.
     *
     * @return void
     */
    public function action()
    {
		// ここに処理を実装
		echo "テストページです";

    }
}

テンプレートファイルを配置

最後にテンプレートファイルを配置します。
ディレクトリは、「data/Smarty/templates/｛端末別ディレクトリ｝/」配下です。
dtb_pagelayoutで登録したファイル名でテンプレートファイルを配置します。

テンプレートファイルのサンプル

HTMLやSmartyで実装しま。

<!DOCTYPE html>
<html lang="ja">
PCページです
</html>

これで、新規ページの追加は完了です。
/testへアクセスして新しく追加されたページを確認してみましょう。

まとめ

ざっくり簡単にEC-CUBE２のフロントの新規ページの作成方法でした。

このサンプルをテンプレートとしてページを追加して、カスタマイズしていくのも良いかもしれません。

この記事が少しでもお役に立てれば幸いです。

最後までお読み頂きありがとうございました。