app/template/default/OrderForm/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. {% form_theme form 'Form/form_div_layout.twig' %}
  15. {% block javascript %}
  16.     <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
  17. {% endblock javascript %}
  19. {% block main %}
  20. <style>
  21.     input.contact_product_id{
  22.         width: 25%;
  23.         margin-right: 28px;
  24.         margin-left: 15px;
  25.         display: inline-block;
  26.     }
  27.     .ec-para-normal {
  28.         border-left: 5px solid #ccc;
  29.         border-bottom: 1px solid #ccc;
  30.         padding-left: 10px;
  31.         font-size: 18px;
  32.     }
  33.     .ec-borderedDefs {
  34.         border: 1px solid #ccc;
  35.     }
  36.     .ec-borderedDefs dl {
  37.         padding: unset;
  38.         border-bottom: 1px solid #ccc;
  39.     }
  40.     .ec-borderedDefs dl:last-child {
  41.         border-bottom: unset;
  42.     }
  43.     .ec-borderedDefs dt{
  44.         padding-top: 25px;
  45.         background-color: #F0F0F0;
  46.         padding-left: 10px;
  47.         border-right: 1px solid #ccc;
  48.     }
  49.     .ec-borderedDefs dd{
  50.         padding: 16px 10px 0px;
  51.     }
  53.     table {
  54.         margin: 15px auto 20px auto;
  55.         border-top: 1px solid #CCC;
  56.         border-left: 1px solid #CCC;
  57.         width: 100%;
  58.         border-collapse: collapse;
  59.         text-align: left;
  60.     }
  62.     table, caption, th, td {
  63.         margin: 0;
  64.         padding: 0;
  65.         border-collapse: collapse;
  66.         border-spacing: 0px;
  67.         empty-cells: show;
  68.         text-align: left;
  69.         font-weight: normal;
  70.     }
  72.     table th {
  73.         padding: 8px;
  74.         border-right: 1px solid #CCC;
  75.         border-bottom: 1px solid #CCC;
  76.         color: #333;
  77.         background-color: #F0F0F0;
  78.         font-weight: normal;
  79.     }
  81.     table td {
  82.         padding: 8px;
  83.         border-right: 1px solid #CCC;
  84.         border-bottom: 1px solid #CCC;
  85.     }
  86.     .ec-contactRole textarea {
  87.         min-height: 200px;
  88.     }
  89. </style>
  90.     <div class="ec-contactRole">
  91.         <div class="ec-pageHeader">
  92.             <h1>{{ '注文フォーム'|trans }}</h1>
  93.         </div>
  94.         <div class="ec-off1Grid">
  95.             <div class="ec-off1Grid__cell">
  96.                 <form method="post" action="" class="h-adr" novalidate>
  97.                     <span class="p-country-name" style="display:none;">Japan</span>
  98.                     {{ form_widget(form._token) }}
  99.                     <h3 class="ec-para-normal ec-font-bold">{{ '1. お客様情報入力　'|trans|nl2br }}<span style="color: red; font-weight: 500;">※は必須項目です</span></h3>
  100.                     <div class="ec-borderedDefs">
  101.                         <dl>
  102.                             <dt>
  103.                                 {{ form_label(form.company, '御社名', { 'label_attr': { 'class': 'ec-label' }}) }}
  104.                             </dt>
  105.                             <dd>
  106.                                 <div class="ec-input{{ has_errors(form.company) ? ' error' }}">
  107.                                     {{ form_widget(form.company) }}
  108.                                     {{ form_errors(form.company) }}
  109.                                 </div>
  110.                             </dd>
  111.                         </dl>
  112.                         <dl>
  113.                             <dt>
  114.                                 {{ form_label(form.name, 'ご担当者様氏名', { 'label_attr': { 'class': 'ec-label' }}) }}
  115.                             </dt>
  116.                             <dd>
  117.                                 <div class="ec-input{{ has_errors(form.name) ? ' error' }}">
  118.                                     {{ form_widget(form.name) }}
  119.                                     {{ form_errors(form.name) }}
  120.                                 </div>
  121.                             </dd>
  122.                         </dl>
  123.                         <dl>
  124.                             <dt>
  125.                                 {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  126.                             </dt>
  127.                             <dd>
  128.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
  129.                                     <span>{{ '〒'|trans }}</span>
  130.                                     {{ form_widget(form.postal_code) }}
  131.                                     <div class="ec-zipInputHelp">
  132.                                         <div class="ec-zipInputHelp__icon">
  133.                                             <div class="ec-icon"><img
  134.                                                     src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  135.                                             </div>
  136.                                         </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  137.                                     </div>
  138.                                     {{ form_errors(form.postal_code) }}
  139.                                 </div>
  140.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  141.                                     {{ form_widget(form.address.pref) }}
  142.                                     {{ form_errors(form.address.pref) }}
  143.                                 </div>
  144.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  145.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名 (例：千代田区神田神保町)' }}) }}
  146.                                     {{ form_errors(form.address.addr01) }}
  147.                                 </div>
  148.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  149.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名 (例：1-3-5)' , 'style' : 'margin-bottom: 0px;'}}) }}
  150.                                     {{ form_errors(form.address.addr02) }}
  151.                                 </div>
  152.                                 <p style="color:red;margin-top: 5px;">住所は2つに分けてご記入ください。マンション名は必ず記入してください。</p>
  153.                             </dd>
  154.                         </dl>
  155.                         <dl>
  156.                             <dt>
  157.                                 {{ form_label(form.phone_number, 'お電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  158.                             </dt>
  159.                             <dd>
  160.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  161.                                     {{ form_widget(form.phone_number) }}
  162.                                     {{ form_errors(form.phone_number) }}
  163.                                 </div>
  164.                             </dd>
  165.                         </dl>
  166.                         <dl>
  167.                             <dt>
  168.                                 {{ form_label(form.fax, 'FAX番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  169.                             </dt>
  170.                             <dd>
  171.                                 <div class="ec-input{{ has_errors(form.fax) ? ' error' }}">
  172.                                     {{ form_widget(form.fax) }}
  173.                                     {{ form_errors(form.fax) }}
  174.                                 </div>
  175.                             </dd>
  176.                         </dl>
  177.                         <dl>
  178.                             <dt>
  179.                                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  180.                             </dt>
  181.                             <dd>
  182.                                 <div class="ec-input{{ has_errors(form.email) ? ' error' }}">
  183.                                     {{ form_widget(form.email) }}
  184.                                     {{ form_errors(form.email) }}
  185.                                 </div>
  186.                             </dd>
  187.                         </dl>
  188.                         <dl>
  189.                             <dt>
  190.                                 {{ form_label(form.type, "お店の分類", { 'label_attr': { 'class': 'ec-label' }}) }}
  191.                                 <br>（初めてご注文のお客様
  192.                                 <br>は必ずご選択ください）
  193.                             </dt>
  194.                             <dd>
  195.                                 <div class="ec-select{{ has_errors(form.type) ? ' error' }}">
  196.                                     {{ form_widget(form.type) }}
  197.                                     {{ form_errors(form.type) }}
  198.                                     <br>その他
  199.                                     {{ form_widget(form.etc) }}
  200.                                     {{ form_errors(form.etc) }}
  201.                                 </div>
  202.                             </dd>
  203.                         </dl>
  204.                     </div>
  205.                     <h3 class="ec-para-normal ec-font-bold">{{ '2. ご注文内容'|trans|nl2br }}</h3>
  206.                     <div class="ec-borderedDefs">
  207.                         <table>
  208.                             <tbody>
  209.                                 <tr>
  210.                                     <th>
  211.                                         ＼
  212.                                     </th>
  213.                                     <th>
  214.                                         商品
  215.                                     </th>
  216.                                     <th>
  217.                                         数量
  218.                                     </th>
  219.                                     <th>
  220.                                         ネームプリント
  221.                                     </th>
  222.                                     <th>
  223.                                         版代
  224.                                     </th>
  225.                                     <th>
  226.                                         プリント色
  227.                                     </th>
  228.                                 </tr>
  229.                                 {% for i in range(1, 8) %}
  230.                                 <tr>
  231.                                     <td>{{i}}</td>
  232.                                     <td>
  233.                                         商品コード<br>
  234.                                         {{ form_widget(form['order_detail_block']['product_code' ~ i]) }}
  235.                                         {{ form_errors(form['order_detail_block']['product_code' ~ i]) }}
  236.                                         <br>商品名<br>
  237.                                         {{ form_widget(form['order_detail_block']['product_name' ~ i]) }}
  238.                                         {{ form_errors(form['order_detail_block']['product_name' ~ i]) }}
  239.                                     </td>
  240.                                     <td>
  241.                                         {{ form_widget(form['order_detail_block']['quantity' ~ i]) }}枚
  242.                                         {{ form_errors(form['order_detail_block']['quantity' ~ i]) }}
  243.                                     </td>
  244.                                     <td>
  245.                                         {{ form_widget(form['order_detail_block']['print' ~ i]) }}
  246.                                         {{ form_errors(form['order_detail_block']['print' ~ i]) }}
  247.                                     </td>
  248.                                     <td>
  249.                                         {{ form_widget(form['order_detail_block']['han' ~ i]) }}
  250.                                         {{ form_errors(form['order_detail_block']['han' ~ i]) }}
  251.                                     </td>
  252.                                     <td>
  253.                                         {{ form_widget(form['order_detail_block']['color' ~ i]) }}
  254.                                         {{ form_errors(form['order_detail_block']['color' ~ i]) }}
  255.                                     </td>
  256.                                 </tr>
  257.                                 {% endfor %}
  258.                             </tbody>
  259.                         </table>
  260.                     </div>
  263.                     <h3 class="ec-para-normal ec-font-bold">{{ '3. 備考'|trans|nl2br }}</h3>
  264.                     <div class="ec-borderedDefs">
  265.                         <dl>
  266.                             <dt>
  267.                                 {{ form_label(form.memo, '備考', { 'label_attr': { 'class': 'ec-label' }}) }}
  268.                             </dt>
  269.                             <dd>
  270.                                 <div class="ec-input{{ has_errors(form.memo) ? ' error' }}">
  271.                                     {{ form_widget(form.memo) }}
  272.                                     {{ form_errors(form.memo) }}
  273.                                 </div>
  274.                             </dd>
  275.                         </dl>
  276.                     </div>
  279.                     <div class="ec-RegisterRole__actions">
  280.                         <div class="ec-off4Grid">
  281.                             <div class="ec-off4Grid__cell">
  282.                                 <button type="submit" class="ec-blockBtn--action" name="mode" value="confirm">{{ '確認ページへ'|trans }}
  283.                                 </button>
  284.                             </div>
  285.                         </div>
  286.                     </div>
  287.                 </form>
  288.             </div>
  289.         </div>
  290.     </div>
  292. {% endblock %}