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

## 概要

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ストア: デザインテンプレート](https://www.ec-cube.net/products/list.php?category_id=7)で購入もできるが、今回無料のテンプレートを使う際にver2.x以前のものしかなかったため、管理画面からデフォルトテーマをコピペが確実
![スクリーンショット 2021-08-26 15.46.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/e7f6e23a-54ad-0a59-c0a4-47d92df34f84.png)


デフォルトテーマをダウンロードして `default.tar.gz` を任意のファイル名に変え、
![スクリーンショット 2021-08-26 15.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/c8d9fc5d-1e2c-d22f-6066-5f2064697a2b.png)
そのままアップロードします。

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

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



#### 2. プラグインを入れてフック
[eccubeストア: 機能カスタマイズ](https://www.ec-cube.net/products/list.php?category_id=8)から任意のプラグインを検索し、インストール。
eccube管理画面で「オーナーズストア＞プラグイン一覧」を参照して対象のプラグインを有効化します。

![スクリーンショット 2021-08-26 15.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/6a3ae4f8-bb22-785f-47c0-f9f39708bdc6.png)

例）[おすすめ商品管理プラグイン](https://www.ec-cube.net/products/detail.php?product_id=1757)

![スクリーンショット 2021-08-26 15.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/a1e7b677-15e9-15eb-0931-1f85ed57e694.png)
「コンテンツ管理＞おすすめ管理」の項目が追加され、編集可能になる。

![スクリーンショット 2021-08-26 15.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/870d8a65-11cd-9dc7-458c-9970b93b8a64.png)
編集したコンテンツは「コンテンツ管理＞レイアウト管理」で未使用ブロックとして追加されるので、任意の場所にドラッグして登録が可能になります。



#### 3. ページの新規追加 （/user_data/）
![スクリーンショット 2021-08-26 15.51.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/c8132981-0373-fce4-5621-e1f05c9646c1.png)


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

> eccube/app/template/user_data/sample.twig

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

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

```
<a href="{{ url(eccube_config.eccube_user_data_route, {"route": "[ページ名]"}) }}">
```
のような記述や相対パス等で実装できます。


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

- [[EC-CUBE 4]コントローラを利用するページを追加してみる](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%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/)

こちらを参考に、下記構造でファイルを作成しました。
※「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` で新規追加すると、管理画面での閲覧、編集が行えるようになりました。
![スクリーンショット 2021-08-26 15.54.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/8357c785-98f6-61f5-5940-e1ec5f861750.png)
![スクリーンショット 2021-08-26 15.54.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/c9758213-f2b9-2af3-d07c-7f8451574456.png)
![スクリーンショット 2021-08-26 15.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/432dd340-4840-a41b-3f00-7024b2c60c82.png)

#### 5. SCSSの編集

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

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

```
npm install
```

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


### 参考文献

- [eccubeストア: デザインテンプレート](https://www.ec-cube.net/products/list.php?category_id=7)
- [eccubeストア: 機能カスタマイズ](https://www.ec-cube.net/products/list.php?category_id=8)

- [[EC-CUBE 4]コントローラを利用するページを追加してみる](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%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/)
- https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=22090&forum=10