Last active
April 2, 2024 11:32
-
-
Save kurozumi/738b4bfa058ee4072a1213da8f5ecf10 to your computer and use it in GitHub Desktop.
お届け先情報入力フォームブロックプラグインのパスワード項目設置サンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% if app.request.get('_route') == 'user_data' %} | |
| {% if product is defined and product is not null %} | |
| {% form_theme form 'Form/form_div_layout.twig' %} | |
| <div class="ec-customerRole"> | |
| <div class="ec-pageHeader"> | |
| <h1>{{ 'front.shopping.nonmember'|trans }}</h1> | |
| </div> | |
| <div class="ec-cartRole"> | |
| <div class="ec-cartRole__progress"> | |
| <ul class="ec-progress"> | |
| {% set step = 1 %} | |
| <li class="ec-progress__item is-complete"> | |
| <div class="ec-progress__number">{{ step }}{% set step = step + 1 %} | |
| </div> | |
| <div class="ec-progress__label">{{ 'front.cart.nav__customer_info'|trans }} | |
| </div> | |
| </li> | |
| <li class="ec-progress__item"> | |
| <div class="ec-progress__number">{{ step }}{% set step = step + 1 %} | |
| </div> | |
| <div class="ec-progress__label">{{ 'front.cart.nav__order'|trans }} | |
| </div> | |
| </li> | |
| <li class="ec-progress__item"> | |
| <div class="ec-progress__number">{{ step }}{% set step = step + 1 %} | |
| </div> | |
| <div class="ec-progress__label">{{ 'front.cart.nav__confirm'|trans }} | |
| </div> | |
| </li> | |
| <li class="ec-progress__item"> | |
| <div class="ec-progress__number">{{ step }}{% set step = step + 1 %} | |
| </div> | |
| <div class="ec-progress__label">{{ 'front.cart.nav__complete'|trans }} | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| {% set productStr = app.session.flashbag.get('eccube.front.request.product') %} | |
| {% for error in app.session.flashbag.get('eccube.front.request.error') %} | |
| {% set idx = loop.index0 %} | |
| <div class="ec-cartRole__error"> | |
| <div class="ec-alert-warning"> | |
| <div class="ec-alert-warning__icon"><img src="{{ asset('assets/icon/exclamation-white.svg') }}"></div> | |
| <div class="ec-alert-warning__text"> | |
| {% if productStr[idx] is defined %} | |
| {{ error|trans({'%product%':productStr[idx]})|nl2br }} | |
| {% else %} | |
| {{ error|trans|nl2br }} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| <div class="ec-off1Grid"> | |
| <div class="ec-off1Grid__cell"> | |
| <form method="post" action="" class="h-adr" id="form1"> | |
| <span class="p-country-name" style="display:none;">Japan</span> | |
| {{ form_widget(form._token) }} | |
| <div class="ec-pageHeader"> | |
| <h2>{{ 'ご注文商品'|trans }}</h2> | |
| </div> | |
| <div class="ec-borderedDefs"> | |
| {% if product.stock_find %} | |
| <dl> | |
| <dt> | |
| <label class="ec-label required">{{ product.name }}</label> | |
| <span class="ec-required">{{ 'common.required'|trans }}</span> | |
| {# 販売価格 #} | |
| {% if product.hasProductClass -%} | |
| {% if product.getPrice02IncTaxMin == product.getPrice02IncTaxMax %} | |
| <div class="ec-price"> | |
| <span | |
| class="ec-price__price price02-default">{{ product.getPrice02IncTaxMin|price }}</span> | |
| <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> | |
| </div> | |
| {% else %} | |
| <div class="ec-price"> | |
| <span | |
| class="ec-price__price price02-default">{{ product.getPrice02IncTaxMin|price }} ～ {{ product.getPrice02IncTaxMax|price }}</span> | |
| <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> | |
| </div> | |
| {% endif %} | |
| {% else %} | |
| <div class="ec-price"> | |
| <span | |
| class="ec-price__price">{{ product.getPrice02IncTaxMin|price }}</span> | |
| <span class="ec-price__tax">{{ 'common.tax_include'|trans }}</span> | |
| </div> | |
| {% endif %} | |
| </dt> | |
| <dd> | |
| <div class="ec-productRole__actions"> | |
| {% if form.addcart.classcategory_id1 is defined %} | |
| <div class="ec-select"> | |
| {{ form_widget(form.addcart.classcategory_id1, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }} | |
| {{ form_errors(form.addcart.classcategory_id1) }} | |
| </div> | |
| {% if form.addcart.classcategory_id2 is defined %} | |
| <div class="ec-select"> | |
| {{ form_widget(form.addcart.classcategory_id2, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }} | |
| {{ form_errors(form.addcart.classcategory_id2) }} | |
| </div> | |
| {% endif %} | |
| {% endif %} | |
| <div class="ec-numberInput"><span>{{ 'common.quantity'|trans }}</span> | |
| {{ form_widget(form.addcart.quantity) }} | |
| {{ form_errors(form.addcart.quantity) }} | |
| </div> | |
| </div> | |
| </dd> | |
| </dl> | |
| {% else %} | |
| <dl> | |
| <dt> | |
| <div class="ec-productRole__btn"> | |
| <button type="button" class="ec-blockBtn--action" disabled="disabled"> | |
| {{ 'front.product.out_of_stock'|trans }} | |
| </button> | |
| </div> | |
| </dt> | |
| </dl> | |
| {% endif %} | |
| </div> | |
| {% if app.user is null %} | |
| <div class="ec-pageHeader"> | |
| <h2>{{ 'お客様情報'|trans }}</h2> | |
| </div> | |
| <div class="ec-borderedDefs"> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.name, 'common.name', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div | |
| class="ec-halfInput{{ has_errors(form.nonmember.name.name01, form.nonmember.name.name02) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.name.name01, { 'attr': { 'placeholder': 'common.last_name' }}) }} | |
| {{ form_widget(form.nonmember.name.name02, { 'attr': { 'placeholder': 'common.first_name' }}) }} | |
| {{ form_errors(form.nonmember.name.name01) }} | |
| {{ form_errors(form.nonmember.name.name02) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.kana, 'common.kana', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div | |
| class="ec-halfInput{{ has_errors(form.nonmember.kana.kana01, form.nonmember.kana.kana02) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.kana.kana01, { 'attr': { 'placeholder': 'common.last_name_kana' }}) }} | |
| {{ form_widget(form.nonmember.kana.kana02, { 'attr': { 'placeholder': 'common.first_name_kana' }}) }} | |
| {{ form_errors(form.nonmember.kana.kana01) }} | |
| {{ form_errors(form.nonmember.kana.kana02) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.company_name, 'common.company_name', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div class="ec-halfInput{{ has_errors(form.nonmember.company_name) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.company_name) }} | |
| {{ form_errors(form.nonmember.company_name) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.address, 'common.address', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div class="ec-zipInput{{ has_errors(form.nonmember.postal_code) ? ' error' }}"> | |
| <span>{{ 'common.postal_symbol'|trans }}</span> | |
| {{ form_widget(form.nonmember.postal_code) }} | |
| <div class="ec-zipInputHelp"> | |
| <div class="ec-zipInputHelp__icon"> | |
| <div class="ec-icon"><img | |
| src="{{ asset('assets/icon/question-white.svg') }}" alt=""> | |
| </div> | |
| </div> | |
| <a href="https://www.post.japanpost.jp/zipcode/" | |
| target="_blank"><span>{{ 'common.search_postal_code'|trans }}</span></a> | |
| </div> | |
| {{ form_errors(form.nonmember.postal_code) }} | |
| </div> | |
| <div class="ec-select{{ has_errors(form.nonmember.address.pref) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.address.pref) }} | |
| {{ form_errors(form.nonmember.address.pref) }} | |
| </div> | |
| <div class="ec-input{{ has_errors(form.nonmember.address.addr01) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.address.addr01, { 'attr': { 'placeholder': 'common.address_sample_01' }}) }} | |
| {{ form_errors(form.nonmember.address.addr01) }} | |
| </div> | |
| <div class="ec-input{{ has_errors(form.nonmember.address.addr02) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.address.addr02, { 'attr': { 'placeholder': 'common.address_sample_02' }}) }} | |
| {{ form_errors(form.nonmember.address.addr02) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.phone_number, 'common.phone_number', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div class="ec-telInput{{ has_errors(form.nonmember.phone_number) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.phone_number) }} | |
| {{ form_errors(form.nonmember.phone_number) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt> | |
| {{ form_label(form.nonmember.email, 'common.mail_address', { 'label_attr': { 'class': 'ec-label' }}) }} | |
| </dt> | |
| <dd> | |
| <div class="ec-input{{ has_errors(form.nonmember.email.first) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.email.first, { 'attr': { 'placeholder': 'common.mail_address_sample' }}) }} | |
| {{ form_errors(form.nonmember.email.first) }} | |
| </div> | |
| <div class="ec-input{{ has_errors(form.nonmember.email.second) ? ' error' }}"> | |
| {{ form_widget(form.nonmember.email.second, { 'attr': { 'placeholder': 'common.repeated_confirm' }}) }} | |
| {{ form_errors(form.nonmember.email.second) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| {# パスワード #} | |
| {% include '@NonMemberFormBlock4/default/password.twig' ignore missing with {'form' : form} %} | |
| </div> | |
| {% endif %} | |
| {# ログインボタン #} | |
| {% include '@NonMemberFormBlock4/default/login_button.twig' ignore missing with {'route' : app.request.attributes.get('route')} %} | |
| <div class="ec-pageHeader"> | |
| <h2>{{ 'front.shopping.delivery_info'|trans }}</h2> | |
| </div> | |
| <div class="ec-borderedDefs"> | |
| <dl> | |
| <dt>{{ '配送方法'|trans }}</dt> | |
| <dd> | |
| {% if form.addcart.ProductClass.vars.value %} | |
| <div class="ec-select{{ has_errors(form.delivery) ? ' error' }}"> | |
| {{ form_widget(form.delivery, { 'attr': { 'class': 'form-control', 'data-trigger': 'change' }}) }} | |
| {{ form_errors(form.delivery) }} | |
| </div> | |
| {% else %} | |
| <div class="ec-select"> | |
| <div>商品を選択してください。</div> | |
| </div> | |
| {% endif %} | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt>{{ 'お届け日'|trans }}</dt> | |
| <dd> | |
| <div class="ec-select{{ has_errors(form.delivery_date) ? ' error' }}"> | |
| {{ form_widget(form.delivery_date, { 'attr': { 'class': 'form-control' }}) }} | |
| {{ form_errors(form.delivery_date) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| <dl> | |
| <dt>{{ 'お届け時間'|trans }}</dt> | |
| <dd> | |
| <div class="ec-select{{ has_errors(form.delivery_time) ? ' error' }}"> | |
| {{ form_widget(form.delivery_time, { 'attr': { 'class': 'form-control' }}) }} | |
| {{ form_errors(form.delivery_time) }} | |
| </div> | |
| </dd> | |
| </dl> | |
| </div> | |
| <div class="ec-pageHeader"> | |
| <h2>{{ 'お支払い情報'|trans }}</h2> | |
| </div> | |
| <div class="ec-borderedDefs"> | |
| <dl> | |
| <dt>{{ 'お支払い方法'|trans }}</dt> | |
| <dd> | |
| {% if form.payment.vars.choices %} | |
| <div class="ec-radio{{ has_errors(form.payment) ? ' error' }}"> | |
| {% for key, child in form.payment %} | |
| <div style="display: block;"> | |
| {{ form_widget(child) }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="ec-radio"> | |
| <div>配送方法を選択してください。</div> | |
| </div> | |
| {% endif %} | |
| </dd> | |
| </dl> | |
| </div> | |
| <div class="ec-RegisterRole__actions"> | |
| <div class="ec-off4Grid"> | |
| <div class="ec-off4Grid__cell"> | |
| {# 利用規約 #} | |
| {% include '@NonMemberFormBlock4/default/user_policy_check.twig' ignore missing with {'form' : form} %} | |
| <button type="submit" name="mode" value="add-cart" | |
| class="ec-blockBtn--action add-cart">{{ 'common.next'|trans }}</button> | |
| </div> | |
| </div> | |
| </div> | |
| {{ form_rest(form.addcart) }} | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> | |
| <script> | |
| const plgNonMemberForm = (function ($) { | |
| const _self = { | |
| classCategories: {{ class_categories_as_json(product)|raw }}, | |
| price02_origin: [], | |
| setClassCategories: function ($form, product_id, $product_class_id_dynamic, $sele1, $sele2, selected_id2) { | |
| if ($sele1 && $sele1.length) { | |
| let classcat_id1 = $sele1.val() ? $sele1.val() : ''; | |
| if ($sele2 && $sele2.length) { | |
| // 規格2の選択肢をクリア | |
| $sele2.children().remove(); | |
| let classcat2 = this.classCategories[classcat_id1]; | |
| // 規格2の要素を設定 | |
| for (let key in classcat2) { | |
| if (classcat2.hasOwnProperty(key)) { | |
| let id = classcat2[key].classcategory_id2; | |
| let name = classcat2[key].name; | |
| let option = $('<option />').val(id ? id : '').text(name); | |
| if (id === selected_id2) { | |
| option.attr('selected', true); | |
| } | |
| $sele2.append(option); | |
| } | |
| } | |
| this.checkStock($form, product_id, $product_class_id_dynamic, $sele1.val() ? $sele1.val() : '__unselected2', | |
| $sele2.val() ? $sele2.val() : ''); | |
| } | |
| } | |
| }, | |
| checkStock: function ($form, product_id, $product_class_id_dynamic, classcat_id1, classcat_id2) { | |
| classcat_id2 = classcat_id2 ? classcat_id2 : ''; | |
| let classcat2; | |
| if (typeof this.classCategories[classcat_id1] !== 'undefined') { | |
| classcat2 = this.classCategories[classcat_id1]['#' + classcat_id2]; | |
| } | |
| if (typeof classcat2 === 'undefined') { | |
| // 在庫(品切れ) | |
| let $cartbtn = $form.parent().find('.add-cart').first(); | |
| if (typeof this.product_cart_origin === 'undefined') { | |
| // 初期値を保持しておく | |
| this.product_cart_origin = $cartbtn.text(); | |
| } | |
| $cartbtn.prop('disabled', false); | |
| $cartbtn.text(this.product_cart_origin); | |
| // 販売価格 | |
| let $price02 = $form.parent().find('.price02-default').first(); | |
| if (typeof this.price02_origin[product_id] === 'undefined') { | |
| // 初期値を保持しておく | |
| this.price02_origin[product_id] = $price02.text(); | |
| } | |
| $price02.text(this.price02_origin[product_id]); | |
| // 商品規格 | |
| $product_class_id_dynamic.val(''); | |
| } else { | |
| // 在庫(品切れ) | |
| let $cartbtn = $form.parent().find('.add-cart').first(); | |
| if (typeof this.product_cart_origin === 'undefined') { | |
| // 初期値を保持しておく | |
| this.product_cart_origin = $cartbtn.text(); | |
| } | |
| if (classcat2 && classcat2.stock_find === false) { | |
| $cartbtn.prop('disabled', true); | |
| $cartbtn.text('ただいま品切れ中です'); | |
| } else { | |
| $cartbtn.prop('disabled', false); | |
| $cartbtn.text(this.product_cart_origin); | |
| } | |
| // 販売価格 | |
| let $price02 = $form.parent().find('.price02-default').first(); | |
| if (typeof this.price02_origin[product_id] === 'undefined') { | |
| // 初期値を保持しておく | |
| this.price02_origin[product_id] = $price02.text(); | |
| } | |
| if (classcat2 && typeof classcat2.price02_inc_tax !== 'undefined' && String(classcat2.price02_inc_tax).length >= 1) { | |
| $price02.text('￥' + classcat2.price02_inc_tax); | |
| } else { | |
| $price02.text(this.price02_origin[product_id]); | |
| } | |
| // 商品規格 | |
| if (classcat2 && typeof classcat2.product_class_id !== 'undefined' && String(classcat2.product_class_id).length >= 1) { | |
| $product_class_id_dynamic.val(classcat2.product_class_id); | |
| } else { | |
| $product_class_id_dynamic.val(''); | |
| } | |
| } | |
| } | |
| } | |
| return _self; | |
| }(jQuery)); | |
| $(function () { | |
| // 規格2に選択肢を割り当てる。 | |
| function fnSetClassCategories(form, classcat_id2_selected) { | |
| let $form = $(form); | |
| plgNonMemberForm.setClassCategories( | |
| $form, | |
| $form.find('input[name="nonmemberform[addcart][product_id]"]').val(), | |
| $form.find('input[name="nonmemberform[addcart][ProductClass]"]'), | |
| $form.find('select[name="nonmemberform[addcart][classcategory_id1]"]'), | |
| $form.find('select[name="nonmemberform[addcart][classcategory_id2]"]'), | |
| classcat_id2_selected | |
| ); | |
| } | |
| {% if form.addcart.classcategory_id2 is defined %} | |
| fnSetClassCategories( | |
| $('#form1'), {{ form.addcart.classcategory_id2.vars.value|json_encode|raw }} | |
| ); | |
| {% elseif form.addcart.classcategory_id1 is defined %} | |
| plgNonMemberForm.checkStock( | |
| $('#form1'), | |
| {{ product.id }}, | |
| $('#form1').find('input[name="nonmemberform[addcart][ProductClass]"]'), | |
| {{ form.addcart.classcategory_id1.vars.value|json_encode|raw }}, | |
| null | |
| ); | |
| {% endif %} | |
| $('select[name="nonmemberform[addcart][classcategory_id1]"]') | |
| .change(function () { | |
| let $form = $(this).closest('form'); | |
| let product_id = $form.find('input[name="nonmemberform[addcart][product_id]"]').val(); | |
| let $product_class_id_dynamic = $form.find('input[name="nonmemberform[addcart][ProductClass]"]'); | |
| let $sele1 = $(this); | |
| let $sele2 = $form.find('select[name="nonmemberform[addcart][classcategory_id2]"]'); | |
| if (!$sele2.length) { | |
| plgNonMemberForm.checkStock( | |
| $form, | |
| product_id, | |
| $product_class_id_dynamic, | |
| $sele1.val(), | |
| null | |
| ); | |
| } else { | |
| plgNonMemberForm.setClassCategories( | |
| $form, | |
| product_id, | |
| $product_class_id_dynamic, | |
| $sele1, | |
| $sele2 | |
| ); | |
| } | |
| }); | |
| $('select[name="nonmemberform[addcart][classcategory_id2]"]') | |
| .change(function () { | |
| let $form = $(this).closest('form'); | |
| plgNonMemberForm.checkStock( | |
| $form, | |
| $form.find('input[name="nonmemberform[addcart][product_id]"]').val(), | |
| $form.find('input[name="nonmemberform[addcart][ProductClass]"]'), | |
| $form.find('select[name="nonmemberform[addcart][classcategory_id1]"]').val(), | |
| $(this).val() | |
| ); | |
| }); | |
| $('.add-cart').on('click', function (event) { | |
| // 規格1フォームの必須チェック | |
| if ($('#nonmemberform_addcart_classcategory_id1').val() == '__unselected' || $('#nonmemberform_addcart_classcategory_id1').val() == '') { | |
| $('#nonmemberform_addcart_classcategory_id1')[0].setCustomValidity('項目が選択されていません'); | |
| return true; | |
| } else { | |
| $('#nonmemberform_addcart_classcategory_id1')[0].setCustomValidity(''); | |
| } | |
| // 規格2フォームの必須チェック | |
| if ($('#nonmemberform_addcart_classcategory_id2').val() == '__unselected' || $('#nonmemberform_addcart_classcategory_id2').val() == '') { | |
| $('#nonmemberform_addcart_classcategory_id2')[0].setCustomValidity('項目が選択されていません'); | |
| return true; | |
| } else { | |
| $('#nonmemberform_addcart_classcategory_id2')[0].setCustomValidity(''); | |
| } | |
| // 個数フォームのチェック | |
| if ($('#nonmemberform_addcart_quantity').val() < 1) { | |
| $('#nonmemberform_addcart_quantity')[0].setCustomValidity('1以上で入力してください。'); | |
| return true; | |
| } else { | |
| $('#nonmemberform_addcart_quantity')[0].setCustomValidity(''); | |
| } | |
| }); | |
| // EC-CUBEの使用上、ログイン時で会員情報が自動挿入された場合は編集不可 | |
| {% if app.user is not null %} | |
| $('[name^="nonmemberform[nonmember]"]').prop("readonly", true); | |
| {% endif %} | |
| $('[data-trigger]').each(function () { | |
| $(this).on($(this).attr('data-trigger'), function () { | |
| loadingOverlay(); | |
| $('#form1').submit(); | |
| setTimeout(function () { | |
| loadingOverlay("hide"); | |
| }, 2000); | |
| }); | |
| }); | |
| $('form#form1').submit(function(){ | |
| const scroll_top = $(window).scrollTop(); //送信時の位置情報を取得 | |
| $('input[name="scroll_top"]', this).val(scroll_top); // 位置情報をセット | |
| }); | |
| }); | |
| window.onload = function(){ | |
| //ロード時に隠しフィールドから取得した値で位置をスクロール | |
| {% if app.request.get('scroll_top') %} | |
| $(window).scrollTop({{ app.request.get('scroll_top')}}); | |
| {% endif %} | |
| $('form#form1').append($('<input />').attr({'type': 'hidden', 'name': 'scroll_top'})); | |
| } | |
| </script> | |
| {% endif %} | |
| {% endif %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment