EC-CUBE4のテンプレートカスタマイズについて解説。テンプレートのカスタマイズ方法とCSSスタイルの編集方法を紹介します。

EC-CUBE4のテンプレート(ページ)構造

EC-CUBE4のテンプレート構造は基本的にはEC-CUBE3と同じ。フォルダにはページごとのtwigファイルがまとめられています。

EC-CUBE4のテンプレート(ページ)構造

デフォルトテンプレートの構造
  - Block: ブロック
  - Cart: カートページ
  - Contact: お問い合わせページ
  - Entry: 会員登録ページ
  - Forgot: パスワードの再発行ページ
  - Form: フォームパーツ
  - Help: ご利用ガイドなど
  - Mail: 自動送信メールのテンプレート
  - Mypage: マイページ
  - Product: 商品一覧と詳細
  - Shopping: 決済ページ
  - block.twig: ブロックのフレーム
  - default_frame.twig: 全ページのフレーム
  - error.twig: エラーページ
  - index.twig: トップページ
  - pager.twig: ページネーション用テンプレート
  - snippet.twig: スニペットテンプレート?

テンプレートファイルの呼び出し順

テンプレートファイルは現在開いているページに対応するファイルが読み込まれますが、単に現在使用中のテンプレートから取得するだけでなく、そこになければソース側のテンプレート、さらにプラグインと順に読み込まれます。

つまり、テンプレートをカスタマイズする際は必要なテンプレートだけを追加するだけで問題なく動作するということですね。

1. ECCUBEROOT/app/template/[template_code]
2. ECCUBEROOT/src/Eccube/Resource/template/[template_code]
3. ECCUBEROOT/app/Plugin

これはWordpressの子テーマに近いイメージ。カートや決済、マイページなど重要な部分はデフォルトでそれ以外のページのみ変更する、といったことも可能です。

テンプレートで使えるデータについて

EC-CUBE4の各ページで使用できるデータはドキュメントが用意されていないため、自分でController.phpEntityを調べる必要があります。

どんなデータが取得できるかを調べるには、各ページのController.phpを開いてdump()関数を使います。例えば商品ページならこんな感じ。

// src/Eccube/Controller/ProductController.php
/**
 * 商品詳細画面.
 * // 省略
 * @param Request $request
  * @param Product $Product
  *
  * @return array
  */
public function detail(Request $request, Product $Product)
{
    // 省略

    // returnの前にdump()でデータをチェック
    dump($Product);

    return [
        'title' => $this->title,
        'subtitle' => $Product->getName(),
        'form' => $builder->getForm()->createView(),
        'Product' => $Product,
        'is_favorite' => $is_favorite,
    ];
}

商品詳細ページを開くと取得したデータの中身をチェックできます。調べ方はマイページやカートページでも同じ。データをテンプレートで使う方法はTwigの使い方をご覧ください。

EC-CUBE4 テンプレートで使えるデータ

EC-CUBE4のテンプレートカスタマイズ方法

EC-CUBE4のテンプレートカスタマイズ方法は大きく分けて次の2つ。

1.テンプレートファイルをコードエディターで直接編集する

テンプレートファイルはコードエディターで開いて編集することができます。編集したファイルはFTPツールなどを使ってapp/templates/テンプレート名にアップロードします。

アップロードした後に変更を反映するために、キャッシュクリアが必要なので忘れずやっておきましょう。

2.管理画面からページやブロックを編集する

管理画面から編集した場合は自動的にファイルが作成されます。デフォルトのページやブロックだけでなく、新規追加することも可能です。

EC-CUBE4からは管理画面のページ編集エリアがエディターっぽくなってるので、管理画面から直接編集もやりやすくなっています。

管理画面から編集した場合はキャッシュが自動的にクリアされます。

EC-CUBE4に新着商品や売り上げランキングなどのコンテンツを追加する

EC-CUBE4ではデフォルトでこれらのコンテンツが実装されていないので、自分でプログラムコードを書く必要がありました。

UICubeを使えばプログラミングやTwigの知識がなくても簡単に新着商品や売り上げランキングを追加できます。

使い方は以下のチュートリアルにまとめているので是非チェックしてみてください。

EC-CUBE4のCSSスタイルを変更する方法

CSSを変更する方法は次の4つのやり方があります。EC-CUBE4.0.2からCSS管理が追加されたのでより簡単にスタイルのカスタマイズができるようになっています。

1.ページごとのstylesheetブロックに記述

EC-CUBE4 ページごとのstylesheetブロックに記述

ページ編集画面に表示されるコードにはstylesheetブロックがあり、ここにページ(またはブロック)ごとのスタイルを記述することができます。

デフォルトをベースに少し変更を加える程度ならこの方法が一番簡単。

2.Sassを編集してビルド

アセットフォルダにある元のCSSファイルを編集することもできますが、このファイルは巨大なため直接編集するのはかなり大変。なので元のスタイルをカスタマイズするならSassを使った編集方法がおすすめです。

Sassでビルドを行うにはnode.jsのインストールが必要です。こちらのQiitaの記事が参考になるのでサクッとインストールしておきましょう。

nodeがインストールできたら、ターミナルでeccube4のルートフォルダ(eccube-4.0.0)に移動します。

cd /Applications/MAMP/htdocs/eccube-4.0.0

ルートフォルダがhtdocsなどの深い位置にある場合はターミナルにcdまで打った後、フォルダをドラッグすればOKです。移動したらインストールコマンドを打ち込みます。

npm install

npm installで必要なnodeパッケージがダウンロードされます。ダウンロードが完了したら、続けてビルドコマンドを入れます。

npm run build

するとデフォルトテンプレートに、最初はなかったstyle.min.cssが作成されます。

ECCUBE4 Sassを編集してビルド1

ところが、自分で作ったテンプレート(ここではnewTemplate)には何も変化がありません。その理由はgulpfile.jsでSassのビルド設定を行っていないためです。

eccube-4.0.0/gulpfile.jsを開いて8~11行目にあるビルド対象(初期状態ではdefaultテンプレートとadminテンプレート)の配列に新しく追加したテンプレートを入力しましょう。

// eccube-4.0.0/gulpfile.js
const srcPattern = [
    'default',
    'admin',
    'newTemplate' // 追加したテンプレート名
];

もう一度先ほどのビルドコマンドを打ち込めば今度はうまくいきます。

EC-CUBE4 Sassを編集してビルド2

ちなみに、EC-CUBE4にはスタイルガイドがあるためこちらを参考にカスタマイズしていくことができます。

3.新しくCSSファイルを作って読み込む

新しくCSSファイルを作成して読み込むこともできます。作成したファイルは、html/template/テンプレート名/assets/css/に入れておき、default_frame.twigのheadにlinkタグを挿入します。

<!-- デフォルトのスタイルシート -->
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<!-- 追加のスタイルシート -->
<link rel="stylesheet" href="{{ asset('assets/css/myTheme.css') }}">

4.管理画面からCSSを追加する

EC-CUBE4.0.2から管理画面でCSSコードを追加できるようになりました。CSSコードを貼り付けるだけなのでビルドも不要。

やり方は、コンテンツ管理->CSS管理でCSS編集ページを開き、コードを貼り付けるだけ。

EC-CUBE4 管理画面からCSSを追加する

これならSassのビルドが難しい人でも簡単にスタイルをカスタマイズできます。

まとめ

EC-CUBE4のカスタマイズはレイアウトビルダーを使ったレイアウト編集やページの追加など非常に便利な機能があるので、プログラミングの知識がなくてもある程度カスタマイズが可能です。

その反面、データの取得や表示についてはドキュメントがなく、細かいカスタマイズをしたい場合に一気に難易度が上がる感じですね。