EC-CUBE3.0のカテゴリブロックのメニューは自動的にカテゴリ一覧を取得して表示していますが、ここに独自メニューを追加することもできます。
方法は以下から。
EC-CUBe3.0でカテゴリブロックにメニューを追加する方法
カテゴリブロックのカスタマイズ
カテゴリブロックでリストを表示する部分はこんな感じ。
<nav id="category" class="drawer_block pc">
<ul class="category-nav">
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!-- category-nav -->
</nav>
カテゴリーの取得はfor文で自動的に行われています。
{% for Category ... %}
...
{% endear %}
独自メニューを追加する場合、上記の自動取得部分の前か後にリストを追加すればOK。前に追加する場合はこんな感じ。
<ul class="category-nav">
<li>
<a href="ここにURLを記入">メニュー名</a>
</li>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!-- category-nav -->
さらに子メニュー(ドロップダウンで表示する部分)も追加する場合はこんな感じ。
<ul class="category-nav">
<li>
<a href="ここにURLを記入">メニュー名</a>
<ul>
<li>
<a href="ここにURLを記入">メニュー名</a>
</li>
</ul>
</li>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!-- category-nav -->
後ろに追加する場合は{% endfor %}
の後に上記と同じように追加すればメニューをカスタマイズできます。
カテゴリブロックのスマホ時メニューのカスタマイズ
カテゴリブロックはスマホ時にサイドメニューで表示されます。
上記で追加したメニューも表示されるので再度設定する必要はありません。カテゴリメニューをスマホ時のみ表示する場合やスマホ時のみ非表示にするには、リストタグにclassを追加するだけでOK(タブレットはありません)。
- sp: スマートフォンでのみ表示
- pc: スマートフォンで非表示
<ul class="category-nav">
<li class="sp">
<a href="#">スマホのみ表示</a>
</li>
<li class="pc">
<a href="#”>PC、タブレットで表示</a>
</li>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!-- category-nav -->
これでメニューの追加は完了です。