[サンプルあり]カラーミーの共通テンプレートでグループの情報を表示（jQuery）

こんにちは、カラーミーのエディタの使いにくさに苛立ちを隠せない大学生アルバイトのカニミソです。

カラーミーでグループの二階層以下の情報を表示しようとしたところ公式で用意されているタグではうまく表示することができなかったため、javascript(jQuery)でサイト内の他のページから欲しい情報をスクレイピングすることで解決しました。

この記事ではカラーミーの持つグループの情報を表示する上での問題点とその解決策についてまとめてあります。

カラーミーショップのグループ機能とは

グループ機能は商品を分類するための機能で、カテゴリーとは違った柔軟な分類をすることができます。

カラーミーショップのグループ機能の問題点

グループ機能はカテゴリーとは違った柔軟な分類ができて良いのですが、共通テンプレートでグループの二階層以下の情報を表示できるタグが公式で用意されていません。

今回のカラーミーの制作では、グループの第二階層の項目をメニューとして一覧表示する必要があり、テンプレートタグを使わない方法での解決策を探すことになりました。

解決策

解決策はいたってシンプルです。

サブグループのページにjson形式でほしい情報を出力しておき、共通テンプレートからjavascript(jQuery)を使ってこの情報をとってきます。

ただしこの方法はアクセスしたページのほかにもう一つのページを丸々取得することになるため、サイトの規模によりページの表示が遅くなる可能性があります。

この記事を参考にされる場合はページが表示される速さを必ず確認してください。

プログラムサンプル

商品一覧のテンプレート

<!-- サブグループの情報をjson形式で描画 -->
<div id="group_data" style="display:none">
	[
		<{section name=num loop=$sub_group}>
		{
			"url":　"<{$sub_group[num].link_url}>",
			"name":　"<{$sub_group[num].name}>",
			"img":　"<{$sub_group[num].img_url}>"
		}
		<{if $smarty.section.num.last != true }>,<{/if}>
		<{/section}>	
	]
</div>

共通テンプレート

<script>
	$.ajax({
		url: '商品一覧のurl',
		cache: false,
		datatype: 'html',
		success: function(html){
			// グループページからグループ情報を取り出す
			var data = JSON.parse($(html).find('#group_data').text());

			/*
			DOM要素へのグループ情報の流し込みなど
			*/
		}
	});
</script>