リスト形式カテゴリーボックス【Zen-cartモジュール】

2007.10.17

TB:0

画像　- リスト形式カテゴリーボックス【Zen-cartモジュール】

HTML-CSSデザインに最適な、正しいリスト構造のカテゴリボックスのモジュールを作りました。

URL書き換え日本語版対応の階層化したURLを吐き出します。

会社のサイトに導入したら正常に動作していますので、リリースします。

HTML×CSSデザインに最適のリスト形式のカテゴリボックス

正しいHTMLでリストを出力

本家モジュールcss_flyout_menuを元に、正しいHTML形式でリストが出力されるようにしました。

カテゴリ＞サブカテゴリの正しい階層でリスト表示されます。

URL書き換え日本語版対応の階層化したURL

SEO対策で、URL書き換え日本語版でも、パン屑リストと同じ階層化したURLが出力されるようにしました。

※Zen-cartの重複コンテンツが作成される問題

カテゴリボックスのデザインが簡単に変えられる

全てのリストにカテゴリIDが振ってあるので、カテゴリごとに違ったアイコンにすることも可能です。

表示のサンプル

リスト形式カテゴリーボックスサンプル

導入事例：ツルカンストア

生成されるHTML

categoriescssボックスの生成サンプル

<h3>生成されるHTML</h3>
<div class="leftBox" id="categoriestree">
<h3 class="leftBoxh3" id="categoriestreeHeading">カテゴリータイトル</h3>
<ul class="level1" id="treelist">
<li id="cat_(カテゴリID)"><a href="http://">カテゴリ1</a>
<ul class="level2">
<li id="cat_(カテゴリID)"><a href="http://">カテゴリ1-1</a>
<li id="cat_(カテゴリID)"><a href="http://">カテゴリ1-2</a>
			</ul>
</li>
<li class="special"><a href="http://">特価商品 ...</a></li>
<li class="productsnew"><a href="http://">新着商品...</a></li>
<li class="featuredproject"><a href="http://">おすすめ商品...</a></li>
<li class="productsall"><a href="http://">全商品...</a></li>
</ul>
</div>