6年ほど前に楽天の注文フォームに無茶をさせるという記事をかきました。

なんかちょいちょい利用されているようでして、、、
こんな記事でも役に立つのかっていうはなしなんで、
ちゃんと最新版をつくっておきます。

何をトチくるったかajaxでカートに入れられるようになりました

以前は、フォームを作成しなければ、
カートに入れることができなかったのですが、
現在は楽天が、ajax経由で、カートにいれることができる仕組みを用意しました。
なかなかトチ狂っています。
最近は遷移なしでカートに入れるUIが流行っているので、
そのために準備したのでしょう。

仕様

以前の方法と同じく、ショップIDと商品番号(RAC番号)を特定しておく必要があります。
詳しくは以前の記事を。

パラメータは、

{
  'shopid': ショップID(整数値),
  'units': 個数(整数値),
  'itemid': 商品番号(整数値),
  'dbasket_choice_select[]': 'オプション文字列',
  'dbasket_choice_select[]': 'オプション文字列2',//オプション文字列は複数可能
}

です。(上記はjavascriptのオブジェクトで表現しています)

これをajaxするだけです。
宛先は
http://direct.step.rakuten.co.jp/rms/mall/cartAdd/
です。

jQuery前提で、書くなら、

$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: {
      'shopid': ショップID(整数値),
      'units': 個数(整数値),
      'itemid': 商品番号(整数値),
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
})
.then(function(data){
    //ここで結果を解析
});

という感じです。

ポイントは「json」ではなく「jsonp」にするところ。まぁこれは並のフロントプログラマなら意味がわかると思うので、割愛します。

えっと。。。。なんで「GET」で動いちゃうんですかね!?楽天さん!!!
HTTPの定義では、GETはデータを取得する目的で動くメソッドのはず、、、、
何かしら、データやシステム動作に影響を与える処理の場合は「POST」にしましょうね。。
楽天さん。まぁそんなこといいだしたら、CSSの仕様とか色々アレですかね!!!

というDISはここまでにして、、、、

さて返り値は

{
   addItemMessage: true,
   cartURL: null,
   dialogTitle: "買い物かごに追加されました",
   includedPostage: false,
   includedTax: false,
   itemName: null,
   itemPageUrl: null,
   price: null,
   resultCode: "0",
   resultMessage: ""
}

こんな感じの結果がかえってきます。

なんとなく見ると分かるのですが「dialogTitle」とあるように
本来は、楽天が公式的にサイト内でダイアログを表示するために使うAPIのようです。

で!またこのjsonが何だかなな仕様でして
resultCodeが「0」だと成功です(しかもそして文字列です)
そんでエラーがあればresultMessageに値が入ります。

したがって、resultCodeとresultMessageを見れば、結果がわかります。

$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: {
      'shopid': ショップID(整数値),
      'units': 個数(整数値),
      'itemid': 商品番号(整数値),
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
  }
})
.then(function(data){
  if( data.resultCode == '0'){
    alert('OK');
  }
  else{
    alert( 'error!: ' + data.resultMessage );
  }
});

みたいな感じですかね。あ!そもそもHTTPのエラーが帰った場合の処理は上記コードには入っていませんから注意してください。

実践!!

仮に、楽天でたまたま見つけた
https://item.rakuten.co.jp/kadenshop/4111-snw-1567/?s-id=top_normal_rk_hashist_realtime
こちらのページの商品をカートに入れてみましょう。

$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: {
      'shopid': 244202,
      'units': 1,
      'itemid': 10248876,
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
  }
})
.then(function(data){
  if( data.resultCode == '0'){
    alert('OK');
  }
  else{
    alert( 'error!: ' + data.resultMessage );
  }
});

ですねー!

ショップIDと商品番号は、商品ページのカゴに入れるボタン周辺に
input type=hidden

「shop_bid」と「item_id」という名前で表示されているので、
ソースから引っ張ってこれます。

つまり他人の店でも、カートに入れる処理ができます。
まぁ何の意味もないですが。。。

で、先程の説明どおり、なんでか知らないですけど、
これGETで通っちゃうので、

http://direct.step.rakuten.co.jp/rms/mall/cartAdd/?shopid=244202&units=1&itemid=10248876&dbasket_choice_select[]=オプション文字列&dbasket_choice_select[]=オプション文字列2

このURLをブラウザ直打ちでも動作確認できます。。。おいおい(´・ω・`)

どうですか?

無茶をさせているようですが、結構使える技術です。
見積結果として複数の商品を一気にカートに入れたい場合などにかなり重宝をします。
以前の記事の頃ですと、formをsubmitするなどしなければならず
セキュリティソフトウェアがブロックするなどの問題がありそうでしたが、
これならその危険性はないです。