【カラーミー】特定のカテゴリ一覧をトップページに表示する方法【Ajax】

こんにちは、石井です。

最近カラーミーショップのデザインをさせて頂くことが多いのですが、「トップページにカテゴリ一覧を表示したい」という声をよく聞きます。

しかし残念なことに、カラーミーに備わっている独自タグではカテゴリ一覧を表示することは出来ません!

そればかりか一番安いプランだと新着記事一覧すら表示できない始末…。どうにかしてほしいですよね。

そこで今日は、そんなカラーミーショップ特有の悩みを、魔法の技術「Ajax」で解決していこうと思います。

今回紹介するコードをコピペしてちょっと書き換えれば、特定のカテゴリの商品一覧や新着商品一覧を誰でも実装出来るようになるはずです。

Ajaxとは?

まず「Ajax」を知らない人もいると思うのでちょっとだけ説明。

簡単に言えば「JavaScriptを使って非同期通信する技術」のこと。非同期通信は、データの送受信を普通は直列回路的に行うのに対して並列回路的に行っちゃおうぜという技術(※イメージ)で、ブラウザの更新ボタンを押さずにページの表示内容を変えたりできます。Googleマップで使われているぐらいには有名なものです。

で、今回はそれを使って「別のページから情報を取ってくる」ということをしていきます。

Ajaxの詳細は今回のテーマから逸れるので、詳しく知りたい方は調べてみてくださーい。

ちなみに僕は最初Ajaxを「アジャックス」と呼んでました。本当は「エイジャックス」です。お恥ずかしい…///

SEOから見たAjax

あそうそう、余談なんですが、AjaxはSEO的に良くないとネット上で言われたりしています。

しかし、それはもう昔の話というのが僕の見解です。

最近はGooglebot君がかなり賢くなったようで、今回のAjaxのやり方であれば何も問題はないとGoogleの偉い人が言ってました。

気になった方は以下の記事を、どうぞ。

特定のカテゴリ一覧を任意の場所に表示するコード

まずはコードの全体を載せます。

最初に商品一覧を載せたいページです。class名などは自由に書き換えてください。

<!-- トップページ -->
<body>
<div>
<h2>カテゴリ一覧</h2>
<ul class="top-List">
<!-- ここにAjaxで抜き出した情報を埋め込む -->
</ul>
</div>
</body>

次は抜き出したい情報が表示された商品一覧ページ。こちらもclass名などはご自由に。

<!-- 商品一覧ページ -->
<body>
<div class="productlist">
<ul>
<!-- 今回は以下3つのliを抜き出します -->
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
</ul>
</div>
</body>

最後に今回の主役であるAjaxの記述。

これをカラーミーの共通テンプレートの一番下なり「集客->検索エンジン対策->
PCショップ用の設定」の欄なりにコピペしてください。トップページと商品一覧ページで指定したclass名を使いますのでコメントが付いている行の情報は書き換えをお忘れなく。

<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://<{$home_url}>/?mode=cate&csid=0&cbid=●●●●●●●●&csid=0', //お求めの順番で商品が並んでいる状態の商品一覧ページのURL
cache: false,
dataType:'html',
success: function(html){
var product_num = 3; //抜き出したい商品の数
var list = $(html).find('.productlist-Item'); // 抜き出す情報を商品一覧ページから指定
for (var i = 0; i < product_num; i++) {
if ( !list[i] ) break;
$('.top-List').append(list[i]); // 抜き出した情報を埋め込みたい場所を指定
}
}
});
});
</script>

コードの解説

今回は「商品一覧ページに表示された情報を抜き出してトップページに埋め込む」ということをしています。もう少し細かく言えば、Ajaxで商品一覧ページを読み込み、読み込んだ情報の中からproduct_numで設定した数まで指定した要素を抜き出し、指定した場所に埋め込む、という感じです。

カラーミーの機能ではトップページにカテゴリ一覧等が表示できないのは冒頭で述べた通りですが、商品一覧ページなら任意のカテゴリやグループの一覧を表示したりできますよね。

そこでAjaxを使って好きな順番に商品が並んでいる商品一覧ページから情報を抜き出し、それをトップページに埋め込んでしまえば、あたかも最初からカテゴリ一覧があったかのように表示される、というわけです。

カラーミーの商品一覧ページはgetメソッドでURLに情報を渡して表示内容を切り替えているのでAjaxでも表示されている情報を切り替えられるんですね~。

もし特定のカテゴリやグループの一覧ではなく新着商品一覧やおすすめ商品一覧を表示したい場合は、商品一覧ページのソート機能を使って新着順なら新着順、おすすめ順ならおすすめ順に商品が表示されている状態のURLを指定してください。もちろん価格順もできますよ!

参照した記事

今回は以下の記事を参考にさせて頂きました。『花のや』のwadaさん、ありがとうございます!

カラーミーショップで任意のカテゴリをTOPに表示する方法

あとがき

Ajaxを使って強引にやらないと需要があるものを表示できないカラーミーは、やっぱり使いづらく感じますね。

あと、カートの中身はAjaxでも参照できないっぽいので、カートに入っている商品のオプション情報をトップページに表示したりは出来ないようです。

やはりECサイトを作るならWooCommerceが最強なのか…

P.S.
今回の機能の導入が上手くできない人はコメント等で連絡ください。サポートしますので^^