【カラーミーショップ】カテゴリーやグループの商品一覧をトップページとかフリーページで取得する方法

【カラーミーショップ】カテゴリーやグループの商品一覧をトップページとかフリーページで取得する方法

Tips
2020.02.25

最近進行中の案件で、久しぶりにカラーミーショップのテンプレートのカスタマイズに携わっております。

カラーミーショップってECサイトに欲しい機能は基本的に備わっているし、基本良いサービスだと思うのですが、Web制作者的には地味に痒いところに手が届かない部分もあったりするんですよね…。

例えばトップページに商品一覧を表示する場合「おすすめ商品」「売れ筋商品」などの商品情報を取得することはできるのですが、「特定のカテゴリーやグループの商品情報一覧」を取得する独自タグは用意されていません。

独自タグ一覧（PC、スマートフォン） | カラーミーショップ　マニュアル

カテゴリーやグループに属する商品一覧は一覧ページがあるのだから一覧ページで見れば良いと言えばそこまでですが、なんらかの要望がありトップページやフリーページなどでもそれらの情報を取得なくてはならず、困っているコーダーの方もいるかもしれません。僕も困りました。

そこで色々試したりしてみたのですが、結論を言うとカラーミーAPIを使うことで実現できました。

今回は備忘録も兼ねて実装手順を書きたいと思います。

カラーミーショップ デベロッパー登録

まずは下記サイトでカラーミーショップAPIの開発アカウント登録します。

https://developer.shop-pro.jp/

アカウントの登録が完了したら、「アプリ作成」ページでアプリ名とリダイレクトURIを登録します。

公開目的ではないプライベートアプリなので名前はなんでもいいのですが、アプリ名はサイトのタイトル、リダイレクトURIはサイトトップページのURLとかにしておくと良いと思います。

アクセストークンを取得

アプリ作成後、リダイレクトURIに登録したページにリダイレクトします。

パラメーターについている認可コードをコピーしておきましょう。
なおコードの有効期限は10分なので、以後アクセストークンを取得するまでのこの手順は素早く行いましょう。

アクセストークンを取得するために、curlコマンドでリクエストを送ります。
詳しくは下記のドキュメントページに書かれています。

APIドキュメント – カラーミーショップ デベロッパー

「CLIENT_ID」= 発行されたクライアントID
「CLIENT_SECRET」= 発行されたクライアントシークレット
「CODE」= 先ほどコピーした認可コード
「REDIRECT_URI」= 登録したリダイレクトURI

リクエストに成功するとJSONが返ってくるので、「access_token」の部分の値をコピーして大事に保管しておきましょう。

カラーミーAPIで呼び出す

これで準備完了したので、APIでデータを取得（GET）できるようになりました。

どんなAPIが利用できるかなど、詳しくはドキュメントを参考にしていただければと思いますが、今回は特定のグループの一覧を取得するコードを実装していきます。

アクセストークンはセキュリティ的に公開してはいけないもののため、サーバーサイド言語（PHPなど）でAPIの呼び出しを実装します。
そのため、レンタルサーバーなど、どこか外部に環境を用意する必要があります。

（あまり詳しく調べてないのですがカラーミーテンプレート内ではSmartyのfetchが禁止されているということもあり、おそらくテンプレート内でのAPIの呼び出しは不可と思われます）

下記、APIを叩きJSONを返すためのサンプルコードです。

<?php
$request_options = array(
		'http' => array (
		'method' => 'GET',
		'header'=> "Authorization: Bearer ここにアクセストークンを入れるXXXXXXXXXXXXXXXXX",
		)
	);
$context = stream_context_create($request_options);
$url = 'https://api.shop-pro.jp/v1/products.json?group_ids=ここに特定カテゴリーやグループのIDを入れる&limit=10';
$response_body = file_get_contents($url, false, $context);
echo $response_body;

フロントを実装

フロント側はjQuery Ajaxなどの非同期通信で呼び出し、表示させます。

下記、Vue.jsとaxiosを用いてシンプルなリストを表示する場合のサンプルコードです。

<template>
<ul class="product-list">
	<li v-for="item in items" :key="item.id">
		<a :href="`?pid=`+ item.id">{{item.name}}</a>
	</li>
</ul>
</template>

<script>
import axios from 'axios';
export default {
	data() {
		return {
			items: [],
		}
	},
	mounted() {
		axios.get('https://xxxxxxx.jp/api/')
			.then((res) => {
				this.items = res.data.products;
			})
			.catch((error)=> {
				console.log(error);
			});
	},
}
</script>

まとめ

今回の自分のケースでは、局所的な小さな利用にすぎませんでしたが、APIを利用すれば色々とカスタマイズの幅が広がるなーと思いました。

むしろテンプレート機能を利用せずに、APIとカート機能だけ利用するみたいな使い方もできそうですね。

カラーミーのカスタマイズに困ってる方の参考になったならば幸いです。

それではまた。

平山 友之
記事を書いた人
平山 友之
@Tom106_
フリーランスのフロントエンドエンジニアです。山梨県在住。
最近はWebサービスの個人開発に特に興味を持っています。
記事一覧