EC-CUBE3系でレイアウト管理(場所)を増やす方法

⚠️投稿日または最終更新日から5年以上経過している内容です。

EC-CUBE2系のままでは、PHP7 の恩恵を受けれないことから…、ついに EC-CUBE3系を実務で使うことにしました。

プログラムがまったくもって新しくなっているので、インストールの時点で数多くググることに...(>_<)

時間はかかりましたが、なんとかインストールしつつ、/html/ フォルダを URL から消したり、テンプレートをカスタマイズできるようになりました。

そこで「レイアウト管理」にてブロックを設置できる場所を増やせないかとソースを追って、ちょっと追加してみたところ結構簡単に実装できたので、メモしておきます！

バージョンは、EC-CUBE 3.0.15 になります。

#contents_top と #header の間に場所を設けたかったので、 #contents_over というのを作ることにしました。

まず、配置IDを追加します。 0～9はすでに使用済みなので、10を追加しました。 /src/Eccube/Entity/PageLayout.php

php

const TARGET_ID_UNUSED = 0;
const TARGET_ID_HEAD = 1;
const TARGET_ID_HEADER = 2;
const TARGET_ID_CONTENTS_TOP = 3;
const TARGET_ID_SIDE_LEFT = 4;
const TARGET_ID_MAIN_TOP = 5;
const TARGET_ID_MAIN_BOTTOM = 6;
const TARGET_ID_SIDE_RIGHT = 7;
const TARGET_ID_CONTENTS_BOTTOM = 8;
const TARGET_ID_FOOTER = 9;
const TARGET_ID_CONTENTS_OVER = 10; // ←←← 追加

次に配置IDを取得するメソッドを定義します。 /src/Eccube/Entity/PageLayout.php

php

// ↓↓↓ メソッド追加
public function getContentsOverPosition()
{
    return $this->getBlocksPositionByTargetId(self::TARGET_ID_CONTENTS_OVER);
}
public function getContentsOver()
{
    return $this->getBlocksByTargetId(self::TARGET_ID_CONTENTS_OVER);
}
// ↑↑↑ メソッド追加

次は、管理画面のHTMLを追記します。

下記ファイルの 123行目ぐらいに TARGET_ID_CONTENTS_TOP 用の HTML があるので、それを丸ごとコピペして利用します。

TARGET_ID_CONTENTS_TOP を TARGET_ID_CONTENTS_OVER へ
ContentsTopPosition を ContentsOverPosition へ

/src/Eccube/Resource/template/admin/Content/layout.twig

html

<tr>
    <td id="position_{{ constant('Eccube\\\\Entity\\\\PageLayout::TARGET_ID_CONTENTS_OVER') }}" class="ui-sortable" colspan="3">
        {% for BlockPosition in TargetPageLayout.ContentsOverPosition %}
            <div id="detail_box__layout_item--{{ BlockPosition.Block.id }}" class="sort{% if loop.first %} first{% endif %}">
                <input type="hidden" class="name" name="name_{{ loop_index }}" value="{{ BlockPosition.Block.name}}" />
                <input type="hidden" class="id" name="id_{{ loop_index }}" value="{{ BlockPosition.Block.id }}" />
                <input type="hidden" class="target-id" name="target_id_{{ loop_index }}" value="{{ BlockPosition.target_id }}" />
                <input type="hidden" class="top" name="top_{{ loop_index }}" value="{{ BlockPosition.block_row }}" />
                {{ BlockPosition.Block.name }}
                <label class="anywherecheck">
                    (<input type="checkbox" class="anywhere" name="anywhere_{{ loop_index }}" value="1" {% if BlockPosition.anywhere == 1 %} checked="checked"{% endif %} />全ページ)
                </label>
            </div>
            {% set loop_index = loop_index + 1 %}
        {% endfor %}
    </td>
</tr>

次は、管理画面の JavaScript を追記します。下記ファイルの 40行目ぐらいに、ID を配列で指定している箇所があるので、必要なIDを追記します。

/html/template/admin/assets/js/layout_design.js

javascript

$(document).ready(function(){
    var els = [
        '#position_0',
        '#position_1',
        '#position_2',
        '#position_3',
        '#position_4',
        '#position_5',
        '#position_6',
        '#position_7',
        '#position_8',
        '#position_9',
        '#position_10' // ←←← 追加
    ];
});

最後に、管理画面の Css を追記します。下記ファイルの 2899行目ぐらいに、疑似要素の content に ID名を記述している箇所があるので追記します。

/html/template/admin/assets/css/dashboard.css

css

.design-layout td#position_10:before {content: "#contents_over"} // ←←← 追加

以上です。

データベースの変更なしでこういった作業ができるようになっているので、すごく進化しているな～！と感じることができるカスタマイズでした。

ただ管理画面はちょっと見ずらいと思うので、カスタマイズをどんどんやっていきたいですね。