EC-CUBE4.x　フロントのカスタム機能いろいろ

10758 ワード
EC-CUBE EC-CUBE4 docker-compose Git twig Git テキストリンク

概要

EC-CUBE4.xで実装できる機能の検証としてまとめ

実装したい機能

  • デザインテーマをダウンロードして、新たなテーマに変更して反映
  • プラグインを入れてフック
  • ページの新規追加 （/user_data/）
  • ページの新規追加 （/任意のページ名/）
  • SCSSの編集

実装環境

  • localhost + Git + docker-compose
  • ソース管理はGit、scssを使用

■プロジェクトディレクトリ構成
　→今回使うもののみ抜粋

[GitProject]
├─ ec-cube
　├─ app
　　└─ Customize/Controller
　　└─ template
  　　　└─ user_data
  　　　└─ [カスタムテーマ]
　├─ html
　└─ src

実装手順

1. デザインテーマをダウンロードして、新たなテーマに変更して反映

eccubeストア: デザインテンプレートで購入もできるが、今回無料のテンプレートを使う際にver2.x以前のものしかなかったため、管理画面からデフォルトテーマをコピペが確実

デフォルトテーマをダウンロードして default.tar.gz を任意のファイル名に変え、

そのままアップロードします。

・テンプレートコード：ソース上のディレクトリ名など、半角英数字
・テンプレート名：管理画面上の表示名、日本語名OK
のようです。

「登録」時に必要なテンプレートディレクトリ、ファイルが生成されます。

2. プラグインを入れてフック

eccubeストア: 機能カスタマイズから任意のプラグインを検索し、インストール。
eccube管理画面で「オーナーズストア＞プラグイン一覧」を参照して対象のプラグインを有効化します。

例）おすすめ商品管理プラグイン


「コンテンツ管理＞おすすめ管理」の項目が追加され、編集可能になる。


編集したコンテンツは「コンテンツ管理＞レイアウト管理」で未使用ブロックとして追加されるので、任意の場所にドラッグして登録が可能になります。

3. ページの新規追加 （/user_data/）

「コンテンツ管理＞ページ管理」から新規追加を選択し、項目に沿って作成します。
ここで作られたページは

eccube/app/template/user_data/sample.twig

のような形で template/user_data/ 配下にテンプレートファイルが作成されるため、以降はソースでの編集も可能になります。

またこの方法で作成されたページへのリンクは

<a href="{{ url(eccube_config.eccube_user_data_route, {"route": "[ページ名]"}) }}">

のような記述や相対パス等で実装できます。

4. ページの新規追加 （/任意のページ名/）

管理画面ベースでページを作成する際は上記で問題ないんですが、 user_data/ 配下のディレクトリしか実装ができないため、それ以外の任意ディレクトリで新規ページを作る際の方法です。

こちらを参考に、下記構造でファイルを作成しました。
※「SamplePageController.php」は任意の名前で行けると思うのですが、正常な挙動確認ができなかったため一旦そのまま適用しています。

[GitProject]
├─ ec-cube
　├─ app
　　└─ Customize/Controller/SamplePageController.php
　　└─ template
  　　　└─ user_data
  　　　└─ [カスタムテーマ]
　　　  　　　└─ Test
　　　　　  　　　└─ index.twig
　　　　　  　　　└─ index2.twig
　├─ html
　└─ src
  • Controller
eccube/app/Customize/Controller/SamplePageController.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 SamplePageController
{
    /**
     * @Method("GET")
     * @Route("/test", name="test")
     * @Template("Test/index.twig")
     */
    public function testMethod()
    {
        // とりあえずnameにEC-CUBEという文字列を入れておく
        return ['name' => 'EC-CUBE'];
    }

    /**
     * @Method("GET")
     * @Route("/test/index2", name="test/index2")
     * @Template("Test/index2.twig")
     */
    public function testMethod2()
    {
        // とりあえずnameにEC-CUBEという文字列を入れておく
        return ['name' => 'EC-CUBE 4.x'];
    }
}

新規ページ数と対になるよう、任意のfunctionを作ります。
肝になるのは @Route @Templateの部分で、
@Route：ルートパス
@Template：テーマ配下のテンプレートパス
を正しく指定しないと管理画面やプレビュー表示でエラーの原因になります。

  • Twigテンプレート
eccube/app/template/customtest/Test/index.twig
{% extends 'default_frame.twig' %}

{% block main %}

<h3>SamplePage!!</h3>

<div>{{name}}</div>

{% endblock %}
eccube/app/template/customtest/Test/index2.twig
{% extends 'default_frame.twig' %}

{% block main %}

<h3>SamplePage!!</h3>

<div>{{name}} hogehoge</div>

{% endblock %}

index.twig index2.twig の内容はほぼ変わりません。
一つ、 {{name}}の値を各functionで異なるものを入れているのですが、プレビューでその反映の違いを確認することができます。

phpmyadminの dtb_page で新規追加すると、管理画面での閲覧、編集が行えるようになりました。


5. SCSSの編集

カスタムテンプレートのディレクトリが生成された状態で、 [Gitプロジェクト]/eccubeで下記を実行すると、ファイル編集・保存時に自動でcssがビルドされるようになります。

npm run start

※初回のみ、ファイル生成のため下記を実行

npm install

例）ヘッダー部分scss
eccube/html/template/customtest/assets/scss/project/_11.2.header.scss

参考文献