私は現在Zazzleでダーツボードを扱うショップsayocode Darts Shopを開いています。
Zazzleのストアページも悪くはないのですが、カスタマイズ性がないことや情報が多すぎること、商品の種別での絞り込みが面倒なこともあって自分的にはあまり理想のページではありませんでした。
なので、独自のWebカタログを作成することにしました。
完成品→sayocode Darts Shop catalog
まず、Zazzleが外部に公開している検索APIのようなものはないかと思い、「Zazzle API」で検索をしました。
そしたらヒットしたのが英語のページで、そこにはRSSフィードを使えばストアの情報を取ってこれるよ、と書いてありました。
Zazzle自体のフィード、ストアやコレクションごとのフィードが取れるみたいなのですが詳しくは上記リンクのドキュメントをご確認ください。
Webカタログの作成
RSSフィードの取得
RSSフィードが取得できれば、そのデータをPHPで加工して出力することができるので、あとは自分の好きなようにWebサイトに出力できます。
ストアのRSSフィードを取得するには、ドキュメントによると
Store specific RSS feed:
http://feed.zazzle.com/<storename>/rss
Example: http://feed.zazzle.com/strk3/rss
と書く必要があるみたいです。
ただ、この通りにstorenameを設定してしまうと、アメリカのサイトのデータを取得してしまうので、購入時に不要な税金がかかったり、取得される金額が円ではなくドルになってしまいます。
なので、
https://www.zazzle.co.jp/<storename>/rss
と書き、日本向けのフィードを取得してください。
PHPでRSSのデータを加工し出力
次に、PHPでRSSのデータを扱います。
<?php
$rss = simplexml_load_file('https://www.zazzle.co.jp/store/sayocode/rss'); // RSSからデータを取得
echo '<ul>'
foreach($rss->channel->item as $item){
$title = $item->title; // 商品名
$link = $item->link.'?rf=238522058487844682'; // 商品のリンク
$price = $item->price; // 商品の値段
$image = $item->children('media', true)->thumbnail->attributes()->url; // 商品画像のURL
$type = str_replace(' ', '', str_replace($item->children('media', true)->title, '', $title)); // 商品種別
?>
<li>
<img src="<?php echo $image; ?>" >
<a href="<?php echo $link; ?>" target="_blank">
<span class="date"><?php echo $date; ?></span>
<span class="title"><?php echo $title; ?></span>
<span class="price"><?php echo $price; ?></span>
</a>
</li>
<?php } echo '</ul>'; ?>
これでストアの商品のリストが出力されます。
$link のパラメータのrfは、アフィリエイトコードです。
別にこれが無くても問題はないのですが、あったほうがリンクから購入してくれたものの紹介料が入るのでお得だと思います。
アフィリエイトコードはZazzleにログインした状態で、何かの商品リンクを作成する際にURLに含まれているので、それをコピペで取って来ましょう。
また、商品種別を取得したかったのですが、元になるRSSにその情報が乗っていなかったため、工夫して取得することとしました。
例えば、私が製作した商品の一つ、「猫とダーツ ダーツボード」という商品ですが、この商品名のうち自分でZazzleに入力したのは「猫とダーツ」のみで後ろに付いている「ダーツボード」はZazzleのシステムが勝手につけた部分です。
RSSには商品名全体(猫とダーツ ダーツボード)と自分で入力した部分(猫とダーツ)だけのデータが両方送られてくるので、全体の商品名から自分で入力した分だけを除去すれば「ダーツボード」という商品種別を取ることができるのです。
あとはそれを絞り込み用のカスタムデータ属性に追加したり、絞り込み用のリストを作成するために配列を作成したりします。
小ワザ
データの絞りこみ、ソート
RSSを取得する際に、あるパラメータを含めることで取得するデータを絞り込むことができます。
例えば
st=popularity&sp=0
とパラメータを追加すると、これまでで最も人気な商品の順にデータが取れます。
st=popularity&sp=0 | これまでで最も人気 |
st=popularity&sp=1 | 今日で最も人気 |
st=popularity&sp=7 | 今週で最も人気 |
st=popularity&sp=30 | 今月で最も人気 |
また、取得する商品数に上限を求めたい場合
ps = <0〜100までの任意の数字>
と設定することで取得数を指定できます。
画像形式の設定
パラメータにbgを追加すると、取得してくる画像の背景色を設定できます。
6桁のRGBコードを設定するだけなので、Webやっている人にとってはとてもわかりやすいです。
ただこれは、RSSに指定しなくても画像の背景色の変更はできます。
https://rlv.zcache.jp/<画像名>.jpg?bg=F0F0F0
上記のように画像のURL自体にbgパラメータを追加すればいいだけです。
なので私が作成したカタログではサーバでランダムなRGBコードを払い出し、リロードするたびに画像の背景色が変わるカラフルなサイトにしています(ただこれは、画像のキャッシュができなくなるという大きなデメリットがあるので推奨されません)。
このように指定すれば、RSSからに限らずZazzleのどの画像でも背景色を指定して取得することができます。
英語の公式ドキュメントによると、画像のサイズが指定できるみたいなのですが、残念ながら日本版にて現時点(2019年4月)では画像のサイズの指定はできませんでした。
パラメータを指定しても同じサイズの画像が帰って来ます。
まとめ
データの取得であれば概ね必要な機能が揃っていると思いました。
(商品種別も取れるようになれば嬉しいのですが…)
あとはカートに追加のAPIとかが提供されたら欲しい機能が揃うので、Zazzleさんの対応に期待します…。
comment