app/template/default/Contact/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. {% form_theme form 'Form/form_div_layout.twig' %}
  10. {% form_theme searchProductModalForm '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  11. {% block javascript %}
  12.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  13.     <script>
  14.     $(function(){
  15.         $('#contact_title').change(function(){
  16.             if ($(this).val() == 'サンプル依頼') {
  17.                 $('.content-of-inquiry>p').css('display', 'block');
  18.                 $('.content-of-inquiry>.ec-halfInput').css('display', 'block');
  19.             } else {
  20.                 $('.content-of-inquiry>p').css('display', 'none');
  21.                 $('.content-of-inquiry>.ec-halfInput').css('display', 'none');
  22.             }
  23.         });
  24.         $(".add-product").click(function(){
  25.             $("#callback").val($(this).attr('data-callBack-index'));
  26.         });
  27.         // 商品検索
  28.         $('#searchProductModalButton').on('click', function() {
  29.             var list = $('#searchProductModalList');
  30.             list.children().remove();
  31.             $.ajax({
  32.                 url: '{{ url('order_search_product') }}',
  33.                 type: 'POST',
  34.                 dataType: 'html',
  35.                 data: {
  36.                     'id': $('#admin_search_product_id').val(),
  37.                     'category_id': $('#admin_search_product_category_id').val()
  38.                 }
  39.             }).done(function(data) {
  40.                 $('#searchProductModalList').html(data);
  41.             }).fail(function(data) {
  42.                 alert('search product failed.');
  43.             });
  44.         });
  45.     });
  46.     </script>
  47. {% endblock javascript %}
  48. {% block main %}
  49. <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.css', 'admin') }}">
  50. <style>
  51.     input.contact_product_id{
  52.         width: 25%;
  53.         margin-right: 28px;
  54.         margin-left: 15px;
  55.         display: inline-block;
  56.     }
  57.     label.form-label{
  58.         line-height: 1.4;
  59.     }
  60.     input.add-product{
  61.         margin-left: 15px !important;
  62.     }
  63.     input[readonly="readonly"]{
  64.         background-color: #f8f8f8;
  65.     }
  66.     .add-product{
  67.         cursor: pointer;
  68.     }
  69.     #contact_product_name{
  70.         margin-left: 15px;
  71.     }
  72. </style>
  73.     <div class="ec-contactRole">
  74.         <div class="ec-pageHeader">
  75.             <h1>{{ 'お問い合わせ'|trans }}</h1>
  76.         </div>
  77.         <div class="ec-off1Grid">
  78.             <div class="ec-off1Grid__cell">
  79.                 <form method="post" action="" class="h-adr" novalidate>
  80.                     <span class="p-country-name" style="display:none;">Japan</span>
  81.                     {{ form_widget(form._token) }}
  82.                     <p class="ec-para-normal">{{ '内容によっては回答をさしあげるのにお時間をいただくこともございます。
  83. また、休業日は翌営業日以降の対応となりますのでご了承ください。
  84. '|trans|nl2br }}</p>
  85.                     <div class="ec-borderedDefs">
  86.                         <dl>
  87.                             <dt>
  88.                                 {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  89.                             </dt>
  90.                             <dd>
  91.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  92.                                     {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' }}) }}
  93.                                     {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' }}) }}
  94.                                     {{ form_errors(form.name.name01) }}
  95.                                     {{ form_errors(form.name.name02) }}
  96.                                 </div>
  97.                             </dd>
  98.                         </dl>
  99.                         <dl>
  100.                             <dt>
  101.                                 {{ form_label(form.kana, 'お名前(フリガナ)', {'label_attr': {'class': 'ec-label'}}) }}
  102.                             </dt>
  103.                             <dd>
  104.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  105.                                     {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' }}) }}
  106.                                     {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' }}) }}
  107.                                     {{ form_errors(form.kana.kana01) }}
  108.                                     {{ form_errors(form.kana.kana02) }}
  109.                                 </div>
  110.                             </dd>
  111.                         </dl>
  112.                         <dl>
  113.                             <dt>
  114.                                 {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  115.                             </dt>
  116.                             <dd>
  117.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
  118.                                     <span>{{ '〒'|trans }}</span>
  119.                                     {{ form_widget(form.postal_code) }}
  120.                                     <div class="ec-zipInputHelp">
  121.                                         <div class="ec-zipInputHelp__icon">
  122.                                             <div class="ec-icon"><img
  123.                                                     src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  124.                                             </div>
  125.                                         </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  126.                                     </div>
  127.                                     {{ form_errors(form.postal_code) }}
  128.                                 </div>
  129.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  130.                                     {{ form_widget(form.address.pref) }}
  131.                                     {{ form_errors(form.address.pref) }}
  132.                                 </div>
  133.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  134.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名 (例:千代田区神田神保町)' }}) }}
  135.                                     {{ form_errors(form.address.addr01) }}
  136.                                 </div>
  137.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  138.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名 (例:1-3-5)' , 'style' : 'margin-bottom: 0px;'}}) }}
  139.                                     {{ form_errors(form.address.addr02) }}
  140.                                 </div>
  141.                                 <p style="color:red;margin-top: 5px;">住所は2つに分けてご記入ください。マンション名は必ず記入してください。</p>
  142.                             </dd>
  143.                         </dl>
  144.                         <dl>
  145.                             <dt>
  146.                                 {{ form_label(form.phone_number, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  147.                             </dt>
  148.                             <dd>
  149.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  150.                                     {{ form_widget(form.phone_number) }}
  151.                                     {{ form_errors(form.phone_number) }}
  152.                                 </div>
  153.                             </dd>
  154.                         </dl>
  155.                         <dl>
  156.                             <dt>
  157.                                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  158.                             </dt>
  159.                             <dd>
  160.                                 <div class="ec-input{{ has_errors(form.email) ? ' error' }}">
  161.                                     {{ form_widget(form.email) }}
  162.                                     {{ form_errors(form.email) }}
  163.                                 </div>
  164.                             </dd>
  165.                         </dl>
  166.                         <dl>
  167.                             <dt>
  168.                                 {{ form_label(form.contents, 'お問い合わせ内容', { 'label_attr': { 'class': 'ec-label' }}) }}
  169.                                 <br>(全角1000字以下)
  170.                             </dt>
  171.                             <dd class="content-of-inquiry">
  172.                                 <div class="ec-select{{ has_errors(form.title) ? ' error' }}">
  173.                                     {{ form_widget(form.title) }}
  174.                                     {{ form_errors(form.title) }}
  175.                                 </div>
  176.                                 {% if form.title.vars.data != 'サンプル依頼' %}
  177.                                     {% set display = 'none' %}
  178.                                 {% else %}
  179.                                     {% set display = 'block' %}
  180.                                 {% endif %}
  181.                                     {% if app.request.get('product_id') is empty %}
  182.                                         <p style="color:red; display: {{ display }}">{{ '※2つ以上のサンプルをご請求の方は下記へ商品コードと商品名をご入力ください。サンプルは3つまでご請求いただけます。'|trans }}</p>
  183.                                         <div class="ec-halfInput{{ has_errors(form.product_name) ? ' error' }}" style="display: {{ display }}">
  184.                                             <span>{{ '商品名'|trans }}</span>{{ form_widget(form.product_name, {'attr': {'class': 'add-product', 'readonly':'readonly', 'data-bs-toggle': 'modal', 'data-bs-target': '#addProduct', 'data-callBack-index': ''}}) }}
  185.                                             {{ form_errors(form.product_name) }}
  186.                                         </div>
  187.                                     {% else %}
  188.                                         <div class="ec-halfInput{{ has_errors(form.product_name) ? ' error' }}" style="display: {{ display }}">
  189.                                             <span>{{ '商品名'|trans }}</span>{{ form_widget(form.product_name, {'attr': {'readonly':'readonly'}}) }}
  190.                                             {{ form_errors(form.product_name) }}
  191.                                         </div>
  192.                                     {% endif %}
  193.                                     {% if app.request.get('product_id') %}
  194.                                         <p style="color:red; display: {{ display }}">{{ '※2つ以上のサンプルをご請求の方は下記へ商品コードと商品名をご入力ください。サンプルは3つまでご請求いただけます。'|trans }}</p>
  195.                                     {% endif %}
  196.                                     <div class="ec-halfInput{{ has_errors(form.product_name2) ? ' error' }}" style="display: {{ display }}">
  197.                                         <span>{{ '商品名'|trans }}</span>{{ form_widget(form.product_name2, {'attr': {'class': 'add-product', 'readonly':'readonly', 'data-bs-toggle': 'modal', 'data-bs-target': '#addProduct', 'data-callBack-index': '2'}}) }}
  198.                                         {{ form_errors(form.product_name2) }}
  199.                                     </div>
  200.                                     <div class="ec-halfInput{{ has_errors(form.product_name3) ? ' error' }}" style="display: {{ display }}">
  201.                                         <span>{{ '商品名'|trans }}</span>{{ form_widget(form.product_name3, {'attr': {'class': 'add-product', 'readonly':'readonly', 'data-bs-toggle': 'modal', 'data-bs-target': '#addProduct', 'data-callBack-index': '3'}}) }}
  202.                                         {{ form_errors(form.product_name3) }}
  203.                                     </div>
  204.                                     <div class="modal fade" id="addProduct" tabindex="-1" role="dialog" aria-labelledby="addProduct" aria-hidden="true">
  205.                                         <div class="modal-dialog modal-lg" role="document">
  206.                                             <div class="modal-content">
  207.                                                 <div class="modal-header">
  208.                                                     <h5 class="modal-title">{{ 'admin.order.add_product_item'|trans }}</h5>
  209.                                                     <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  210.                                                 </div>
  211.                                                 <div class="modal-body">
  212.                                                     <input id="callback" type="hidden" value=""/>
  213.                                                     {{ form_widget(searchProductModalForm.id, { attr : {'class': 'mb-3', 'placeholder': 'admin.product.multi_search_label' }}) }}
  214.                                                     {{ form_widget(searchProductModalForm.category_id) }}
  215.                                                     <button type="button" id="searchProductModalButton" class="btn btn-ec-conversion px-5 mb-4 mt-2">{{ 'admin.common.search'|trans }}</button>
  216.                                                     <div id="searchProductModalList"></div>
  217.                                                 </div>
  218.                                             </div>
  219.                                         </div>
  220.                                     </div>
  221.                                 <div class="ec-input{{ has_errors(form.contents) ? ' error' }}">
  222.                                     {{ form_widget(form.contents) }}
  223.                                     {{ form_errors(form.contents) }}
  224.                                     <p style="color:red">{{ '※ご注文に関するお問い合わせには、必ず「ご注文番号」をご記入くださいますようお願いいたします。'|trans }}</p>
  225.                                 </div>
  226.                             </dd>
  227.                         </dl>
  228.                         {# エンティティ拡張の自動出力 #}
  229.                         {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  230.                             {% if f.vars.eccube_form_options.form_theme %}
  231.                                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  232.                                 {{ form_row(f) }}
  233.                             {% else %}
  234.                                 <dl>
  235.                                     <dt>
  236.                                         {{ form_label(f) }}
  237.                                     </dt>
  238.                                     <dd>
  239.                                         <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  240.                                             {{ form_widget(f) }}
  241.                                             {{ form_errors(f) }}
  242.                                         </div>
  243.                                     </dd>
  244.                                 </dl>
  245.                             {% endif %}
  246.                         {% endfor %}
  247.                     </div>
  248.                     <div class="ec-RegisterRole__actions">
  249.                         <div class="ec-off4Grid">
  250.                             <div class="ec-off4Grid__cell">
  251.                                 <button type="submit" class="ec-blockBtn--action" name="mode" value="confirm">{{ '確認ページへ'|trans }}
  252.                                 </button>
  253.                             </div>
  254.                         </div>
  255.                     </div>
  256.                 </form>
  257.             </div>
  258.         </div>
  259.     </div>
  260. {% endblock %}