EC-CUBE3.0 カテゴリブロックに独自メニューを追加する方法

Tweet

Pocket

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 -->

これでメニューの追加は完了です。