カラーミーショップでまとめ買いっぽい機能を使う

productBundle.js

/**
 * ajaxリクエストからiframeと入力フォームを生成し、順番にiframeの中でsubmitすることでまとめ買い「っぽい」機能を実装する
 */


/**
 * まとめ買い対象の商品IDを配列で定義
 * @type Array
 */
var products = [
	'商品ID',
	'商品ID',
	'商品ID'
];

/**
 * ajaxの結果を配列へ
 * @param  int var i count
 * @return void
 */
var jqXHRList = [];
for (var i = 0; i < products.length; i++) {
    jqXHRList.push($.ajax({ // $.ajaxの戻り値を配列に格納
        url: '{ショップURL}/?pid=' + products[i],
        type: 'GET',
        context: {
          id: products[i]
        }
    }));
}
/**
 * jqXHRListの結果を受けてiframeとオプション選択用フォームを描画
 * productsで羅列した商品順に処理
 * iframe内のdomがテストサイトと異なる場合があるので環境に合わせて要調整
 */
$.when.apply($, jqXHRList).done(function () {
	var insert_html = '';
    var results = [];
    var statuses = [];
    var jqXHRResultList = [];
    
    /**
     * ajax処理結果のソート、商品投入用iframeを挿入
     */
    for (var i = 0; i < arguments.length; i++) {
        var result = arguments[i];
        results.push(result[0]);
        statuses.push(result[1]);
        jqXHRResultList.push(result[3]);
        $('body').append('<iframe style="width:1px;height:1px;position:absolute;left:-500px;"class="js-product-frame" id="frame-'+products[i]+'" src="http://test-oikaze.shop-pro.jp/?pid=' + products[i]+ '" frameborder="0"></iframe>')
    }
    /**
     * 各商品ごとのinputを生成
     */
    var i = 0;
    while (i < results.length) {
        if(results[i]){
            var d = $('<div />').html(results[i]);
            var input = '<div class="js-loaded-product">' + d.find('.col-md-12.col-lg-12.col .ttl-h2').text() + d.find('.product_sales').text() + '<span class="js-count-down">-</span><input type="text" value="0" name="'+products[i]+'" /><span class="js-count-up">+</span>' + '</div>';
            insert_html += input;
        }
        i++;
    }

    $('#js-option-form').html(insert_html);    

    /**
     * おまけ：ボタンでの個数カウントアップ/ダウン
     */
    $('.js-loaded-product').each(function(){
        var input = $(this).find('input');
        $(this).find('.js-count-down').on('click',function(){
            var num = input.val();
            if(num != 0){
                input.val( (parseInt(num,10) - 1)) ;
            }
        });

        $(this).find('.js-count-up').on('click',function(){
            var num = input.val();
            input.val( (parseInt(num,10) + 1)) ;
        });
    });
});


/**
 * まとめ買いボタンのクリック時処理
 * setIntervalでページ遷移をチェックしつつ順番に処理
 */
$('#js-bundle-product').on('click',function(){
    var $iframes = $('.js-product-frame');
    var _iframes_length = $iframes.length;
    var x = 0;//iframeのlengthと照合してclearInterval
    var can_transition = true;//iframeのページ遷移状態でトリガーして順番に処理

    if(_iframes_length > 0){

        var input_order = setInterval(function(){
            if(x == (_iframes_length - 1) ){
                clearInterval(input_order);
                //完了後の処理、必要であれば自動ページ遷移など仕込む
                alert('まとめてカートに投入しました。');//文字化けするので調整は必要
            }

            if(can_transition){
                //iframeに対応したフォームから個数を取得してiframeフォームにも反映させる
                var id = $iframes.eq(x).attr('id').replace(/frame-/,'');
                var num = $('.js-loaded-product').find('input[name="'+id+'"]').val();

                if(num > 0){
                    can_transition = false;
                    var ifame_content = $iframes.eq(x).contents();

                    ifame_content.find('.product-init-num').val(num);//DOMによって取得対象を調整

                    var d = ifame_content.find('form[name="product_form"]').submit();//DOMによって取得対象を調整

                    //ページ遷移が確認できた段階で次の商品を投入可能とする
                    $iframes.eq(x)[0].contentWindow.onunload = function () {
                        can_transition = true;
                        x = x + 1;
                    };
                }else{//購入数0の場合はスキップ
                    x = x + 1;
                }
            }
        }, 300);
    }
});

template.html

/**
 * カラーミーショップのテンプレート
 */

<div id="js-option-form"></div>

<button id="js-bundle-product">まとめて購入する</button>

<script src="productBundle.js"></script>