EC-CUBE4：ヘッダーデザイン・グローバルメニュー・カテゴリブロック

この記事のインデックス

カスタマイズ内容

・ファイルの入れ換えにより、3パターンのヘッダーデザインから、好みのデザイン適用することができます。
・管理画面で、3パターンのグローバルニューから、好みのデザインを適用することができます。
・「カテゴリナビ（PC）」ブロックは、サイドカラムに配置することが出来ます。ヘッダーカラムに配置しても表示されません。
・管理画面で「カテゴリブロックの展開」を「有効」にすると、子カテゴリーが展開されて表示されます。
・「カテゴリナビ（PC）」ブロックと同じ機能を持つ「グローバルメニュー」は、logo.twigで読み込んでいます。
・ロゴを画像で作成して上書きして下さい。
■html/template/default/assets/img/common/logo.png

ヘッダーデザインの3パターン

カスタマイズ版のインストール時は、「No.2ヘッダーデザイン」で構築されます。

No.1 ヘッダーデザイン

No.2 ヘッダーデザイン

No.3 ヘッダーデザイン

管理画面で、グローバルニュー（3パターン）を選択

1、2、3 のいずれかを入力します。

グローバルメニューの3パターン

「カテゴリナビ（PC）」をサイドカラムに配置

管理画面で「カテゴリブロックの展開」を「有効」にすると、子カテゴリーが展開

↓

【ヘッダーデザインの変更手順】

（1）twigファイルを入れ換える。
—————————————
■src/Eccube/Resource/template/default/Block/cart.twig
■src/Eccube/Resource/template/default/Block/category_nav_pc.twig
■src/Eccube/Resource/template/default/Block/header.twig
■src/Eccube/Resource/template/default/Block/login.twig
■src/Eccube/Resource/template/default/Block/logo.twig
■src/Eccube/Resource/template/default/Block/search_product.twig
—————————————

（2）function.jsを入れ換える。
—————————————
■html/template/default/assets/js/function.js
—————————————

（3）style.cssの以下の箇所を書き換える。

■html/template/default/assets/css/style.css
/* ========== ▼No.1 ヘッダーレイアウトここから ==========*/
・
・
・
・
・
/* ========== ▲No.1 ヘッダーレイアウトここまで ==========*/

（4）コンテンツ管理＞キャッシュ削除　を行ってください。

（5）変更が反映されない場合は、ブラウザのキャッシュを削除してください。

【グローバルメニューの各カテゴリーを「全商品」として一つにまとめる方法】

（1）/Block/globalmenuA.twig

①　24行目付近を下記のように変更すると、一つにまとめることができます。

<ul class="ec-itemNav__nav">
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>

↓【変更】

<ul class="ec-itemNav__nav">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
</ul>

②　図のように配置したときの記述

<ul class="ec-itemNav__nav">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#">メニュー1</a>
<ul>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li>
<a href="#">メニュー3</a>
</li>
<li>
<a href="#">メニュー3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

（2）/Block/globalmenuB.twig

①　24行目付近を下記のように変更すると、一つにまとめることができます。

<ul class="global">
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>

↓【変更】

<ul class="global">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
</ul>

②　図のように配置したときの記述

<ul class="global">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#">メニュー1</a>
<ul>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li>
<a href="#">メニュー3</a>
</li>
<li>
<a href="#">メニュー3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

（3）/Block/globalmenuC.twig

カテゴリーは、すでに「全商品」にまとめられています。

メガメニューの下記の数に応じて、縦列に並びます。
————————————–
<div class=”item”>～</div>
————————————–
これが、３つあるので3列に並んでいます。
1つ増やすと、4列で等間隔に並びます。
5つにすると、5列で等間隔に並びます。
あるいは、
<div class=”item”>にこだわらず、
自由に記述し、CSSでレイアウトを整えることもできます。
カスタマイズご希望の方はこちら