2009年10月 6日

Yahoo!ショッピング

Yahoo!ショッピングで購入するボタンの作り方

  • このエントリーをはてなブックマークに追加

こんにちは、コンシューマ事業統括本部EC企画本部の稲葉です。


早いもので、Yahoo!ショッピングのAPIの公開を開始してから1年が経過しました。


おかげさまで公開APIの数も検索系からコンテンツ制作系を含め
9本を超え、それら機能を活用して作っていただいた、私たちの思いもつかなかったような
便利なアプリケーションや、コンテンツが次々と産まれてくる事に、
日々喜びを感じています。


 今回はデベロッパーの皆様のお持ちのコンテンツにYahoo!ショッピングの購入する
ボタンを置き、そのボタンから直接Yahoo!ショッピングのショッピングカートへ
商品を投入する方法をご案内させていただきます。


あの名作「おばあちゃんの思い出」の感動を再び!ドラえもん4巻 410円

 上の購入ボタンには、私の大好きなドラえもん4巻を直接ショッピングカートに入れるボタンです。


ボタンを押していただくと、商品がショッピングカートに入り、ショッピングカート内の元の商品ページへ戻る! 
をクリックすると、設定したページへ戻ってくることができます。

※注意 本ブログでの戻り先はすべてhttps://techblog.yahoo.co.jp/に指定しております。



 ショッピングカートへ商品を直接入れるボタンを導入する
というと、少々導入ハードルが高いようなイメージを持たれるかもしれませんが、

Yahoo!ショッピングのショッピングカートは、もともと外部パートナーと連携も視野に入れて設計されていますので、
数行のHTMLを記述するだけで、
簡単にYahoo!ショッピングで購入するボタンを導入していただけます。


上記ボタンのソースは以下
<table class="cart" cellpadding="0" cellspacing="0"><form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form">
<input name="vwitem-0-itemcode" type="hidden" value="7andy_07070185">
<input name="vwquantity-0" type="hidden" value="1">
<input name=".autodone" type="hidden" value="https://techblog.yahoo.co.jp/">
<input name="vwappid" type="hidden" value="shoppingtest">
<input name="vwlocation" type="hidden" value="external">
<input name="vwlorg" type="hidden" value="techblog.yahoo.co.jp">
<tr class="bottom3">
<td class="pt1"><input type="image" src="https://s.yimg.jp/images/store/shp/bt/bt_002.gif" alt="カートに入れる" width="142" height="36" border="0"></td>
</tr>
</form>
</table>

HTMLをご覧いただければわかるように、各パラメータに必要な値をセットしてpostする事で、
ショッピングカートに任意の商品を投入しています。



■Yahoo!ショッピングカートのパラメータ仕様
パラメータ 説明 必須 備考
vwappid アプリケーションID Yahoo!デベロッパーネットワークで取得できるID
vwlocation 利用元 現在はexternalのみ指定可能
vworg 会社名 ショッピングカートを設置するドメイン名 例techblog.yahoo.co.jp
vwitem-0-itemcode 商品コード 例 hmv_00001
vwquantity-0 購入数量  
.autodone 戻り URL × 設定がなければYahoo!ショッピングのの商品詳細ページへ遷移します

基本的にはvwitem-0-itemcodeでどの商品にするかを商品コードで指定して、
vwquantity-0で何個ショッピングカートに入れるかを指定してポストするだけなので、
個数を選択式にして見せたり、複数の商品を並べて見たり、自由に表現していただけると思います。


最近抜け毛が気になりだしたら!

吉本芸人でおなじみのあの商品ですね、常に売上ランキング上位なので最近気になってます・・。
左からスカルプDシャンプーオイリー用/スカルプDシャンプードライ用/スカルプDコンディショナーです。
カートに入れて、元のページに戻った後、別の商品をカートに入れると、ちゃんと別の商品もカートに追加されますよ。


「フットボールアワー」岩尾さんもハマったスカルプDヘアメディカル薬用スカルプD オイリー 4800円 あの「雨上がり決死隊」宮迫さんも選んだスカルプDヘアメディカル薬用スカルプD ドライ 4800円 ヘアメディカル薬用スカルプD スカルプパックコンディショナー 4800円

上記ボタンのソースは以下
<table>
<tr>
<td><a href="http://store.shopping.yahoo.co.jp/angfa/41110.html"target="_blank"><img src="http://image.shopping.yahoo.co.jp/i/e/angfa_41110"alt="「フットボールアワー」岩尾さんもハマったスカルプDヘアメディカル薬用スカルプD オイリー 4800円 " border="0" ></a></td>
<td><a href="http://store.shopping.yahoo.co.jp/angfa/41112.html"target="_blank"><img src="http://image.shopping.yahoo.co.jp/i/e/angfa_41112"alt="あの「雨上がり決死隊」宮迫さんも選んだスカルプDヘアメディカル薬用スカルプD ドライ 4800円" border="0" ></a></td>
<td><a href="http://store.shopping.yahoo.co.jp/angfa/41114.html"target="_blank"><img src="http://image.shopping.yahoo.co.jp/i/e/angfa_41114"alt="ヘアメディカル薬用スカルプD スカルプパックコンディショナー 4800円" border="0" ></a></td>
</tr>
<tr>
  <td><table class="cart" cellpadding="0" cellspacing="0" align="center"><form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form">

<input name="vwitem-0-itemcode" type="hidden" value="angfa_41110">
<input name="vwquantity-0" type="hidden" value="1">
<input name=".autodone" type="hidden" value="https://techblog.yahoo.co.jp/">
<input name="vwappid" type="hidden" value="shoppingtest">
<input name="vwlocation" type="hidden" value="external">
<input name="vwlorg" type="hidden" value="techblog.yahoo.co.jp">
<input name="vwaf-link" type="hidden" value="">
<tr class="bottom3">
<td class="pt1"><input type="image" src="https://s.yimg.jp/images/store/shp/bt/bt_002.gif" alt="カートに入れる" width="142" height="36" border="0"></td>
</tr>
</form>
</table></td>
  <td><table class="cart" cellpadding="0" cellspacing="0" align="center"><form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form">
<input name="vwitem-0-itemcode" type="hidden" value="angfa_41112">
<input name="vwquantity-0" type="hidden" value="1">
<input name=".autodone" type="hidden" value="https://techblog.yahoo.co.jp/">

<input name="vwappid" type="hidden" value="shoppingtest">
<input name="vwlocation" type="hidden" value="external">
<input name="vwlorg" type="hidden" value="techblog.yahoo.co.jp">
<input name="vwaf-link" type="hidden" value="">
<tr class="bottom3">
<td class="pt1"><input type="image" src="https://s.yimg.jp/images/store/shp/bt/bt_002.gif" alt="カートに入れる" width="142" height="36" border="0"></td>
</tr>
</form>
</table></td>
  <td><table class="cart" cellpadding="0" cellspacing="0" align="center"><form name="form2" method="post" action="https://order.shopping.yahoo.co.jp/cgi-bin/cart-form">
<input name="vwitem-0-itemcode" type="hidden" value="angfa_41114">
<input name="vwquantity-0" type="hidden" value="1">
<input name=".autodone" type="hidden" value="https://techblog.yahoo.co.jp/">
<input name="vwappid" type="hidden" value="shoppingtest">
<input name="vwlocation" type="hidden" value="external">
<input name="vwlorg" type="hidden" value="techblog.yahoo.co.jp">

<input name="vwaf-link" type="hidden" value="">
<tr class="bottom3">
<td class="pt1"><input type="image" src="https://s.yimg.jp/images/store/shp/bt/bt_002.gif" alt="カートに入れる" width="142" height="36" border="0"></td>
</tr>
</form>
</table></td>
</tr>
</table>

Yahoo!ショッピングの外部サイトからショッピングカートに入れる機能自体は、
ベータ版という位置づけで、まだまだ発展途中ですが、
今後は、サイズ指定が必要な商品も直接ショッピングカートに入れたり、
複数商品を一度にカートに入れる事ができるように、

開発者の皆様のご意見をいただきながら、改善していきたいと考えていますので、
引き続きよろしくお願いします。


それではまた次回お会いしましょう!
Yahoo!デベロッパーネットワーク - ショッピングAPI
Yahoo!デベロッパーネットワークは こちら
APIをご利用前にアプリケーションID の取得を忘れずにお願いします。
登録はこちら

Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。

  • このエントリーをはてなブックマークに追加