Skip to content

Instantly share code, notes, and snippets.

@YuzuruSano
Last active July 10, 2019 08:55
Show Gist options
  • Save YuzuruSano/a6c212e4885d89f250a7dbbc042738c8 to your computer and use it in GitHub Desktop.
Save YuzuruSano/a6c212e4885d89f250a7dbbc042738c8 to your computer and use it in GitHub Desktop.
カラーミーショップでまとめ買いっぽい機能を使う
/**
* 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);
}
});
/**
* カラーミーショップのテンプレート
*/
<div id="js-option-form"></div>
<button id="js-bundle-product">まとめて購入する</button>
<script src="productBundle.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment