カラーミーショップで任意のカテゴリをTOPに表示する方法 - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

お久しぶりです。

今回はある案件でカラーミーショップを触ったのですが、
自由に設定できそうでなかなかできなかったのでそのTIPsを紹介します。

TOPページに任意のカテゴリの商品一覧を表示するには？

現在は普通にやろうとすると、「おすすめ」「売れ筋商品」あたりを流用する形になります。

しかし、運用レベルでは毎回登録しなければいけないため、運用の手間が増えたり
それ以上の表示をさせたい場合には諦めなければいけなかったりと少々機能が足りません。

smartyの立ち位置

カラーミーショップではSmartyというテンプレートエンジンを使用しています。

Smartyは、サーバで用意した情報をあまりプログラムを触ったことがない人でも
ある程度自分の思い通りに組み立てられるものです。（それでも多少の知識は必要ですが）

つまり、上の文章から言うと通常はサーバ側で用意された情報以外はどう頑張っても表示することはできない。ということになります。

smartyで用意されていない情報は、全く違うルートで用意するしかありません。

縛りルール

• 外部サービスは出来る限り使わない
• できるだけCSSを触れる様にする
• できるだけ自動で動作するようにする（運用の手間を増やさない）

まず最初に考えつくのはRSSになりますが、カラーミーでは商品カテゴリをRSSで出力することはないので除外します。

次にAPIですが、そもそも同じカラーミー内でそのapiを使うすべがありません。

というわけで、単純にjavascriptを使用するという方法で解決することにしました。
方法も単純で目的のページから目的の一覧を取ってくるだけです。
jQueryを使用すれば更にいろいろ触れちゃうわけですね。

で、結論。

例えば商品のカテゴリー一覧ページのマークアップが、下記のようなulタグで出力をしているとします。

<ul id="product_list_box-wrapper">
  <{section name=num loop=$productlist}>
    <li class="product_list_box">
      <a href="<{$productlist[num].link_url}>">
        <img src="<{$productlist[num].img_url}>" alt="">
        <{$productlist[num].name}>
      </a></li>
  <{/section}>
</ul>

こんなだったとします。で、商品のカテゴリー一覧ページのURLが
http://example.com/?mode=cate&cbid=9999999&csid=0

となると制作するjsの動作としては、
上記のカテゴリー一覧ページのアドレスに読み込みに行って、id「product_list_box-wrapper」のul部分を引っ張って来ればいいわけです。

jQuery(document).ready(function($){
	var get_product_amount = 3; //取得する商品数
	$.ajax({
		url: 'http://example.com/?mode=cate&cbid=9999999&csid=0', //目的のアドレス
		cache: false,
		dataType:'html',
		success: function(html){
			var list = $(html).find('#product_list_box-wrapper .product_list_box'); //各商品
			for (var i = 0; i < get_product_amount; i++) {
				$('#top_hat-list').append(list[i]); //TOPページのid「top_hat-list」の中に入れる
			}
		}
	});
});

ってな感じのjsを書いておけばTOPページに目的のカテゴリーの一覧が表示されます。