EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示したい

ec-cube3のプラグイン

あれ、サイドに移したらサブカテゴリが見れないぞ

EC-CUBE3になって、デフォルトでは1カラムのデザインになりました。

「サイドにメニューがほしいなぁ」と、レイアウト編集から色々ブロックを移したところ、
「カテゴリのメニューが展開しなくなって、サブカテゴリが見れない!」とのこと。

EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示されない
確かにメインカテゴリのみで、サブカテゴリが表示されません。
このままでは、サブカテゴリにたどり着くのが難しい!
(検索窓や商品詳細の関連カテゴリからたどれますが、お手軽ではないですよね)

何とかサブカテゴリを表示できるようにしたい、ということで
サブカテゴリを表示させるように、少しカスタマイズしてみました。

出来るだけお手軽に対応してみよう

常に展開される状態になりますが、
見た目上も整っており、何よりも簡単に対応ができるので、今回はCSSを編集して対応してみることにしました。

CSSを使って非表示にしているため、
その箇所を削除することで、サブカテゴリが表示されるようになります。
なんと1行消すだけ!

/html/template/default/css/style.cssの1105行目あたりにある下記のコード、
最低限「display: none;」を消せば、カテゴリエリアが常に展開する状態になります。
(下記ではコメントアウトしていますが、削除でもコメントアウトでも大丈夫です)

.category-nav ul {
    /*display: none;*/
}

サブカテゴリが表示できました

EC-CUBE3 カテゴリをサイドに移動した時に、サブカテゴリを表示してみた
そのままでも、ちゃんとインデントがついて、
カテゴリの関連が分かりやすくなっていますので、
あまりにもカテゴリの数が多い、といったことでなければ必要十分です。
これでお客様の移動もスムーズに行えるようになりました。

ec-cube3のプラグイン

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?