app/template/default/Entry/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'registration_page' %}
  15. {% form_theme form 'Form/form_div_layout.twig' %}
  17. {% block stylesheet %}
  18.     <style>
  19.         .dzx-table_row_detail {
  20.             min-width: auto;
  21.             width:100%;
  22.         }
  23.         .bank_branch_list tbody {
  24.             display:block;
  25.             height:195px;
  26.             overflow-y:scroll;
  27.         }
  29.         .bank_branch_list thead, tbody tr {
  30.             display:table;
  31.             width:100%;
  32.             table-layout:fixed;
  33.         }
  35.         .bank_branch_list thead {
  36.             width: calc( 100% - 1em )
  37.         }
  38.         .bank_branch_select {
  39.             padding: 5px;
  40.             font-size: 12px;
  41.         }
  42.         .ec-select select {
  43.             width:100%;
  44.         }
  45.     </style>
  46. {% endblock stylesheet %}
  48. {% block javascript %}
  49.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  51.     <script>
  52.         var sys_AllowIsApp = true;
  53.         $(function() {
  54.             var branchList = null;
  56.             $("#entry_bank_bank_name").on("change", function(){
  57.                 var t = $(this);
  58.                 var bankid = t.val() || '0';
  59.                 branchList=null;
  61.                 $.ajax({
  62.                     type: "POST",
  63.                     url: "/bank/list/" + bankid,
  64.                     data: JSON.stringify({"id": bankid}),
  65.                     dataType : "json",
  66.                 }).done(function(data){
  67.                     var isSelected = false;
  68.                     if(data.status!="OK") return;
  70.                     var opt = $("#bank_branch_code");
  71.                     var txt = $("#entry_bank_branch_code");
  72.                     opt.find("option").remove().end();
  73.                     opt.append('<option value="">支店を選択</option>');
  75.                     $.each(data.data, function(i, dt){
  76.                         var item = $("<option></option>");
  77.                         item.prop("value", dt.id);
  78.                         item.text(dt.name);
  79.                         if( txt.val() == dt.id ){
  80.                             isSelected = true;
  81.                             item.prop("selected", true);
  82.                             $("#entry_bank_branch_code").val( dt.id );
  83.                             $("#bank_branch_id").val(dt.branchCode);
  84.                         }
  85.                         item.data("branchCode", dt.branchCode);
  86.                         opt.append(item);
  87.                     });
  89.                     branchList = data.data;
  91.                     if(!isSelected){
  92.                         $("#entry_bank_branch_code").val("");
  93.                         $("#bank_branch_id").val("");
  94.                     }
  95.                     return true;
  96.                 });
  97.             });
  99.             $("#bank_branch_code").on("change", function(){
  100.                 var opt = $(this).find(":selected");
  101.                 $("#entry_bank_branch_code").val( $(this).val() );
  102.                 $("#bank_branch_id").val(opt.data("branchCode"));
  103.             });
  104.             $("#bank_branch_id").on("keyup", function(){
  105.                 var isSelected = false;
  106.                 var opt = $("#bank_branch_code").find("option");
  107.                 $("#bank_branch_code").find("option").prop("selected", false);
  108.                 $("#entry_bank_branch_code").val("");
  110.                 $.each(opt, function(){
  111.                     var o = $(this);
  112.                     if(o.data("branchCode") == $("#bank_branch_id").val()){
  113.                         o.prop("selected", true);
  114.                         isSelected = true;
  115.                         $("#entry_bank_branch_code").val(o.val());
  116.                     }
  117.                 });
  119.                 if(!isSelected){
  120.                     if($("#bank_branch_id").val().length >= 3){
  121.                         $('#ec-modal-checkbox').prop('checked', true);
  122.                     }
  123.                 }
  124.             });
  125.             $("#entry_bank_bank_name").trigger("change");
  127.            $(".btn_bank_search").on("click", function(){
  128.                 if(branchList == null || branchList.length <= 0){
  129.                     $('#ec-modal-bank').prop('checked', true);
  130.                 }else{
  131.                     $('#ec-modal-banksearch').prop('checked', true);
  132.                     $(".bank_branch_list").hide();
  133.                 }
  134.                 return false;
  135.             });
  137.             $(".btn_bank_query").on("click", function(){
  138.                 var table = $(".bank_branch_list");
  139.                 var tbody = $("<tbody></tbody>");
  141.                 table.find("tbody").remove().end();
  143.                 $.each(branchList, function(i, dt){
  144.                     if(  dt.name.indexOf($("#branch_keyword").val()) >= 0 || dt.branchCode.indexOf($("#branch_keyword").val()) >= 0 ){
  145.                         var tr = $("<tr></tr>");
  146.                         var btn = $('<a class="ec-inlineBtn bank_branch_select" href="#">選択する</a>');
  147.                         var branchSel = $('<td style="width:70px;"></td>');
  148.                         var branchCode = $('<td style="width:120px;"></td>');
  149.                         var branchName = $("<td></td>");
  151.                         btn.data("value", dt.branchCode);
  152.                         branchCode.text(dt.branchCode);
  153.                         branchName.text(dt.name);
  155.                         branchSel.append(btn);
  156.                         tr.append(branchSel);
  157.                         tr.append(branchCode);
  158.                         tr.append(branchName);
  160.                         btn.on("click", function(){
  161.                             var $this = $(this);
  162.                             $('#bank_branch_id').val(btn.data("value"));
  163.                             $('#bank_branch_id').trigger("keyup");
  164.                             $('#ec-modal-banksearch').prop('checked', false);
  165.                             return false;
  166.                         });
  168.                         tbody.append(tr);
  169.                     }
  170.                 });
  172.                 if(tbody.find("tr").length==0){
  173.                     var tr = $('<tr><td colspan=3>支店が見つかりません</td></tr>');
  174.                     tbody.append(tr);
  175.                 }
  177.                 table.append(tbody);
  179.                 $(".bank_branch_list").show();
  180.                 return false;
  181.             });
  182.         });
  184.     </script>
  185. {% endblock javascript %}
  187. {% block main %}
  188.     <div class="ec-registerRole">
  189.         <div class="ec-pageHeader">
  190.             <h1>{{ '新規会員登録'|trans }}</h1>
  191.         </div>
  192.         <div class="ec-off1Grid">
  193.             <div class="ec-off1Grid__cell">
  194.                 <form method="post" action="{{ url('entry') }}" novalidate class="h-adr">
  195.                     <span class="p-country-name" style="display:none;">Japan</span>
  196.                     {{ form_widget(form._token) }}
  197.                     <div class="ec-borderedDefs">
  198.                         <dl>
  199.                             <dt>
  200.                                 {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  201.                             </dt>
  202.                             <dd>
  203.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
  204.                                     {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
  205.                                     {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
  206.                                     {{ form_errors(form.name.name01) }}
  207.                                     {{ form_errors(form.name.name02) }}
  208.                                 </div>
  209.                             </dd>
  210.                         </dl>
  211.                         <dl>
  212.                             <dt>
  213.                                 {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
  214.                             </dt>
  215.                             <dd>
  216.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  217.                                     {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
  218.                                     {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
  219.                                     {{ form_errors(form.kana.kana01) }}
  220.                                     {{ form_errors(form.kana.kana02) }}
  221.                                 </div>
  222.                             </dd>
  223.                         </dl>
  224.                         <dl>
  225.                             <dt>
  226.                                 {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
  227.                             </dt>
  228.                             <dd>
  229.                                 <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
  230.                                     {{ form_widget(form.company_name) }}
  231.                                     {{ form_errors(form.company_name) }}
  232.                                 </div>
  233.                             </dd>
  234.                         </dl>
  235.                         <dl>
  236.                             <dt>
  237.                                 {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  238.                             </dt>
  239.                             <dd>
  240.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}"><span>{{ '〒'|trans }}</span>
  241.                                     {{ form_widget(form.postal_code) }}
  242.                                     <div class="ec-zipInputHelp">
  243.                                         <div class="ec-zipInputHelp__icon">
  244.                                             <div class="ec-icon"><img
  245.                                                         src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  246.                                             </div>
  247.                                         </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  248.                                     </div>
  249.                                     {{ form_errors(form.postal_code) }}
  250.                                 </div>
  252.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  253.                                     {{ form_widget(form.address.pref) }}
  254.                                     {{ form_errors(form.address.pref) }}
  255.                                 </div>
  256.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  257.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名(例：大阪市北区)' }}) }}
  258.                                     {{ form_errors(form.address.addr01) }}
  259.                                 </div>
  260.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  261.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名(例：西梅田1丁目6-8)' }}) }}
  262.                                     {{ form_errors(form.address.addr02) }}
  263.                                 </div>
  264.                             </dd>
  265.                         </dl>
  266.                         <dl>
  267.                             <dt>
  268.                                 {{ form_label(form.phone_number, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  269.                             </dt>
  270.                             <dd>
  271.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  272.                                     {{ form_widget(form.phone_number) }}
  273.                                     {{ form_errors(form.phone_number) }}
  274.                                 </div>
  275.                             </dd>
  276.                         </dl>
  277.                         <dl>
  278.                             <dt>
  279.                                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  280.                             </dt>
  281.                             <dd>
  282.                                 <div class="ec-input{{ has_errors(form.email.first) ? ' error' }}">
  283.                                     {{ form_widget(form.email.first, { 'attr': { 'placeholder': '例：ec-cube@example.com' }}) }}
  284.                                     {{ form_errors(form.email.first) }}
  285.                                 </div>
  286.                                 <div class="ec-input{{ has_errors(form.email.second) ? ' error' }}">
  287.                                     {{ form_widget(form.email.second, { 'attr': { 'placeholder': '確認のためもう一度入力してください' }}) }}
  288.                                     {{ form_errors(form.email.second) }}
  289.                                 </div>
  290.                             </dd>
  291.                         </dl>
  292.                         <dl>
  293.                             <dt>
  294.                                 {{ form_label(form.plain_password, 'パスワード', { 'label_attr': {'class': 'ec-label' }}) }}
  295.                             </dt>
  296.                             <dd>
  297.                                 <div class="ec-input{{ has_errors(form.plain_password.first) ? ' error' }}">
  298.                                     {{ form_widget(form.plain_password.first, {
  299.                                         'attr': { 'placeholder': '半角英数記号%min%〜%max%文字'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }) },
  300.                                         'type': 'password'
  301.                                     }) }}
  302.                                     {{ form_errors(form.plain_password.first) }}
  303.                                 </div>
  304.                                 <div class="ec-input{{ has_errors(form.plain_password.second) ? ' error' }}">
  305.                                     {{ form_widget(form.plain_password.second, {
  306.                                         'attr': { 'placeholder': '確認のためもう一度入力してください'|trans },
  307.                                         'type': 'password'
  308.                                     }) }}
  309.                                     {{ form_errors(form.plain_password.second) }}
  310.                                 </div>
  311.                             </dd>
  312.                         </dl>
  313.                         <dl>
  314.                             <dt>
  315.                                 {{ form_label(form.birth, '生年月日', { 'label_attr': {'class': 'ec-label' }}) }}
  316.                             </dt>
  317.                             <dd>
  318.                                 <div class="ec-birth{{ has_errors(form.birth) ? ' error' }}">
  319.                                     {{ form_widget(form.birth.year) }}<span>/</span>
  320.                                     {{ form_widget(form.birth.month) }}<span>/</span>
  321.                                     {{ form_widget(form.birth.day) }}
  322.                                     {{ form_errors(form.birth) }}
  323.                                 </div>
  324.                             </dd>
  325.                         </dl>
  326.                         <dl>
  327.                             <dt>
  328.                                 {{ form_label(form.sex, '性別', { 'label_attr': { 'class': 'ec-label' }}) }}
  329.                             </dt>
  330.                             <dd>
  331.                                 <div class="ec-radio{{ has_errors(form.sex) ? ' error' }}">
  332.                                     {{ form_widget(form.sex) }}
  333.                                     {{ form_errors(form.sex) }}
  334.                                 </div>
  335.                             </dd>
  336.                         </dl>
  337.                         <dl>
  338.                             <dt>
  339.                                 {{ form_label(form.job, '職業', { 'label_attr': {'class': 'ec-label' }}) }}
  340.                             </dt>
  341.                             <dd>
  342.                                 <div class="ec-select{{ has_errors(form.job) ? ' error' }}">
  343.                                     {{ form_widget(form.job) }}
  344.                                     {{ form_errors(form.job) }}
  345.                                 </div>
  346.                             </dd>
  347.                         </dl>
  348.                         <dl>
  349.                             <dt>
  350.                                 {{ form_label(form.bank.bank_name, '金融機関名', { 'label_attr': {'class': 'ec-label' }}) }}
  351.                             </dt>
  352.                             <dd>
  353.                                 <div class="ec-select{{ has_errors(form.bank.bank_name) ? ' error' }}">
  354.                                     {{ form_widget(form.bank.bank_name) }}
  355.                                     {{ form_errors(form.bank.bank_name) }}
  356.                                 </div>
  357.                             </dd>
  358.                         </dl>
  359.                         <dl>
  360.                             <dt>
  361.                                 {{ form_label(form.bank_branch_code, '支店名', { 'label_attr': {'class': 'ec-label' }}) }}
  362.                             </dt>
  363.                             <dd>
  364.                                 <div class="ec-halfInput">
  365.                                     <input type="text" id="bank_branch_id" maxlength=3 class="form-control" placeholder="支店番号">
  366.                                     <button class="ec-headerSearch__keywordBtn btn_bank_search" type="submit" style="width:36px;height:36px;">
  367.                                         <div class="ec-icon">
  368.                                             <img src="/html/template/dzx02/assets/icon/search-dark.svg" alt="">
  369.                                         </div>
  370.                                     </button>
  371.                                 </div>
  372.                                 
  373.                                 <div class="ec-select{{ has_errors(form.bank_branch_code) ? ' error' }}">
  374.                                     <select id="bank_branch_code" name="bank_branch_code" class="p-bank-name form-control" placeholder="支店名">
  375.                                     </select>
  377.                                     {{ form_widget(form.bank_branch_code, { 'attr': { 'style': 'display:none;' }}) }}
  378.                                     {{ form_errors(form.bank_branch_code) }}
  379.                                 </div>
  380.                             </dd>
  381.                         </dl>
  382.                         <dl>
  383.                             <dt>
  384.                                 {{ form_label(form.bank_account, '口座番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  385.                             </dt>
  386.                             <dd>
  387.                                 <div class="ec-halfInput{{ has_errors(form.bank_account) ? ' error' }}">
  388.                                     {{ form_widget(form.bank_account, { 'attr': { 'placeholder': '口座番号(例：0000000)' }}) }}
  389.                                     {{ form_errors(form.bank_account) }}
  390.                                 </div>
  391.                             </dd>
  392.                         </dl>
  393.                         <dl>
  394.                             <dt>
  395.                                 {{ form_label(form.bank_holder, '口座名義', { 'label_attr': { 'class': 'ec-label' }}) }}
  396.                             </dt>
  397.                             <dd>
  398.                                 <div class="ec-halfInput{{ has_errors(form.bank_holder) ? ' error' }}">
  399.                                     {{ form_widget(form.bank_holder, { 'attr': { 'placeholder': '口座名義(例：トウキョウフジダイガク)' }}) }}
  400.                                     {{ form_errors(form.bank_holder) }}
  401.                                 </div>
  402.                             </dd>
  403.                         </dl>
  404.                         {# エンティティ拡張の自動出力 #}
  405.                         {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  406.                             {% if f.vars.eccube_form_options.form_theme %}
  407.                                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  408.                                 {{ form_row(f) }}
  409.                             {% else %}
  410.                                 <dl>
  411.                                     <dt>
  412.                                         {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  413.                                         {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  414.                                     </dt>
  415.                                     <dd>
  416.                                         <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  417.                                             {{ form_widget(f) }}
  418.                                             {{ form_errors(f) }}
  419.                                         </div>
  420.                                     </dd>
  421.                                 </dl>
  422.                             {% endif %}
  423.                         {% endfor %}
  424.                     </div>
  425.                     <div class="ec-registerRole__actions">
  426.                         <div class="ec-checkbox{{ has_errors(form.user_policy_check) ? ' error' }}">
  427.                             <label>
  428.                                 {{ form_widget(form.user_policy_check) }}
  429.                                 {{ '<a class="ec-link" href="%url%" target="_blank">利用規約</a>に同意してお進みください'|trans({ '%url%': url('help_agreement') })|raw }}
  430.                             </label>
  431.                             {{ form_errors(form.user_policy_check) }}
  432.                         </div>
  433.                         <div class="ec-off4Grid">
  434.                             <div class="ec-off4Grid__cell">
  435.                                 <button class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ '同意する'|trans }}</button>
  436.                                 <a class="ec-blockBtn--cancel" href="{{ url('homepage') }}">{{ '同意しない'|trans }}</a>
  437.                             </div>
  438.                         </div>
  439.                     </div>
  440.                 </form>
  441.             </div>
  442.         </div>
  443.     </div>
  445.     <div class="ec-modal" id="bankError">
  446.         <input type="checkbox" id="ec-modal-checkbox" class="checkbox">
  447.         <div class="ec-modal-overlay">
  448.             <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label>
  449.             <div class="ec-modal-wrap">
  450.                 <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="/html/template/dzx02/assets/icon/cross-dark.svg" alt=""/></span></label>
  451.                 <div id="ec-modal-header" class="text-center">支店番号が見つかりません</div>
  452.                 <div class="ec-modal-box">
  453.                     <div class="ec-role">
  454.                         <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">閉じる</label>
  455.                     </div>
  456.                 </div>
  457.             </div>
  458.         </div>
  459.     </div>
  461.     <div class="ec-modal" id="bankError">
  462.         <input type="checkbox" id="ec-modal-bank" class="checkbox">
  463.         <div class="ec-modal-overlay">
  464.             <label for="ec-modal-bank" class="ec-modal-overlay-close"></label>
  465.             <div class="ec-modal-wrap">
  466.                 <label for="ec-modal-bank" class="ec-modal-close"><span class="ec-icon"><img src="/html/template/dzx02/assets/icon/cross-dark.svg" alt=""/></span></label>
  467.                 <div id="ec-modal-header" class="text-center">金融機関名を選択してください</div>
  468.                 <div class="ec-modal-box">
  469.                     <div class="ec-role">
  470.                         <label for="ec-modal-bank" class="ec-inlineBtn--cancel">閉じる</label>
  471.                     </div>
  472.                 </div>
  473.             </div>
  474.         </div>
  475.     </div>
  477.     <div class="ec-modal">
  478.         <input type="checkbox" id="ec-modal-banksearch" class="checkbox">
  479.         <div class="ec-modal-overlay">
  480.             <label for="ec-modal-banksearch" class="ec-modal-overlay-close"></label>
  481.             <div class="ec-modal-wrap">
  482.                 <label for="ec-modal-banksearch" class="ec-modal-close"><span class="ec-icon"><img src="/html/template/dzx02/assets/icon/cross-dark.svg" alt=""/></span></label>
  483.                 <div id="ec-modal-header">
  484.                     <div class="ec-borderedDefs">
  485.                         <dl>
  486.                             <dt>
  487.                                 支店番号または支店名
  488.                             </dt>
  489.                             <dd>
  490.                                 <div class="ec-halfInput">
  491.                                     <input type="text" id="branch_keyword" class="form-control" placeholder="番号または支店名を入力">
  492.                                     <a class="ec-inlineBtn btn_bank_query" href="#">検索</a>
  493.                                 </div>
  494.                             </dd>
  495.                         </dl>
  496.                         <table class="dzx-table_row_detail bank_branch_list">
  497.                         <thead>
  498.                             <tr>
  499.                                 <th style="width:70px;">選択</th>
  500.                                 <th style="width:120px;">支店番号</th>
  501.                                 <th>支店名</th>
  502.                             </tr>
  503.                         </thead>
  504.                         </table>
  505.                     </div>
  506.                 </div>
  507.                 <div class="ec-modal-box">
  508.                     <div class="ec-role">
  509.                         <label for="ec-modal-banksearch" class="ec-inlineBtn--cancel">閉じる</label>
  510.                     </div>
  511.                 </div>
  512.             </div>
  513.         </div>
  514.     </div>
  515. {% endblock %}