EC-CUBE3 カテゴリのデザイン

EC-CUBE3のカテゴリデザイン

今回はヘッダーにあるカテゴリではなく独自で追加したサイド用のカテゴリのデザインを変更しました。
まだ思っていたデザインに変更はできていませんがそれはCSSで補えるのでおいておきます。
通常はサイドにうつすとヘッダーと同じデザインで縦並びになるだけなので、今回はアコーディオンで下に伸びるメニューをサイドカテゴリへ配置しました。
多分おなじところをCSSで編集してしまえばヘッダーのも変更されるとおもいます。多分(笑)

カテゴリのtwigファイルを見る

ブロック管理から編集したいカテゴリブロックを開きます。

{% macro tree(Category) %}
    <li>
        <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
            {{ Category.name }}
        </a>
        {% if Category.children|length > 0 %}
            <ul>
            {% for ChildCategory in Category.children %}
                    {{ _self.tree(ChildCategory) }}
            {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

<nav id="category" class="drawer_block pc">
    <ul class="category-nav pc">
    {% for Category in Categories %}
        {{ _self.tree(Category) }}
    {% endfor %}
    </ul> <!-- category-nav -->
</nav>

{% macro tree(Category) %}

<li>

</a>

{% if Category.children|length > 0 %}

<ul>

{% for ChildCategory in Category.children %}

{% endfor %}

</ul>

{% endif %}

</li>

{% endmacro %}

{% for Category in Categories %}

{% endfor %}

</ul>

</nav>

こちらはデフォルトです。
(サイドに表示させているものなので、スマホ表示の際に重複して表示されないように「pc」をつけています。
これについては前回の記事で触れています。

<nav id="category" class="drawer_block pc">
    <ul class="category-nav pc">
    {% for Category in Categories %}
        {{ _self.tree(Category) }}
    {% endfor %}
    </ul> <!-- category-nav -->
</nav>

{% for Category in Categories %}

{% endfor %}

</ul>

</nav>

この部分を変更することでリストの全体のデザインを指定できました。(語彙力…)

カテゴリナビのスタイルは「style.css」ファイルにあります。
ここへ指定したいスタイルを別で追加してclass指定を変更しました。

孫カテゴリについてはまた勉強します…。
現在のテスト段階ではオンマウスで下へ展開していますが、孫カテまで一緒に表示されています。
自分用のメモとしておいておきます…。