EC-CUBE 4 内に静的なオリジナルページを作成する方法

[最新更新] 2023年07月02日
[初回公開] 2022年02月12日

EC-CUBE には商品一覧やカート機能など EC サイトを運営する上で必要な機能が一通り揃っているが、利用者に対して購入時の諸注意やリンク集など商品以外の情報を伝えるべく特別なプログラムを用いない HTML タグのみで構成された静的なオリジナルページを作成する方法について紹介する。

１．EC-CUBE に静的なオリジナルページを持つメリット

EC-CUBE に静的なオリジナルページを持つメリットとしては、会社概要やプライバシーポリシーなど商品を販売する EC の機能に加えて関連するコンテンツも一緒のサーバ上で公開することでサーバの維持コストと管理する手間を軽減することができる。

EC サイトを立ち上げている会社は EC サイト以外に会社用のウェブサイトも公開していることが少なくなく、それぞれサーバの利用料が発生して無駄にコストが発生しているため、それを 1 つにすることでコストダウンにつながる。

また、EC サイトを見る一般の利用者にとっても購入時の諸注意や販売・発送者がどのような人か把握しやすくなり、安心して商品を購入することができる。

EC サイトと静的コンテンツのデザインが統一化され、ドメインが同じになる点でも利用者に安心感を与えることができる。

２．EC-CUBE に静的なオリジナルページを作成する方法

EC-CUBE に静的なオリジナルページを作成する方法としては、ブラウザで静的ページアクセスしたときにどのテンプレートを利用するか指定する「コントローラー」と、実際にブラウザに表示する HTML タグが記載された「テンプレート」の 2 つを用意することで実現できる。

2-1．コントローラーの作成

まず最初にブラウザでアクセスした時の処理の中心となるコントローラーを下記の内容で作成する。
今回はコントローラーのファイル名を「SamplePageController.php」としており、.php の前は任意の文字列でよいが、ファイル名を変える際には PHP 内のクラス（class）の名称も変更する必要がある。

尚、下記の例では RedHat など Linux 系のサーバに SSH でアクセスし、ファイルを編集する vi コマンドで直接 PHP ファイルを操作している。

# vi {EC-CUBE の公開ディレクトリ}/app/Customize/Controller/SamplePageController.php
↓　i キーで編集モードにしてから下記を記入
<?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 SamplePageController
{
/**
* @Method(“GET”)
* @Route(“/sample”, name=”sample”)
* @Template(“Sample/index.twig”)
*/
public function testMethod()
{
return [‘name’ => ‘EC-CUBE’];
}
}

?>

2-2．テンプレートの作成

次にブラウザに表示される内容を HTML タグを用いてテンプレートファイルとして作成する。
今回は「/app/template/default/」に「Sample」フォルダを作成して、その中に「index.twig」ファイルを追加している。

EC-CUBE は PHP 向けのフレームワーク「Symfony」が組み込まれており、Symfony で HTML を記述するファイルが拡張子「.twig」となっている。

# vi {EC-CUBE の公開ディレクトリ}/app/template/default/Sample/index.twig
↓　i キーで編集モードにしてから下記を記入
{% extends ‘default_frame.twig’ %}

{% block main %}
<h3>SamplePage!!</h3>

<div>{{name}}</div>
{% endblock %}

2-3．キャッシュの削除

EC-CUBE は表示を高速化するため一次保存（キャッシュ）を持っており、コントローラーとテンプレートを作成したり編集してもブラウザで見ると古い内容であることがある。
そのため、下記のコマンドでサーバ内のキャッシュをクリアして最新の状態で表示するようにする。

# php {EC-CUBE の公開ディレクトリ}/bin/console cache:clear –no-warmup

もしコマンド操作できない場合は下記のディレクトリを FTP ソフトや SCP ソフトで削除するとキャッシュがクリアされる。

{EC-CUBE の公開ディレクトリ}/var/cache/prod/

2-4．ブラウザで動作確認

EC-CUBE が持つキャッシュをクリアした後は、ブラウザで作成した静的ページにアクセスしてコンテンツが表示されるかを確認する。
今回のサンプルでは下図のように表示される。

静的ページにアクセス URL は「http(s)://{ホスト名}/{EC-CUBE のディレクトリ}/sample」となり、URL の末尾のスレッシュは付けないようにする。

関連記事