ショップサーブの親カテゴリページに子カテゴリのリンクを自動で表示させる

ショップサーブのPCページは、標準テンプレートを使用すると、サイドメニューでカテゴリにアクセスはできるんですが、カテゴリページのヘッダに子カテゴリへのリンクがないため、常にサイドメニューから階層をたどっていくことになります。

親カテゴリに子カテゴリへのナビゲーションメニューを作ってもよいのですが、子カテゴリが移動したり、カテゴリ名を変更したり、非表示にしたり、いろいろあるわけです。

その度に親カテゴリのナビゲーションメニューを編集しなければならないので、子カテゴリが自動で表示されるナビゲーションメニューをJavascriptで書いてみました。

<!-- URLパーサー。カレントのカテゴリを取得します。 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.2.1/purl.js"></script>
<script type="text/javascript">
$(function(){
    var url = $.url().segment(2);
    // alert(url);
    $("#links").load("/hpgen/HPB/shop/sitemap.html .tree00 li a[href*= "+url+" ]");
});
</script>
<div id="links"></div>

このソースコードをコピーして、親カテゴリのPC用カテゴリヘッダに入れてください。

するとあら不思議、PCページの親カテゴリを開いたときに、子カテゴリのナビゲーションが出てきます。

仕組みはこうです。

まず、JavascriptのURLパーサーを使って、表示させているカテゴリのカテゴリIDを取得します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-url-parser/2.2.1/purl.js"></script>

Javascriptのライブラリpurl.jsを使用します。CDNで読み込んでください。JQueryも使いますが、ショップサーブで読み込んでますので、読み込みの記述は不要です。

purl.jsは、URLを階層でバラバラに分けて、取り出して使うことができます。

表示させているカテゴリが第1階層の場合
https://samplesite.com/SHOP/208953/list.html
表示させているカテゴリが第2階層以降の場合
https://samplesite.com/SHOP/208953/208956/list.html

表示させているカテゴリが第1階層の場合、SHOP/以降の6桁の数字がカテゴリIDです。（赤字の部分）
表示させているカテゴリが第2階層以降の場合、第1階層のカテゴリID/以降の6桁の数字がカテゴリIDです。（青字の部分）

したがって、カテゴリ階層ごとに上記ソースコードの6行目を変更します。

// 第1階層カテゴリでナビゲーションを表示させたいとき
var url = $.url().segment(2);
// 第2階層カテゴリ以降でナビゲーションを表示させたいとき
var url = $.url().segment(3);

第1階層カテゴリでナビゲーションを表示させたいときは、「var url = $.url().segment(2);」、第2階層カテゴリ意向でナビゲーションを表示させたいときは、「var url = $.url().segment(3);」に変更してください。

カテゴリIDを取得したら、ショップサーブ店舗で自動で生成されるサイトマップページから、子カテゴリの情報を引っ張ってきて表示させます。

$("#links").load("/hpgen/HPB/shop/sitemap.html .tree00 li a[href*= "+url+" ]");

自動生成されるサイトマップは、常にカテゴリのツリー構造を最新で持っていてくれますので、サイトマップの情報を読み込んであげれば、手動でカテゴリページの子カテゴリナビゲーションを書く必要がないわけです。

あとは、表示されたナビゲーションはリスト表示になってますので、好きなようにCSSで装飾してください。

#links{
  font-size: 14px;
  margin: 5px 0 20px 0;
}
#links a:first-child{
  display: block;
  font-size: 18px;
  margin: 25px 0 10px 0;
}
#links a:first-child:after{
  content: "から探す"
}
#links a:first-child ~ a{
  color: #1049A0;
  display: inline-block;
  background: #c5d1e7;
  border: solid 1px #fff;
  text-align: center;
  padding: 5px;
  margin: 0px 6px 3px 0;
  white-space: nowrap;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

するとこんな感じになります。