一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

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

カラーミーショップで任意のカテゴリを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&amp;cbid=9999999&amp;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 &lt; get_product_amount; i++) {
				$('#top_hat-list').append(list[i]); //TOPページのid「top_hat-list」の中に入れる
			}
		}
	});
});

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

この記事を書いた人:wada

エンジニア担当の和田です。 漆を塗ったりしていましたが最終的にプログラマーへと転職してしまいました。

LINEで送る
Pocket

人気記事ランキング

お問い合わせ

Webサイト制作・その他お仕事のご依頼、
ご相談についてお気軽にお問い合わせください。

  • ホームページ制作で”補助金・助成金”使えます!
  • WEBに関する無料個別相談会
株式会社 花のや
〒460-0008
愛知県名古屋市中区栄2-14-5 山本屋本店栄ビル7階

花のやについて

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

お問い合わせ