【Makeshop】カテゴリ商品一覧ページに、カテゴリバナーを表示させる方法【jQuery】

今複数のECサイト運営のコンサルティングをしています。

多くはカラーミーショップ、Makeshop等のカートASPで運営していますが、結構デフォルト機能ではできないものが多く、それを補完するTIPS紹介していきます。

ECサイトのカテゴリ商品一覧ページは、そのカテゴリを表すバナー画像を設置させたい要望がありますが、カートASPのMakeshopは、カテゴリ商品一覧ページに、そのカテゴリページのバナーを表示させる機能はありません。

そこでjQueryをもちいて、カテゴリ商品一覧ページにカテゴリバナー画像を表示させます。

画像サーバーにカテゴリバナー画像設置領域を作成

サーバーに画像ディレクトリ作成

Makeshop画像サーバーにはMakeshop推奨のgigaplusをもちいた例で説明します。他サーバーやS3などでも問題ありません。

バナー画像を設置するための、images/categoriesディレクトリを作成します。

/
|-- images
      |-- categories

バナー画像ファイル名の命名規則

categoriesディレクトリに、カテゴリ番号でバナー画像を作成します。

Makeshopのカテゴリは、「カテゴリー識別コード」が設定されます。デフォルトでは

ct番号

で設定されます。

このカテゴリー識別コードをバナー画像名に設定します。

ct番号.jpg (拡張子は運用で変更)

画像のフルパスでは下記のようになります。

https://gigaplus.makeshop.jp/SITENAME/images/category/ct1.jpg

カテゴリページにカテゴリパラメタを設置

Makeshopの下記独自タグで、カテゴリ識別コードの取得が可能です。

[CATEGORY_CODE]

こちらをページ内にctタグとして設置します

<ct id="[CATEGORY_CODE]"></ct>

バナー表示箇所を決め、下記コードを設置します。

  <div id="category_banner"></div>

jQueryで画像表示スクリプト

jQueryをもちいて、カテゴリ識別コードを取得し、バナー画像パスを作成します。

カテゴリ識別コードの取得

 var ct = $('ct').attr('id');

バナー画像パス生成

img_url = "https://gigaplus.makeshop.jp/SITENAME/images/category/" + ct + ".jpg";

画像表示

セレクタで取得した画像パスを設定します。

$('#category_banner').append('<img src="' + img_url + '">');

上のままですと画像がない場合にエラー画像が表示されてしまいます。エラーの場合はremoveする処理を追加します。

$('#category_banner').append('<img src="' + img_url + '"  onerror="this.remove()">');

すべてのコードを下記にまとめます。

<script>
  $(function () {
    var ct = $('ct').attr('id');
    var img_url = "";
    if (ct) {
        img_url = "https://gigaplus.makeshop.jp/SITENAME/images/categories/" + ct + ".jpg";
      $('#category_banner').append('<img src="' + img_url + '"  onerror="this.remove()">');
    }
  });
</script>

実際に掲載されたページです。

スマホ、PCで掲載画像がことなる場合は、デバイスごとに画像パスを切替る処理が必要になります。