EC-CUBE3機能カスタマイズ版:ヘッダー部について

この記事の関連ページ

■EC-CUBE3機能カスタマイズ版
インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。

■デモサイト
インストール後、このようなサイトが立ち上がります。

■EC-CUBE3機能カスタマイズ版の機能内容
各機能についてこのページで解説しています。

■EC-CUBE3インストールガイド

005▼テンプレートファイルの場所
■src/Eccube/Resource/template/default/Block/

 (1)ロゴ logo.twig
 テキストから画像に変更しています。
<div class="header_logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/common/logo.png" /></a></div>
 ロゴ画像の場所
■html/template/default/img/common/logo.png
 スマホでは、ロゴが中央に表示されます。

 

(2)カゴの中 cart.twig
▼ヘッダー上部のメニューは、22行目付近
<!--▼ヘッダーメニュー-->
<div id="header_menu_area">
<ul class="header_menu_link">
<li>
<a href="{{ url('help_about') }}">
<span class="cb glyphicon glyphicon-star"></span>
当サイトについて
</a>
</li>
<li>
<a href="{{ url('help_privacy') }}">
<span class="cb glyphicon glyphicon-user"></span>
プライバシーポリシー
</a>
</li>
<li>
<a href="{{ url('help_tradelaw') }}">
<span class="cb glyphicon glyphicon-list
-alt"></span>特定商取引法表記
</a>
</li>
<li>
<a href="{{ url('contact') }}">
<span class="cb glyphicon glyphicon-pencil"></span>
お問い合わせ
</a>
</li>
</ul>
</div>

(3)商品検索 search_product.twig
[HOT検索キーワード]の記述
<div class="word_search">
<span class="hot">HOT検索キーワード:</span>
{# ▼ #}
{% set name = 'ディナー' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'フォーク' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'パーコレーター' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
</div>
 商品に合わせて「ディナー」等のキーワードを変更してください。
 追加する場合は、set name = ‘    ‘にキーワードを入力してください。

(4)ログイン login.twig
グローバルメニューのカテゴリーの部分は自動で表示されます。
カテゴリをたくさん登録していくと、グローバルメニューに収まらなくなりレイアウトが崩れてしまいます。
(1)グローバルメニューの「カテゴリー」部分を非表示にするか、または、(2)「カテゴリー」部 分を手動で入力して対応します。あるいは、(3)カテゴリを一つにまとめてしまうことも可能です。

 

(1)グローバルメニューの「カテゴリー」部分を非表示にする方法
001
23行目付近、classに[sp]を追加
{% macro tree(Category) %}
<li class="category_list sp">

 

 (2)「カテゴリー」部分を手動で入力(プルダウンメニューの作り方)
 上記方法([sp]を追加)で非表示
23行目付近、classに[sp]を追加
{% macro tree(Category) %}
<li class="category_list sp">
 コードを削除する
42行目付近、61行目付近、(2箇所)
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
<ul class=”member_link category-nav”>内にリストを追加します。
▼階層なしの場合
<li>
<a href="{{ url('product_list') }}?category_id=2">インテリア</a>
</li>
▼2階層がある場合
<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
</li>
</ul>
</li>
▼3階層がある場合
<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
<ul>
<li><a href="{{ url('*****') }}">◆◆◆</a></li>
</ul>
</li>
</ul>
</li>
(3)カテゴリーを一つにまとめる
下図のようなプルダウンの方にすることが可能です。
101
2 箇所変更
102
↓【変更】
103
▼変更前
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
▼変更後
<li>
<a href="{{ url('product_list') }}"> 全商品</a>
<ul>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul>
</li>