前提・実現したいこと
商品ページ内に2つカゴボタンを設置しています。
どちらのカゴも、セレクトボックスで何も選択されていない状態で
カゴボタンを押した時、別ウインドウでアラートを表示させたいです。
もしくは、ページリロードされないで注意文を表示させたい。
発生している問題・エラーメッセージ
ECCUBEの商品ページのカスタマイズを行っております。
既存のカゴを複製して、2つ目を設置するところまでは出来ました。
既存のカゴの場合、セレクトボックスで何も選択せずにカゴボタンを押すと、
「カラーを選択してください」とアラートが表示されるのですが
複製したカゴボタンの場合にうまくアラートが表示されません。
■既存カゴの挙動
window.alertでアラート表示。
■複製したカゴの挙動
ページが一度リロードされてから、
別ウインドウではなくページ内に注意文が表示。
該当のソースコード
<!DOCTYPE HTML> <html lang="ja" class="LC_Page_Products_Detail"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" /> <meta name="format-detection" content="telephone=no"> <script src="/user_data/packages/sphone/js/jquery-1.7.min.js"></script> <script src="/user_data/packages/sphone/js/jquery.mobile/jquery.mobile-1.0.1.min.js"></script> <title>商品詳細ページ</title> <script type="text/javascript">//<![CDATA[ classCategories = {"__unselected":{"__unselected":{"name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044","product_class_id":"16585","product_type":"1"}},"18":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-db--","product_class_id":"16585","product_type":"1"}},"28":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-lbr--","product_class_id":"16022","product_type":"1"}},"44":{"#":{"classcategory_id2":"","name":"\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044"},"#0":{"classcategory_id2":"0","name":"","stock_find":true,"price01":"21,240","price02":"14,980","point":"0","product_code":"miy-ar-tv01-wh--","product_class_id":"13011","product_type":"1"}}};function lnOnLoad(){fnSetClassCategories(document.form1, ""); } $(function(){ lnOnLoad(); }); //]]></script> </head> <body> <script src="/js/products.js"></script> <script>//<![CDATA[ // 規格2に選択肢を割り当てる。 function fnSetClassCategories(form, classcat_id2_selected) { var $form = $(form); var product_id = $form.find('input[name=product_id]').val(); var $sele1 = $form.find('select[name=classcategory_id1]'); var $sele2 = $form.find('select[name=classcategory_id2]'); setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected); } //]]></script> <!-- ***************** 通常カゴボタン ***************** --> <form name="form1" id="form1" method="post" action="/products/detail.php"> <input type="hidden" name="transactionid" value="6d2cf4aa2aff0db30b9f3a73d9bcd5b040ab9c8c" /> <input type="hidden" name="mode" value="cart" /> <input type="hidden" name="product_id" value="3709" /> <input type="hidden" name="product_class_id" value="16585" id="product_class_id" /> <input type="hidden" name="favorite_product_id" value="" /> <div> <!--▼買い物かご--> <div class="cart_area"> <dl id="cart_color"> <!--▼規格1--> <dt>カラー</dt> <dd> <select name="classcategory_id1" style="" data-mini="true"> <optgroup label=""> <option label="選択してください" value="__unselected">選択してください</option> <option label="ダークブラウン" value="18">ダークブラウン</option> <option label="ライトブラウン" value="28">ライトブラウン</option> <option label="ホワイト" value="44">ホワイト</option> </optgroup> </select> </dd> <!--▲規格1--> </dl> <dl id="cart_quantity"> <dt>数量</dt> <dd> <input type="number" name="quantity" class="quantitybox" value="1" max="9" style="" /> </dd> </dl> </div> <div class="cartin_btn"> <!--★カートに入れる★--> <div id="cartbtn_default"> <a rel="external" href="javascript:;" id="btn-cartin" class="btn cartbtn_default">買い物カゴに入れる</a> </div> <div class="attention" id="cartbtn_dynamic"></div> </div> <!--▲買い物かご--> </div> </form> <!-- ***************** //通常カゴボタン ***************** --> <!-- ***************** フローティング化カゴボタン ***************** --> <form name="form2" id="form2" method="post" action="?"> <input type="hidden" name="transactionid" value="6d2cf4aa2aff0db30b9f3a73d9bcd5b040ab9c8c" /> <input type="hidden" name="mode" value="cart" /> <input type="hidden" name="product_id" value="3709" /> <input type="hidden" name="product_class_id" value="16585" id="product_class_id" /> <input type="hidden" name="favorite_product_id" value="" /> <input type="hidden" name="quantity" value="1" /> <div id="floatingCartWrap"> <!--▼買い物かご--> <div class="cart_area"> <dl id="cart_color"> <!--▼規格1--> <dd> <select name="classcategory_id1" style="" data-mini="true"> <optgroup label=""> <option label="選択してください" value="__unselected">選択してください</option> <option label="ダークブラウン" value="18">ダークブラウン</option> <option label="ライトブラウン" value="28">ライトブラウン</option> <option label="ホワイト" value="44">ホワイト</option> </optgroup> </select> </dd> <!--▲規格1--> </dl> </div> <div class="cartin_btn"> <!--★カートに入れる★--> <div id="cartbtn_default"> <a rel="external" href="javascript:void(document.form2.submit())" id="btn-cartin" class="btn cartbtn_default">カゴに入れる</a> </div> <div class="attention" id="cartbtn_dynamic"></div> </div> <!--▲買い物かご--> </div> </form> <!-- ***************** //フローティング化カゴボタン ***************** --> <!--通常カゴボタン 選択なし時のアラート表示--> <script> $(function(){ $('#btn-cartin').click(function(){ if ($('select[name=classcategory_id1]').val() == '__unselected') { window.alert('カラーを選択してください。'); return; } $('form#form1').submit(); }); }); </script> </body> </html>
試したこと
既存アラート部分のスクリプトを複製し、
・#form → #form2
・#btn-cartin → #btn-cartin2
・該当html部分のIDも#btn-cartin → #btn-cartin2
としましたがうまくいきませんでした。
$('#btn-cartin2').click(function(){ <!--{if $tpl_classcat_find1}--> if ($('select[name=classcategory_id1]').val() == '__unselected') { window.alert('<!--{$tpl_class_name1|h}-->を選択してください。'); return; } <!--{/if}--> <!--{if $tpl_classcat_find2}--> if ($('select[name=classcategory_id2]').val() == '__unselected') { window.alert('<!--{$tpl_class_name2|h}-->を選択してください。'); return; } <!--{/if}--> $('form#form2').submit(); });
補足情報(FW/ツールのバージョンなど)
ECCUBE 2.12.2
PHP 5.4.16
あなたの回答
tips
プレビュー