app/template/yamaria/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 javascript %}
  18.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  19. <script>
  20. //モーダルを表示する
  21. $(function(){
  22.     {% if has_errors(form.name.name01, form.name.name02, form.kana.kana01, form.kana.kana02, form.company_name, form.postal_code, form.address.pref, form.address.addr01, form.address.addr02, form.phone_number, form.email.first, form.email.second, form.plain_password.first, form.plain_password.second, form.birth, form.sex, form.job, form.user_policy_check) or form.name.name01.vars.data != "" %}
  23.         $('#modalArea').hide();
  24.         $('.view1').hide();
  25.         $('.view2, .view3').hide();
  26.     {% else %}
  27.         $('#modalArea').fadeIn();
  28.         $('.view1').show();
  29.         $('.view2, .view3').hide();
  30.     {% endif %}
  31.     
  32.     $('.next_2').click(function(){
  33.         $('.view1').hide();
  34.         $('.view2').fadeIn();
  35.     });
  36.     $('.next_3').click(function(){
  37.         $('.view1').hide();
  38.         $('.view3').fadeIn();
  39.     });
  40.     $('#closeModal_ , #modalBg_, .func_close').click(function(){
  41.         $('#modalArea').fadeOut();
  42.     });
  43.     
  44.     
  45.     /*
  46.     $('.js-modal-open').on('click',function(){
  47.         $('.js-modal').fadeIn();
  48.         return false;
  49.     });
  50.     $('.js-modal-close').on('click',function(){
  51.         $('.js-modal').fadeOut();
  52.         return false;
  53.     });
  54.     */
  55. });
  56. </script>
  57. <style>
  58. /* モーダルCSS */
  59.     .ym-btn{
  60.         margin-top: 10px;
  61.     }
  62.     .ym-btn a{
  63.         min-width: 45%;
  64.     }
  65. .modalArea {
  66.   display: none;
  67.   position: fixed;
  68.   z-index: 9999; /*サイトによってここの数値は調整 */
  69.   top: 0;
  70.   left: 0;
  71.   width: 100%;
  72.   height: 100%;
  73. }
  74.     .modalContents{
  75.         display: table;
  76.         width: 100%;
  77.         height: 100%;
  78.     }
  79.     .view1, .view2, .view3{
  80.         display: table-cell;
  81.         vertical-align: middle;
  82.         width: 100%;
  83.     }
  84.     .ym-heading_lv2{
  85.         margin-bottom: 10px;
  86.     }
  87. .modalBg {
  88.     z-index: 9998;
  89.   width: 100%;
  90.   height: 100%;
  91.   background-color: rgba(30,30,30,0.8);
  92. }
  94. .modalWrapper {
  95.   position: absolute;
  96.   top: 50%;
  97.   left: 50%;
  98.   transform:translate(-50%,-50%);
  99.   width: 95%;
  100.   max-width: 640px;
  101.   padding: 20px 20px;
  102.   background-color: #fff;
  103.     height : 90%;
  104.     overflow : auto;
  105. }
  107. .closeModal {
  108.   position: absolute;
  109.   top: 0.5rem;
  110.   right: 1rem;
  111.   cursor: pointer;
  112. }
  115. /* 以下ボタンスタイル */
  116. button {
  117.   padding: 10px;
  118.   background-color: #fff;
  119.   border: 1px solid #282828;
  120.   border-radius: 2px;
  121.   cursor: pointer;
  122. }
  124. #openModal {
  125.   position: absolute;
  126.   top: 50%;
  127.   left: 50%;
  128.   transform:translate(-50%,-50%);
  129. }
  130. </style>
  131. {% endblock javascript %}
  133. {% block main %}
  134.     <div class="ec-registerRole">
  135.         <div class="ec-pageHeader">
  136.             <h1>{{ '新規会員登録'|trans }}</h1>
  137.         </div>
  138.         <div class="ec-off1Grid">
  139.             <div class="ec-off1Grid__cell">
  140.                 <form method="post" action="{{ url('entry') }}" novalidate class="h-adr">
  141.                     <span class="p-country-name" style="display:none;">Japan</span>
  142.                     {{ form_widget(form._token) }}
  143.                     <div class="ec-borderedDefs">
  144.                         <dl>
  145.                             <dt>
  146.                                 {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  147.                             </dt>
  148.                             <dd>
  149.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error'}}">
  150.                                     {{ form_widget(form.name.name01, { 'attr': { 'placeholder': '姓' }}) }}
  151.                                     {{ form_widget(form.name.name02, { 'attr': { 'placeholder': '名' }}) }}
  152.                                     {{ form_errors(form.name.name01) }}
  153.                                     {{ form_errors(form.name.name02) }}
  154.                                 </div>
  155.                             </dd>
  156.                         </dl>
  157.                         <dl>
  158.                             <dt>
  159.                                 {{ form_label(form.kana, 'お名前(カナ)', { 'label_attr': { 'class': 'ec-label' }}) }}
  160.                             </dt>
  161.                             <dd>
  162.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error'}}">
  163.                                     {{ form_widget(form.kana.kana01, { 'attr': { 'placeholder': 'セイ' }}) }}
  164.                                     {{ form_widget(form.kana.kana02, { 'attr': { 'placeholder': 'メイ' }}) }}
  165.                                     {{ form_errors(form.kana.kana01) }}
  166.                                     {{ form_errors(form.kana.kana02) }}
  167.                                 </div>
  168.                             </dd>
  169.                         </dl>
  170.                         <dl>
  171.                             <dt>
  172.                                 {{ form_label(form.company_name, '会社名', { 'label_attr': { 'class': 'ec-label' }}) }}
  173.                             </dt>
  174.                             <dd>
  175.                                 <div class="ec-halfInput{{ has_errors(form.company_name) ? ' error' }}">
  176.                                     {{ form_widget(form.company_name) }}
  177.                                     {{ form_errors(form.company_name) }}
  178.                                     ご入力いただいた場合、発送先に会社名が印字されます
  179.                                 </div>
  180.                             </dd>
  181.                         </dl>
  182.                         <dl>
  183.                             <dt>
  184.                                 {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  185.                             </dt>
  186.                             <dd>
  187.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}"><span>{{ '〒'|trans }}</span>
  188.                                     {{ form_widget(form.postal_code) }}
  189.                                     {#
  190.                                     <div class="ec-zipInputHelp">
  191.                                         <div class="ec-zipInputHelp__icon">
  192.                                             <div class="ec-icon"><img
  193.                                                         src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  194.                                             </div>
  195.                                         </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  196.                                     </div>
  197.                                     #}
  198.                                     {{ form_errors(form.postal_code) }}
  199.                                 </div>
  201.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  202.                                     {{ form_widget(form.address.pref) }}
  203.                                     {{ form_errors(form.address.pref) }}
  204.                                 </div>
  205.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  206.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名(例：大阪市北区)' }}) }}
  207.                                     {{ form_errors(form.address.addr01) }}
  208.                                 </div>
  209.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  210.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名(例：西梅田1丁目6-8)' }}) }}
  211.                                     {{ form_errors(form.address.addr02) }}
  212.                                 </div>
  213.                             </dd>
  214.                         </dl>
  215.                         <dl>
  216.                             <dt>
  217.                                 {{ form_label(form.phone_number, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  218.                             </dt>
  219.                             <dd>
  220.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  221.                                     {{ form_widget(form.phone_number) }}
  222.                                     {{ form_errors(form.phone_number) }}
  223.                                 </div>
  224.                             </dd>
  225.                         </dl>
  226.                         <dl>
  227.                             <dt>
  228.                                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  229.                             </dt>
  230.                             <dd>
  231.                                 <div class="ec-input{{ has_errors(form.email.first) ? ' error' }}">
  232.                                     {{ form_widget(form.email.first, { 'attr': { 'placeholder': '例：ec-cube@example.com' }}) }}
  233.                                     {{ form_errors(form.email.first) }}
  234.                                 </div>
  235.                                 <div class="ec-input{{ has_errors(form.email.second) ? ' error' }}">
  236.                                     {{ form_widget(form.email.second, { 'attr': { 'placeholder': '確認のためもう一度入力してください' }}) }}
  237.                                     {{ form_errors(form.email.second) }}
  238.                                 </div>
  239.                                 <p>「info_com@yamaria.com」からのメールを受信できる様、ドメイン設定を解除して頂いただくか、ドメイン「@yamaria.com」を 受信リストに加えていただきますよう、お願い申し上げます。</p>
  240.                             </dd>
  241.                         </dl>
  242.                         <dl>
  243.                             <dt>
  244.                                 {{ form_label(form.plain_password, 'パスワード', { 'label_attr': {'class': 'ec-label' }}) }}
  245.                             </dt>
  246.                             <dd>
  247.                                 <div class="ec-input{{ has_errors(form.plain_password.first) ? ' error' }}">
  248.                                     {{ form_widget(form.plain_password.first, {
  249.                                         'attr': { 'placeholder': '半角英数記号%min%〜%max%文字'|trans({ '%min%': eccube_config.eccube_password_min_len, '%max%': eccube_config.eccube_password_max_len }) },
  250.                                         'type': 'password'
  251.                                     }) }}
  252.                                     {{ form_errors(form.plain_password.first) }}
  253.                                 </div>
  254.                                 <div class="ec-input{{ has_errors(form.plain_password.second) ? ' error' }}">
  255.                                     {{ form_widget(form.plain_password.second, {
  256.                                         'attr': { 'placeholder': '確認のためもう一度入力してください'|trans },
  257.                                         'type': 'password'
  258.                                     }) }}
  259.                                     {{ form_errors(form.plain_password.second) }}
  260.                                 </div>
  261.                             </dd>
  262.                         </dl>
  263.                         <dl>
  264.                             <dt>
  265.                                 {{ form_label(form.birth, '生年月日', { 'label_attr': {'class': 'ec-label' }}) }}
  266.                             </dt>
  267.                             <dd>
  268.                                 <div class="ec-birth{{ has_errors(form.birth) ? ' error' }}">
  269.                                     {{ form_widget(form.birth.year) }}<span>/</span>
  270.                                     {{ form_widget(form.birth.month) }}<span>/</span>
  271.                                     {{ form_widget(form.birth.day) }}
  272.                                     {{ form_errors(form.birth) }}
  273.                                 </div>
  274.                             </dd>
  275.                         </dl>
  276.                         <dl>
  277.                             <dt>
  278.                                 {{ form_label(form.sex, '性別', { 'label_attr': { 'class': 'ec-label' }}) }}
  279.                             </dt>
  280.                             <dd>
  281.                                 <div class="ec-radio{{ has_errors(form.sex) ? ' error' }}">
  282.                                     {{ form_widget(form.sex) }}
  283.                                     {{ form_errors(form.sex) }}
  284.                                 </div>
  285.                             </dd>
  286.                         </dl>
  287.                         <dl>
  288.                             <dt>
  289.                                 {{ form_label(form.job, '職業', { 'label_attr': {'class': 'ec-label' }}) }}
  290.                             </dt>
  291.                             <dd>
  292.                                 <div class="ec-select{{ has_errors(form.job) ? ' error' }}">
  293.                                     {{ form_widget(form.job) }}
  294.                                     {{ form_errors(form.job) }}
  295.                                 </div>
  296.                             </dd>
  297.                         </dl>
  298.                         {# エンティティ拡張の自動出力 #}
  299.                         {# 自動出力をなくす
  300.                         {% for f in form if f.vars.eccube_form_options.auto_render %}
  301.                             {% if f.vars.eccube_form_options.form_theme %}
  302.                                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  303.                                 {{ form_row(f) }}
  304.                             {% else %}
  305.                                 <dl>
  306.                                     <dt>
  307.                                         {{ form_label(f) }}
  308.                                     </dt>
  309.                                     <dd>
  310.                                         <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  311.                                             {{ form_widget(f) }}
  312.                                             {{ form_errors(f) }}
  313.                                         </div>
  314.                                     </dd>
  315.                                 </dl>
  316.                             {% endif %}
  317.                         {% endfor %}
  318.                         #}
  319.                     </div>
  320.                     <div class="ec-registerRole__actions">
  321.                         <div class="ec-off4Grid">
  322.                             <div class="ec-off4Grid__cell">
  323.                                 <div class="ec-checkbox{{ has_errors(form.user_policy_check) ? ' error' }}">
  324.                                     <label>
  325.                                         {{ form_widget(form.user_policy_check) }}
  326.                                         {{ '<a class="ec-link" href="%url%" target="_blank">利用規約</a>に同意してお進みください'|trans({ '%url%': url('help_agreement') })|raw }}
  327.                                     </label>
  328.                                     {{ form_errors(form.user_policy_check) }}
  329.                                 </div>
  330.                                 <button class="ec-blockBtn--action" type="submit" name="mode" value="confirm">{{ '同意する'|trans }}</button>
  331.                                 <a class="ec-blockBtn--cancel" href="{{ url('homepage') }}">{{ '同意しない'|trans }}</a>
  332.                             </div>
  333.                         </div>
  334.                     </div>
  335.                 </form>
  336.             </div>
  337.         </div>
  338.     </div>
  340. <!-- モーダルエリアここから -->
  341. <section id="modalArea" class="modalArea">
  342.   <div id="modalBg" class="modalBg"></div>
  343.   <div class="modalWrapper">
  344.     <div class="modalContents">
  345.         <div class="view1">
  346.             <p class="ym-heading ym-heading_lv2" style="margin-bottom: 20px;">YAMASHITA Maria ONLINE STOREの<br>連携サイト「エギCOM」に登録されていますか？</p>
  347.             <p class="ym-more ym-btn">
  348.                 <a href="javascript:void(0);" class="next_2">は　い</a>&nbsp;&nbsp;
  349.                 <a href="javascript:void(0);" class="next_3">いいえ</a>
  350.             </p>
  351.             <!--
  352.             <p style="text-align: center;">
  353.                 <button>はい</button>&nbsp;
  354.                 <button>いいえ</button>
  355.             </p>
  356.             -->
  357.         </div>
  358.         <div class="view2">
  359.             <!--
  360.             <p class="ym-heading ym-heading_lv2">エギCOMにメールアドレス・パスワードが設定されていますか？</p>
  361.             <p class="ym-more ym-btn">
  362.                 <a href="javascript:void(0);" class="next_2">はい</a>
  363.                 <a href="javascript:void(0);" class="next_3">いいえ</a>
  364.             </p>
  365.             <p style="text-align: center;">
  366.                 <button>はい</button>&nbsp;
  367.                 <button>いいえ</button>
  368.             </p>
  369.             <br><br>
  370.             -->
  371.             <p class="ym-heading ym-heading_lv2">エギCOMにメールアドレス・パスワードが登録されている方</p>
  372.             <p>エギCOMのメールアドレスとパスワードで当ストアへログインしてください。</p>
  373.             <p class="ym-more ym-btn"><a href="/mypage/login" style="min-width: 300px;">ログインページへ</a></p>
  374.             <br><br>
  375.             <p class="ym-heading ym-heading_lv2">メールアドレス・パスワードが登録されていない方（SNSログインをご利用の方）</p>
  376.             <p>エギCOMのプロフィール編集画面でメールアドレスとパスワードを登録してください。</p>
  377.             <p class="ym-more ym-btn"><a href="https://www.yamaria.com/users/prof_edit" target="_blank" style="min-width: 300px;">エギCOM プロフィール編集へ</a></p>
  378.             <p style="margin-top: 15px;">登録が完了しましたら当ストアへログインしてください。</p>
  379.             <p class="ym-more ym-btn"><a href="/mypage/login" style="min-width: 300px;">ログインページへ</a></p>
  380.         </div>
  381.         <div class="view3">
  382.             <p class="ym-heading ym-heading_lv2">当ストアの新規会員登録へお進みください</p>
  383.             <p>当ストアで会員登録をすると、登録された同じメールアドレス・パスワードで連携サイト「エギCOM」にもログインできます。</p>
  384.             <p class="ym-more ym-btn"><a href="javascript:void(0);" class="func_close" style="min-width: 300px;">会員登録へ進む</a></p>
  385.         </div>
  386.     </div>
  387.     <!--
  388.     <div id="closeModal" class="closeModal">
  389.       ×
  390.     </div>
  391.     -->
  392.   </div>
  393. </section>
  394. <!-- モーダルエリアここまで -->
  395. {% endblock %}