初めまして。
現在自社ECを運営する中で新たに選択している商品とは別に選択肢に応じた異なる商品も同時にカート入れたいと思っています。
PCでは挙動しているのですが、iPhone・iPadなどのiOS端末では挙動せずに非常に困っています。
同時に挙動できないならuserAgentなどで分岐して処理してもいいかなと思っているのですが、そもそもiOSで意図している通りに挙動してくれないため、その方法についてご教示いただければとおもい、質問させていただきました。
いかんせんあまりJSに詳しくないため伝わりづらい内容かと思いますが何卒アドバイスいただけますようご協力のほどよろしくお願いいたします。
前提・実現したいこと
カートシステム(makeshop)にてメインの商品とは別に同時違う商品をカートインさせたい。
PC(WIN)では挙動しているため、iOSで挙動させたい
違う商品とはラッピングの種類でmakeshopの「カゴだけmakeshop」という機能を応用しています。
発生している問題・エラーメッセージ
iOSで挙動しない。
挙動内容は下記の通りになります。
WIN・・・メインの商品+サブの商品(ラッピング)どちらもカートイン
iOS・・・ラッピングしかカートインされない
→preventDefaultが効いてるため?であればPC側の挙動がおかしいということ?
該当のソースコード
HTML
1<div id="send"> 2 <input type="text" data-id="makeshop-item-quantity" value="1" class="item-detail-num"> 3 <div class="makeshop-option-wrap"> 4 <label class="makeshop-option-select-wrap"> 5 <select data-id="makeshop-item-option1" class="makeshop-option-select"> 6 <option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option> 7 <option value="1" class="makeshop-option-select-item" >BLACK</option> 8 ~ 9 </select> 10 </label> 11 </div> 12 <div class="makeshop-option-wrap"> 13 <label class="makeshop-option-select-wrap"> 14 <select data-id="makeshop-item-option2" class="makeshop-option-select"> 15 <option value="0" class="makeshop-option-select-item makeshop-option-select-title">--選択してください</option> 16 <option value="1" class="makeshop-option-select-item" >TOP【01】/BOTTOM【00】</option> 17 ~ 18 </select> 19 </label> 20 </div> 21 22 <form action="https://###.com/api/basket/add.html" method="post" id="wrappingFlg" name="wrapping" class="makeshop-option-wrap"> 23 <label class="makeshop-option-select-wrap"> 24 <select name="brand_info"> 25 <option selected value="string(0)" class="makeshop-option-select-item">ラッピング不要</option> 26 <option value="1,000000000026,1" class="makeshop-option-select-item">ラッピングA</option> 27 <option value="1,000000000025,1" class="makeshop-option-select-item">ラッピングB</option> 28 <option value="1,000000000024,1" class="makeshop-option-select-item">ラッピングC</option> 29 </select> 30 </label> 31 </form> 32 33 34 <a href="#makeshop-item-cart-entry-url:1" id="add_cart">ADD TO CART</a> 35</div>
JavaScript <script> $(document).ready(function ($) { var checkIn = document.getElementById('add_cart'); checkIn.addEventListener( 'click', wrappingFlg, { passive: false} ); function wrappingFlg(e) { e.preventDefault(); $('#wrappingFlg').submit(); return true; } }); </script>
試したこと
aタグによる遷移が正しくないと仮定して、下記の記述を使って強制的に遷移
javaScript var linkUrl = $('#add_cart').attr('href'); function action() { location.href = linkUrl; } setTimeout(action,1000);
補足情報(FW/ツールのバージョンなど)
makeshopの仕様なのかメインの商品のリンクは「#makeshop-item-cart-entry-url:1」となるようです。
またカゴだけmakeshopのほうはformタグで囲ってsubmitさせる方法となり、「https://###.com/api/basket/add.html」にPOSTさせる方法になるようです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。