Q&A
Shopifyのliquidテンプレートをカスタマイズして、下記サイトのjQueryプラグイン「selmodal.js」を使ってセレクトボックスを実装しようとしています。
https://kinocolog.com/selmodal/
jQueryはテーマ自体に読み込まれているので作動はしていると思います。
しかし、プレビューしても、一瞬だけ上記サイトのようなセレクトボックスが表示されるのですが、すぐに元のセレクトボックスに戻ってしまいます。
恐らく、サイトに記載されている以下の文章が要因だと考えられるのですが、アドバイスいただけると幸いです。
下記にコードを添付いたします。
selmodal.jsの仕様 このプラグインを適用することで、指定した<select>ボックスが非表示（display:none;）になります。（なお、予め非表示でも問題ありません。） そしてその要素の真下に、 「SELECT内のリストを格納したモーダル」 と 「モーダルを表示するボタン」 を生成します。 <select>は非表示になるだけで、submit等を行う際はしっかりモーダルで選択した値が送信されます。 生成される「モーダル」と「ボタン」は、選択肢を選ぶ処理を代行して行い、非表示の<select>に代入していると考えて頂ければ大丈夫です。 また、<select>とボタンとモーダルは、<select>で設定した「name=””」属性を参照し、代入しているので、「name=””」の設定は必須です。 そして、同じ「name」が複数存在しないよう、必ず一意になるよう設定してください。
cart-attributes.liquid↓
<script src="{{ 'jquery.selmodal.js' | asset_url }}" defer></script> <script type="text/javascript"> $(function(){ $('.selmodaltest').selModal(); }); </script> {{ 'cart-attributes.scss.css' | asset_url | stylesheet_tag }} <div class="cart-attribute__field cart-attributes-delivery-datetime"> <label class="delivery-date" for="delivery-date">配送希望日</label> <select id="delivery-date" name="attributes[配送希望日]"> {% if cart.attributes["配送希望日"] == "" %} <option value="" selected>指定なし</option> {% else %} <option value="">指定なし</option> {% endif %} {% for i in (1..30) %} {% assign plus_seconds = 86400 | times:i %} {% assign option_date = "now" | date:'%s' | plus:plus_seconds | date:"%Y-%m-%d" %} {% assign option_date_string = "now" | date:'%s' | plus:plus_seconds | date:"%Y/%m/%d (%a)" %} {% if cart.attributes["配送希望日"] == option_date %} <option value='{{ option_date }}' selected>{{ option_date_string }}</option> {% else %} <option value='{{ option_date }}'>{{ option_date_string }}</option> {% endif %} {% endfor %} </select> </div> <select name="test" class="selmodaltest"> <option value="0">選択してください。</option> <option value="1">選択肢1</option> <option value="2">選択肢2</option> <option value="3">選択肢3</option> <option value="4">選択肢4</option> <option value="5">選択肢5</option> <option value="6">選択肢6</option> <option value="7">選択肢7</option> <option value="8">選択肢8</option> <option value="9">選択肢9</option> <option value="10">選択肢10</option> </select> <div class="cart-attribute__field cart-attributes-delivery-datetime"> <label>配送時間帯</label> <select id="delivery-time" name="attributes[配送時間帯]"> <option value="指定なし" {% if cart.attributes["配送時間帯"] == "指定なし" %} selected{% endif %}>指定なし</option> {% for delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %} <option value="{{ delivery_timezone }}" {% if cart.attributes["配送時間帯"] == delivery_timezone %} selected{% endif %}>{{ delivery_timezone }}</option> {% endfor %} </select> </div>
jquery.selmodal.js↓
/*--------------------------------------------------------------------------* * * selmodal.js * * MIT-style license. * * 2019 nocho * http://kinocolog.com * *--------------------------------------------------------------------------*/ (function($){ $.fn.selModal = function(){ var SEL_PARENT = $(this); SEL_PARENT.each(function(i){ var select_this = $(this); var sel_name_attr = $(this).attr('name'); var selected = $(this).prop('selectedIndex'); var selected_name; var modal_html = ''; var button_html = ''; var sel_default_text = '選択してください。'; $('[data-selmodal="' + sel_name_attr + '"]').remove(); $('[data-selmodalbtn="' + sel_name_attr + '"]').remove(); var aryChild = $(this).children(); modal_html += '<div class="selModal" data-selmodal="' + sel_name_attr + '">'; modal_html += '<div class="selModalOverlay selModalClose"></div>'; modal_html += '<div class="selModalInner">'; modal_html += '<div class="selModalHeader">'; modal_html += '<div class="selModalCloseIcon selModalClose"><span></span></div>'; modal_html += '</div>'; modal_html += '<div class="selModalList">'; modal_html += '<ul>'; for(var i = 0; i < aryChild.length; i++){ var img_div = ''; if(aryChild.eq(i).attr('data-image')){ img_div = '<img src="' + aryChild.eq(i).attr('data-image') + '">'; } if(selected != i){ modal_html += '<li class="selModalClose" data-value="' + aryChild.eq(i).attr('value') + '">' + img_div + aryChild.eq(i).text() + '</li>'; }else{ modal_html += '<li class="selected selModalClose" data-value="' + aryChild.eq(i).attr('value') + '">' + img_div + aryChild.eq(i).text() + '</li>'; selected_name = aryChild.eq(i).text(); } } modal_html += '</ul>'; modal_html += '</div>'; modal_html += '</div>'; if(selected_name === undefined){ button_html = '<button type="button" class="selModalButton" data-selmodalbtn="' + sel_name_attr + '">' + sel_default_text + '</button>'; }else{ button_html = '<button type="button" class="selModalButton" data-selmodalbtn="' + sel_name_attr + '">' + selected_name + '</button>'; } // 元のセレクトボックスは非表示 $(this).hide(); //ボタン生成 $(this).after(button_html); //モーダルウインドウ生成 $('body').append(modal_html); //ボタンクリック $('[data-selmodalbtn="' + sel_name_attr + '"]').click(function(){ href = $('[data-selmodal="' + $(this).data('selmodalbtn') + '"]'); $(href).show(); $('body').addClass('selModalBody'); var par_height = $(href).find('.selModalInner').outerHeight(); var c_head = $(href).find('.selModalHeader').outerHeight(); $(href).find('.selModalList').css('height', (par_height - c_head) + 'px'); var pos = 0; var tr = 0; $(href).find('.selModalList ul li').each(function(key, value){ if($(value).hasClass('selected')){ tr = $(value).outerHeight(true); return false; }else{ pos += $(value).outerHeight(true); } }); var sh = $(href).find('.selModalList').height(); if(sh > 0) pos -= (sh / 2); if(tr > 0) pos += (tr / 2); $(href).find('.selModalList').scrollTop(pos); }); $('[data-selmodal="' + sel_name_attr + '"]').find('.selModalList').on('touchstart', function(){ if($(this).scrollTop() == 0){ $(this).scrollTop(1); } var scrollHeight = $(this)[0].scrollHeight; var scrollPosition = $(this).scrollTop() + $(this).height(); if(scrollHeight == scrollPosition){ $(this).scrollTop(($(this).scrollTop() - 1)); } }); $('[data-selmodal="' + sel_name_attr + '"]').find('.selModalList li').on('touchstart', function(){ $(this).addClass('totch'); }); $('[data-selmodal="' + sel_name_attr + '"]').find('.selModalList li').on('touchend', function(){ $(this).closest('ul').find('li').removeClass('totch'); }); //ボタンクリック $('[data-selmodal="' + sel_name_attr + '"]').find('li').click(function(){ $(this).closest('ul').find('li').removeClass('selected'); $(this).addClass('selected'); var hoge = $(this).closest('.selModal').data('selmodal'); var this_no = $(this).closest('ul').find('li').index(this); var before_no = $('select[name="' + hoge + '"]').prop("selectedIndex"); $('select[name="' + hoge + '"]').prop("selectedIndex", this_no); $('[data-selmodalbtn="' + hoge + '"]').text($(this).text()); if(this_no != before_no){ select_this.trigger('change'); } }); $('[data-selmodal="' + sel_name_attr + '"]').find('.selModalClose').click(function(){ $(this).parents(".selModal").hide(); $('body').removeClass('selModalBody'); }); }); } $.fn.selModalSetValue = function(value){ var sel_dom = $(this); sel_dom.val(value); var sel_text = $(sel_dom).find('option:selected').text(); var name = sel_dom.attr('name'); var sel_list = $('[data-selmodal="' + name + '"]'); var sel_btn = $('[data-selmodalbtn="' + name + '"]'); sel_list.find('li').removeClass('selected'); sel_list.find('[data-value="' + value + '"]').addClass('selected'); sel_btn.text(sel_text); } })(jQuery);
cssは該当のファイルに記述しています。
また、consoleでは以下のようなエラーが出ております。
どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー
