技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

名古屋のホームページ制作会社 花のや > 花のやブログ > カラーミーショップで任意のカテゴリをTOPに表示する方法
2016/06/17EC

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

お久しぶりです。

今回はある案件でカラーミーショップを触ったのですが、
自由に設定できそうでなかなかできなかったのでその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ページに目的のカテゴリーの一覧が表示されます。

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ