EC-CUBE サイドバーに価格別カテゴリを作る

EC-CUBE サイドバーに価格別カテゴリを作る

EC-CUBE3のデフォルトテンプレートでは、メニューはページ上に表示されます。

カテゴリーが少ないページであれば問題なくとも、例えば価格別のカテゴリを表示したいとか、カテゴリーが多いのでサイドにすっきり表示したい等の希望が出てくることがあると思います。

ノベルティのSPパレットに限らず、ECサイトでの価格別表記は不可欠なのではないでしょうか。

今回参考にしたのはこのサイト

具体的に書かれているので手順通り進めば大丈夫です。 ただ、ブロック名を独自のものにしてしまうと、途中ややこしくなる(コントローラーの設定あたりで)ので、まずはブロック名も全て記載されている通りの手順で進めます。画面トップのカテゴリをサイドに持ってくるだけならば、参考サイトの通りに作業を進めれば完成します。 が! ノベルティのSPパレットでは、「価格別カテゴリをサイドに表示したい」ので、もう一工夫。

EC-CUBEサイドバー

完成形です。 「価格別」という親カテゴリの下に価格帯の子カテゴリをぶら下げて、それぞれの価格帯を表示させる子カテゴリだけをサイドに表示させています。

ノベルティのSPパレットの場合category-navというclassだけがキチンと動けば問題ないので、 新規で作成したmainmenuブロックで{% macro tree(Category) %}以下削除、そして

<ul  class=”category-nav”>
<li>
<a href=”{{url(‘product_list’)}}?category_id=番号”>
</li>
</ul>

とリストで括ればスクリーンショットのように、価格別カテゴリだけがサイドに表示されます。各カテゴリへのリンクパスは<a href=”{{url(‘product_list’)}}?category_id=番号”>となる。(参照元⇒) EC-CUBEはリンクパスの書き方がちとメンドクサイ。

各ページへのリンクパスはこのサイトを参考に⇒【EC-cube3】制作の覚え書き

もし、カテゴリをサイドに持ってきて、ドロップダウンメニューにする場合には、こちらが参考になります。CSSの知識があれば出来るみたいですので、難易度はさほど高くないと思われます。

 

EC-CUBEカテゴリの最新記事