楽天の注文フォームに無茶させるver.2.1 スマホ対応

どうもどうもおひさしぶりです。伊藤です。
全然ブログ書かねぇじゃねぇかとクライアント各位に叱られそうですが、全くそのとおりでございます。

昨年、楽天の注文フォームにむちゃさせるver2という記事を書きました。が、この記事少しだけ不具合がありました。ので、それを修正するお話。

スマホ対応

不具合の具体的な内容は、スマートフォン対応です。スマホの場合は少しだけパラメータが追加になります。

あ、その前にPCの場合の対応は、以前の記事を見てくださいね。

ちょっとだけ難しい話をきかきますが、スマホ時は、以前の方法だと、カゴにはいったと処理完了のステータスが楽天側からリターンがあるにもかかわらず、カゴにいくと中身がなくなってしまうという不具合があります。どうも楽天のスマホのカートシステムは、URIから制御を取得しているらしく、あらかじめ専用セッションにカートの追加命令が保存されていないと、URIの処理が優先されて、カートが空になるという仕様になっているようです。

AJAX送信時にパラメータ追加

結論から言えば、

$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: {
      'shopid': ショップID(整数値),
      'units': 個数(整数値),
      'itemid': 商品番号(整数値),
      'device': 'sp',//デバイスモードをスマホに
      'userid': 'itempage',//これがないとカゴにはいらないときがある？？？
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
  }
})
.then(function(data){
  if( data.resultCode == '0'){
    alert('OK');
  }
  else{
    alert( 'error!: ' + data.resultMessage );
  }
});

というパラメータになります。つまり device=sp と userid=itempage が追加になっているということです。
レスポンシブでページを作っている場合は、これをPCスマホ時で切り替える必要があります。

なんでもいいけど、カート追加がGETで行われる楽天さん。まじでイケてないんでHTTP勉強しなおしてください！！

SPとPC切り替え

User-Agentなどで判定すればOKです。といってもわからない方もいらっしゃるとおもうので、ページは重たくなりますが、判定ライブラリを使った場合の例示も書いておきます。

HTMLに自作JSファイルをの前に

<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.js"></script>

を呼び出します。ライブラリの詳細はこちらをごらんください。

JSファイルは以下のようにします。

///パラメータ
var params = {
      'shopid': ショップID(整数値),
      'units': 個数(整数値),
      'itemid': 商品番号(整数値),
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
  };

///モバイル判定
var md = new MobileDetect(window.navigator.userAgent);
if( md.mobile() != null ){
  params['params'] = 'sp';
  params['userid'] = 'itempage';
}

///ajax実行
$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: params
})
.then(function(data){
  if( data.resultCode == '0'){
    alert('OK');
  }
  else{
    alert( 'error!: ' + data.resultMessage );
  }
});

以前の記事で書いていないことがありました。カゴへ移動

処理完了時にカートへ移動したいということがあると思いますので、そちらをいれたバージョンも書いておきます。

///パラメータ
var params = {
      'shopid': ショップID(整数値),
      'units': 個数(整数値),
      'itemid': 商品番号(整数値),
      'dbasket_choice_select[]': 'オプション文字列',
      'dbasket_choice_select[]': 'オプション文字列2'
  };

///モバイル判定
var md = new MobileDetect(window.navigator.userAgent);
if( md.mobile() != null ){
  params['params'] = 'sp';
  params['userid'] = 'itempage';
}

///ajax実行
$.ajax({
  url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
  type: 'get',
  dataType: 'jsonp',
  data: params
})
.then(function(data){
  if( data.resultCode == '0'){
     location.href = 'https://ts.basket.step.rakuten.co.jp/rms/mall/bs/cartall/?shop_bid=ここにショップID';
  }
  else{
    alert( 'error!: ' + data.resultMessage );
  }
});

location.hrefを使ってショップIDを指定したカートURLにページ移動させることでカートへ遷移します。

動作参考をば

そういえばこれまえ参考動作を作っていませんでしたね。動作させてみましょう。

辛いものをカゴにいれる

↑ここをクリックするととっても辛い商品がカゴにはいるよ！！！

で何をしているかというと

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.js"></script>
<script>
$(document).ready(function(){
    var md = new MobileDetect(window.navigator.userAgent);
    
    $('.btn-send-rakuten').on(
        'click',
        function(eve){
            setProduct(0);
        }
    );
    
    var productList = [
        { 'shop_bid': '205607', 'item_id': '10002002', 'option': 'とってもからいよ！' },
        { 'shop_bid': '205607', 'item_id': '10002166', 'option': 'こっちもすごいよ' },
    ];
    
    function setProduct( current ){
        var targetProduct = productList[ current ];
        var params = {
            'shopid': targetProduct['shop_bid'],
            'units': 1,
            'itemid': targetProduct['item_id'],
            'dbasket_choice_select[]': targetProduct['option']
        };
        if( md.mobile() != null ){
          params['params'] = 'sp';
          params['userid'] = 'itempage';
        }

        $.ajax({
          url: 'http://direct.step.rakuten.co.jp/rms/mall/cartAdd/',
          type: 'get',
          dataType: 'jsonp',
          data: params
        })
        .then(function(data){
             current ++;
             if( current >= productList.length ){
               location.href = 'https://ts.basket.step.rakuten.co.jp/rms/mall/bs/cartall/?shop_bid='+productList[0]['shop_bid'];
             }
             else {
                setProduct( current );
             }
        });
    }

});
</script>
</pre>
<a href="javascript:void(0);" class="button is-danger is-fullwidth btn-send-rakuten">辛いものをカゴにいれる</a>

こんなコードです。

1. カートに入れたい商品を配列で準備
2. カートに入れたい商品をループ（ここで関数自体を回帰呼び出し）してAjaxコール
3. 全商品はいったらカートにジャンプ

です。JSの書き方としては、あえて古い書き方でわかりやすくしているので、JSプログラマ諸氏はご勘弁を。

1フォームで楽天で複数商品をカートに入れる方法は他にもありますが、動的にPC/SP共通でカートに入れられるというのは、サイトの表現上役に立つことが多いかと思います。

現場からは以上です。