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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% extends 'default_frame.twig' %}
  9. {% set body_class = 'registration_page' %}
  10. {% form_theme form 'Form/form_div_layout.twig' %}
  11. {% block javascript %}
  12.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  13.     <script>
  14.     //----------------
  15.     //カスタマイズ メルマガの自動有効化とパスワード視覚化
  16.     //----------------
  17.         // メルマガのラジオボタンをデフォルトで有効にする
  18.         document.addEventListener('DOMContentLoaded', function () { // "受け取る"ラジオボタンを選択状態にする
  19.             let mailMagazinForm = document.getElementById('entry_mailmaga_flg_0');
  20.             if (mailMagazinForm) {
  21.                 mailMagazinForm.checked = true;
  22.             }
  23.         });
  24.         // パスワードの視覚化
  25.         document.addEventListener('DOMContentLoaded', function () {
  26.             document.querySelectorAll('.toggle-password').forEach(function (toggleButton) {
  27.                 toggleButton.addEventListener('click', function () {
  28.                     $(this).toggleClass("fa-eye fa-eye-slash");
  29.                         var passwordField = this.previousElementSibling;
  30.                     if (passwordField.type === "password") {
  31.                         passwordField.type = "text";
  32.                     } else {
  33.                         passwordField.type = "password";
  34.                     }
  35.                 });
  36.             });
  37.         });
  38.     // ロード時と、フォーム入力時にチェック
  39.     window.addEventListener('load', function () {
  40.         
  41.         //インプットボックス
  42.         let passwordInput = document.getElementById('entry_plain_password_first');
  43.         //ロード完了時
  44.         checkFormPassword(passwordInput);
  45.         //フォーム編集時
  46.         passwordInput.addEventListener('input', function (e) {
  47.             checkFormPassword(this);
  48.         });
  49.     });
  50.     // パスワードの入力チェック関数
  51.     function checkFormPassword(e){
  52.         let value = e.value;
  53.         let uppercasePattern = /[A-Z]/;
  54.         let lowercasePattern = /[a-z]/;
  55.         let numberPattern = /[0-9]/;
  56.         let minLength = {{ eccube_config.eccube_password_min_len }};
  57.         let maxLength = {{ eccube_config.eccube_password_max_len }};
  58.         document.getElementById('criteria-uppercase').classList.toggle('checked', uppercasePattern.test(value));
  59.         document.getElementById('criteria-lowercase').classList.toggle('checked', lowercasePattern.test(value));
  60.         document.getElementById('criteria-number').classList.toggle('checked', numberPattern.test(value));
  61.         document.getElementById('criteria-length').classList.toggle('checked', value.length >= minLength && value.length <= maxLength);
  62.     }
  63.     </script>
  64. {% endblock javascript %}
  65. {% block main %}
  66. {# 現在の言語情報の取得 #}
  67. {% set current_locale = 'ja' %} {# 初期値は日本語 #}
  68. {% for locale in supported_locales() %}
  69.     {% if is_current_locale(locale) %}
  70.         {% set current_locale = locale %} {# 現在の言語を保存 #}
  71.     {% endif %}
  72. {% endfor %}
  73.     <style>
  74.         .bg-load-overlay{
  75.             display: none !important;
  76.         }
  77.     </style>
  78.     <div class="ec-registerRole">
  79.         <div class="ec-pageHeader">
  80.             <h1>{{ 'front.entry.title'|trans }}</h1>
  81.         </div>
  82.         <div class="ec-off1Grid">
  83.             <div class="ec-off1Grid__cell">
  84.                 <form id="entryForm" method="post" action="{{ url('entry',{'ref': ref}) }}" novalidate class="h-adr" method="post">
  85.                     <span class="p-country-name" style="display:none;">Japan</span>
  86.                     {{ form_widget(form._token) }}
  87.                     <div
  88.                         class="ec-borderedDefs">
  89.                         <!--
  90.                         *カスタマイズ代理店コードの追加
  91.                         *代理店コードを入力して登録 or 代理店コードを読み取って登録の場合のみ招待コードのフォームを表示する
  92.                         -->
  93.                         {% if ref is null %}
  94.                             <dl>
  95.                                 <dt>
  96.                                     {{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
  97.                                     <p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
  98.                                 </dt>
  99.                                 <dd>
  100.                                     <div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
  101.                                         {{ form_widget(form.agencyCode) }}
  102.                                         {{ form_errors(form.agencyCode) }}
  103.                                     </div>
  104.                                 </dd>
  105.                             </dl>
  106.                         {% elseif ref is empty %}
  107.                             {# refは存在するが値が空の場合の処理 #}
  108.                             <input type="hidden" name="ref" value="{{ ref }}">
  109.                             <dl>
  110.                                 <dt>
  111.                                     {{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
  112.                                     <p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
  113.                                 </dt>
  114.                                 <dd>
  115.                                     <div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
  116.                                         {#{{ form_widget(form.agencyCode, {'attr': {'value': ''}}) }}#}
  117.                                         {{ form_widget(form.agencyCode) }}
  118.                                         {{ form_errors(form.agencyCode) }}
  119.                                     </div>
  120.                                 </dd>
  121.                             </dl>
  122.                         {% else %}
  123.                              {#refが存在し、かつ値もある場合の処理 #}
  124.                             <input type="hidden" name="ref" value="{{ ref }}">
  125.                             <dl>
  126.                                 <dt>
  127.                                     {{ form_label(form.agencyCode, 'front.entry.form.coupon_invitation'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
  128.                                     <p class="entry_birth_note">{{ 'front.entry.password_note'|trans }}</p>
  129.                                 </dt>
  130.                                 <dd>
  131.                                     <div class="ec-telInput{{ has_errors(form.agencyCode) ? ' error' }}">
  132.                                         {{ form_widget(form.agencyCode, {'attr': {'value': ref, 'readonly': 'readonly'}}) }}
  133.                                         {{ form_errors(form.agencyCode) }}
  134.                                     </div>
  135.                                 </dd>
  136.                             </dl>
  137.                         {% endif %}
  138.                             
  139.                         
  140.                         <!--end / カスタマイズ代理店コード-->
  141.                         <dl>
  142.                             <dt>
  143.                                 {{ form_label(form.name, 'front.entry.form.name'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
  144.                             </dt>
  145.                             <dd>
  146.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
  147.                                     {{ form_widget(form.name.name01, { 'attr': { 'placeholder': 'front.entry.form.sei'|trans }}) }}
  148.                                     {{ form_widget(form.name.name02, { 'attr': { 'placeholder': 'front.entry.form.mei'|trans }}) }}
  149.                                     {{ form_errors(form.name.name01) }}
  150.                                     {{ form_errors(form.name.name02) }}
  151.                                 </div>
  152.                             </dd>
  153.                         </dl>
  154.                         {% if current_locale == 'ja' %}
  155.                         <dl>
  156.                             <dt>
  157.                                 {{ form_label(form.kana, 'front.entry.form.name_kana'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
  158.                             </dt>
  159.                             <dd>
  160.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  161.                                     {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'front.entry.form.sei_kana'|trans }}) }}
  162.                                     {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'front.entry.form.mei_kana'|trans }}) }}
  163.                                     {{ form_errors(form.kana.kana01) }}
  164.                                     {{ form_errors(form.kana.kana02) }}
  165.                                 </div>
  166.                             </dd>
  167.                         </dl>
  168.                         {% else %}
  169.                         {# 英語の場合は隠しフィールドとして出力 #}
  170.                         <div style="display: none;">
  171.                             {{ form_widget(form.kana) }}
  172.                         </div>
  173.                         {% endif %}
  174.                         <dl>
  175.                             <dt>
  176.                                 {{ form_label(form.company_name, 'front.entry.form.company_department_name'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
  177.                             </dt>
  178.                             <dd>
  179.                                 <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
  180.                                     {{ form_widget(form.company_name) }}
  181.                                     {{ form_errors(form.company_name) }}
  182.                                 </div>
  183.                             </dd>
  184.                         </dl>
  185.                         <dl>
  186.                             <dt>
  187.                                 {{ form_label(form.address, 'front.entry.form.address'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
  188.                             </dt>
  189.                             <dd>
  190.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
  191.                                     <span>{{ 'front.entry.form.post_icon'|trans }}</span>
  192.                                     {{ form_widget(form.postal_code) }}
  193.                                     <div class="ec-zipInputHelp">
  194.                                         <div class="ec-zipInputHelp__icon">
  195.                                             <div class="ec-icon"><img src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  196.                                             </div>
  197.                                         </div>
  198.                                         <a href="https://www.post.japanpost.jp/zipcode/" target="_blank">
  199.                                             <span>{{ 'front.entry.form.postcode_search'|trans }}</span>
  200.                                         </a>
  201.                                     </div>
  202.                                     {{ form_errors(form.postal_code) }}
  203.                                 </div>
  204.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  205.                                     {{ form_widget(form.address.pref) }}
  206.                                     {{ form_errors(form.address.pref) }}
  207.                                 </div>
  208.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  209.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': 'front.entry.form.city_town_name'|trans }}) }}
  210.                                     {{ form_errors(form.address.addr01) }}
  211.                                 </div>
  212.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  213.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': 'front.entry.form.street_building_name'|trans }}) }}
  214.                                     {{ form_errors(form.address.addr02) }}
  215.                                 </div>
  216.                             </dd>
  217.                         </dl>
  218.                         <dl>
  219.                             <dt>
  220.                                 {{ form_label(form.phone_number, 'front.entry.form.phone_number'|trans , { 'label_attr': { 'class': 'ec-label' }}) }}
  221.                             </dt>
  222.                             <dd>
  223.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  224.                                     {{ form_widget(form.phone_number, { 'attr': { 'placeholder': 'front.entry.form.example_phone_number'|trans }}) }}
  225.                                     {{ form_errors(form.phone_number) }}
  226.                                 </div>
  227.                             </dd>
  228.                         </dl>
  229.                         <dl>
  230.                             <dt>
  231.                                 {{ form_label(form.email, 'front.entry.form.mail'|trans, { 'label_attr': { 'class': 'ec-label' }}) }}
  232.                             </dt>
  233.                             <dd>
  234.                                 <div class="ec-input{{ has_errors(form.email.first) ? ' error' }}">
  235.                                     {{ form_widget(form.email.first, { 'attr': { 'placeholder': 'front.entry.form.mail_sample'|trans }}) }}
  236.                                     {{ form_errors(form.email.first) }}
  237.                                 </div>
  238.                                 <div class="ec-input{{ has_errors(form.email.second) ? ' error' }}">
  239.                                     {{ form_widget(form.email.second, { 'attr': { 'placeholder': 'front.entry.form.mail_confirm'|trans }}) }}
  240.                                     {{ form_errors(form.email.second) }}
  241.                                 </div>
  242.                             </dd>
  243.                         </dl>
  244.                         <dl>
  245.                             <dt>
  246.                                 {{ form_label(form.plain_password, 'front.entry.form.pass'|trans, { 'label_attr': {'class': 'ec-label' }}) }}
  247.                                 <p class="password-criteria_note">{{ 'front.entry.form.pass_validation'|trans }}</p>
  248.                             </dt>
  249.                             <dd>
  250.                                 <div class="ec-input{{ has_errors(form.plain_password.first) ? ' error' }}">
  251.                                     {{ form_widget(form.plain_password.first, {
  252.                                         'attr': { 'placeholder': 'front.entry.form.password_length'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }), 'class': 'password-field' },
  253.                                         'type': 'password'
  254.                                     }) }}
  255.                                     <span type="button" class="fa fa-fw fa-eye field-icon toggle-password"></span>
  256.                                     {{ form_errors(form.plain_password.first) }}
  257.                                 </div>
  258.                                 <div class="password-criteria_area">
  259.                                     <ul id="password-criteria">
  260.                                         <li id="criteria-uppercase">{{'front.entry.form.password_uppercase_letter'|trans}}</li>
  261.                                         <li id="criteria-lowercase">{{ 'front.entry.form.password_lowercase_letter'|trans }}</li>
  262.                                         <li id="criteria-number">{{'front.entry.form.password_number'|trans}}</li>
  263.                                         <li id="criteria-length">{{'front.entry.form.character_count'|trans}} ({{ eccube_config.eccube_password_min_len }} to {{ eccube_config.eccube_password_max_len }} {{'front.entry.form.letter'|trans}})</li>
  264.                                     </ul>
  265.                                 </div>
  266.                                 <div class="ec-input{{ has_errors(form.plain_password.second) ? ' error' }}">
  267.                                     {{ form_widget(form.plain_password.second, {
  268.                                         'attr': { 'placeholder': 'front.entry.form.password_confirm'|trans, 'class': 'password-field' },
  269.                                         'type': 'password'
  270.                                     }) }}
  271.                                     <span type="button" class="fa fa-fw fa-eye field-icon toggle-password"></span>
  272.                                     {{ form_errors(form.plain_password.second) }}
  273.                                 </div>
  274.                             </dd>
  275.                         </dl>
  276.                         <dl>
  277.                             <dt>
  278.                                 {{ form_label(form.birth, 'front.entry.form.date_of_birth'|trans, { 'label_attr': {'class': 'ec-label' }}) }}
  279.                                 <p class="entry_birth_note">
  280.                                     {{'front.entry.form.teen_service_confirm'|trans}}<br>
  281.                                     {{'front.entry.form.teen_service_confirm_after_registration'|trans}}
  282.                                 </p>
  283.                             </dt>
  284.                             <dd>
  285.                                 <div class="ec-birth{{ has_errors(form.birth) ? ' error' }}">
  286.                                     {{ form_widget(form.birth.year) }}<span>/</span>
  287.                                     {{ form_widget(form.birth.month) }}<span>/</span>
  288.                                     {{ form_widget(form.birth.day) }}
  289.                                     {{ form_errors(form.birth) }}
  290.                                 </div>
  291.                             </dd>
  292.                         </dl>
  293.                         {# エンティティ拡張の自動出力 #}
  294.                         {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  295.                             {% if f.vars.eccube_form_options.form_theme %}
  296.                                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  297.                                 {{ form_row(f) }}
  298.                             {% else %}
  299.                                 <dl>
  300.                                     <dt>
  301.                                         {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  302.                                         {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  303.                                     </dt>
  304.                                     <dd>
  305.                                         <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  306.                                             {{ form_widget(f) }}
  307.                                             {{ form_errors(f) }}
  308.                                         </div>
  309.                                     </dd>
  310.                                 </dl>
  311.                             {% endif %}
  312.                         {% endfor %}
  313.                     </div>
  314.                     <div class="ec-registerRole__actions">
  315.                         <div class="ec-checkbox{{ has_errors(form.user_policy_check) ? ' error' }}">
  316.                             <label>
  317.                                 {{ form_widget(form.user_policy_check) }}
  318.                                 {{ 'form.entry.message.agree_terms'|trans({ '%url%': url('help_agreement') })|raw }}
  319.                             </label>
  320.                             {{ form_errors(form.user_policy_check) }}
  321.                         </div>
  322.                         <div class="ec-off4Grid">
  323.                             <div class="ec-off4Grid__cell">
  324.                                 <button id="confirm_birthday" class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ 'front.entry.form.agree'|trans }}</button>
  325.                                 <a class="ec-blockBtn--cancel" href="{{ url('homepage') }}">{{ 'front.entry.form.disagree'|trans }}</a>
  326.                             </div>
  327.                         </div>
  328.                     </div>
  329.                     <div class="popup_start_plan postage_popup_hide" id="popupElement">
  330.                         <div class="popup_postage-free_inner">
  331.                             <div class="popup_content">
  332.                                 <h5><span class="pop_product_name">{{ 'front.entry.service_usage_confirmation'|trans }}</h4>
  333.                                 <p class="pop_product_text">
  334.                                     {{'front.entry.before_using_this_service_1'|trans}}<br>
  335.                                     {{'front.entry.before_using_this_service_2'|trans}}
  336.                                 </p>
  337.                                 <div class="popup_content_btn">
  338.                                     <p onclick="postagePopupClose()" class="ec-blockBtn--cancel">{{'front.entry.return_to_input_screen'|trans}}</p>
  339.                                     <button class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ 'front.entry.form.agree'|trans }}</button>
  340.                                 </div>
  341.                             </div>
  342.                         </div>
  343.                     </div>
  344.                 </form>
  345.             </div>
  346.         </div>
  347.     </div>
  348.     
  349.     <script>
  350.         let popupEl = document.getElementById('popupElement');
  351.         
  352.         //ポップアップ非表示
  353.         function postagePopupClose(){
  354.             popupEl.classList.add('postage_popup_hide');
  355.             
  356.             // 入力された誕生日の初期化
  357.             document.getElementById('entry_birth_year').value = "";
  358.             document.getElementById('entry_birth_month').value = "";
  359.             document.getElementById('entry_birth_day').value = "";
  360.         }
  361.         
  362.         //ポップアップ表示
  363.         function postagePopupOpen(){
  364.             popupEl.classList.remove('postage_popup_hide');
  365.         }
  366.         
  367.         document.getElementById('confirm_birthday').addEventListener('click', function(event) {
  368.         
  369.             // 現在の日付
  370.             const today = new Date();
  371.             const currentYear = today.getFullYear();
  372.             const currentMonth = today.getMonth() + 1;
  373.             const currentDay = today.getDate();
  374.         
  375.             // 入力された誕生日
  376.             const birthYear = parseInt(document.getElementById('entry_birth_year').value, 10);
  377.             const birthMonth = parseInt(document.getElementById('entry_birth_month').value, 10);
  378.             const birthDay = parseInt(document.getElementById('entry_birth_day').value, 10);
  379.         
  380.             // 年齢計算
  381.             let age = currentYear - birthYear;
  382.             if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
  383.                 age--;
  384.             }
  385.         
  386.             // 18歳未満の場合、ポップアップ表示
  387.             if (age < 18) {
  388.                 event.preventDefault(); // フォームの送信を一時停止
  389.                 postagePopupOpen();
  390.             } else {
  391.                 // 18歳以上の場合、フォームを送信
  392.                 document.getElementById('entryForm').submit();
  393.                 //デバック用
  394.                 // alert("test");
  395.             }
  396.         });
  397.     </script>
  398.     {% if current_locale == 'en' %}
  399.     <script>
  400.         const nameFields = {
  401.             name01: document.querySelector('input[name="entry[name][name01]"]'),
  402.             name02: document.querySelector('input[name="entry[name][name02]"]')
  403.         };
  404.         
  405.         const kanaFields = {
  406.             kana01: document.querySelector('input[name="entry[kana][kana01]"]'),
  407.             kana02: document.querySelector('input[name="entry[kana][kana02]"]')
  408.         };
  409.         
  410.         // 名前フィールドの変更を監視してカナフィールドに反映
  411.         if (nameFields.name01 && kanaFields.kana01) {
  412.             nameFields.name01.addEventListener('input', function() {
  413.                 kanaFields.kana01.value = this.value;
  414.             });
  415.             
  416.             // 初期値も設定
  417.             if (nameFields.name01.value) {
  418.                 kanaFields.kana01.value = nameFields.name01.value;
  419.             }
  420.         }
  421.         
  422.         if (nameFields.name02 && kanaFields.kana02) {
  423.             nameFields.name02.addEventListener('input', function() {
  424.                 kanaFields.kana02.value = this.value;
  425.             });
  426.             
  427.             // 初期値も設定
  428.             if (nameFields.name02.value) {
  429.                 kanaFields.kana02.value = nameFields.name02.value;
  430.             }
  431.         }
  432.     </script>
  433.     {% endif %}
  434. {% endblock %}