app/template/default/Purchase/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. <script>
  18. $(document).ready(function() {
  19.   var dropArea = $('#drop-area');
  20.   var fileInput = $('#contact_attachment');
  21.   var filePreview = $('#file-preview');
  22.   var uploadButton = $('#upload-button');
  24.   dropArea.on('dragenter', function(e) {
  25.     e.preventDefault();
  26.     dropArea.addClass('active');
  27.   });
  29.   dropArea.on('dragover', function(e) {
  30.     e.preventDefault();
  31.   });
  33.   dropArea.on('dragleave', function() {
  34.     dropArea.removeClass('active');
  35.   });
  37.   dropArea.on('drop', function(e) {
  38.     e.preventDefault();
  39.     dropArea.removeClass('active');
  41.     var files = e.originalEvent.dataTransfer.files;
  42.     handleFiles(files);
  43.   });
  45.   fileInput.on('change', function() {
  46.     alert("変更");
  47.     var files = fileInput[0].files;
  48.     handleFiles(files);
  49.   });
  51.   function handleFiles(files) {
  52.     // contact_attachmentにファイルを設定
  53.     fileInput.prop('files', files);
  55.     filePreview.empty(); // プレビュー領域をクリア
  57.     for (var i = 0; i < files.length; i++) {
  58.       var file = files[i];
  59.       var reader = new FileReader();
  61.       reader.onload = function(e) {
  62.         var image = $('<div class="preview-item">')
  63.           .append($('<img>').attr('src', e.target.result))
  65.           .data('file', file); // ファイルをデータ属性に保存
  66.         filePreview.append(image);
  67.       };
  69.       reader.readAsDataURL(file);
  70.     }
  72.     if (files.length > 0) {
  73.       uploadButton.prop('disabled', false);
  74.     } else {
  75.       uploadButton.prop('disabled', true);
  76.     }
  77.   }
  79.   // プレビュー画像のバツボタンがクリックされたとき
  80.   filePreview.on('click', '.close-button', function() {
  81.     var previewItem = ('.preview-item');
  82.     previewItem.remove();
  84.     // アップロードボタンを無効にするかチェック
  85.     if (filePreview.children().length === 0) {
  86.       uploadButton.prop('disabled', true);
  87.     }
  89.     // contact_attachmentから画像を削除
  90.     var removedFile = previewItem.data('file');
  91.     var currentFiles = fileInput[0].files;
  92.     var newFiles = Array.from(currentFiles).filter(function(file) {
  93.       return file !== removedFile;
  94.     });
  95.     fileInput[0].files = newFiles;
  96.   });
  98.   uploadButton.on('click', function() {
  99.     // フォームを送信するか、アップロード処理を実行する
  100.     // ここにアップロード処理を追加
  101.   });
  102. });
  103. </script>
  107. {% endblock javascript %}
  109. {% block main %}
  111.     <div class="ec-contactRole">
  112.         <div class="ec-pageHeader">
  113.             <h1>{{ 'まとめて買い取り査定フォーム'|trans }}</h1>
  114.         </div>
  115.         <div class="ec-off1Grid">
  116.             <div class="ec-off1Grid__cell">
  117.                 <form method="post" action="{{ url('purchase') }}" class="h-adr"  enctype="multipart/form-data" novalidate>
  118.                     <span class="p-country-name" style="display:none;">Japan</span>
  119.                     {{ form_widget(form._token) }}
  120.                     <p class="ec-para-normal">{{ 'こちらは「まとめて買い取り査定フォーム」となります。個別に査定していただきたいカードは画像の添付をしいただけますと幸いです。
  121. 内容によっては回答をさしあげるのにお時間をいただくこともございます。
  122. また、休業日は翌営業日以降の対応となりますのでご了承ください。'|trans|nl2br }}</p>
  123.                     <div class="ec-borderedDefs">
  124.                         <dl>
  125.                             <dt>
  126.                                 {{ form_label(form.name, 'お名前', { 'label_attr': { 'class': 'ec-label' }}) }}
  127.                             </dt>
  128.                             <dd>
  129.                                 <div class="ec-halfInput{{ has_errors(form.name.name01, form.name.name02) ? ' error' }}">
  130.                                     {{ form_widget(form.name.name01, {'attr': { 'placeholder': '姓' }}) }}
  131.                                     {{ form_widget(form.name.name02, {'attr': { 'placeholder': '名' }}) }}
  132.                                     {{ form_errors(form.name.name01) }}
  133.                                     {{ form_errors(form.name.name02) }}
  134.                                 </div>
  135.                             </dd>
  136.                         </dl>
  137.                         <dl>
  138.                             <dt>
  139.                                 {{ form_label(form.kana, 'お名前(カナ)', {'label_attr': {'class': 'ec-label'}}) }}
  140.                             </dt>
  141.                             <dd>
  142.                                 <div class="ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ' error' }}">
  143.                                     {{ form_widget(form.kana.kana01, {'attr': { 'placeholder': 'セイ' }}) }}
  144.                                     {{ form_widget(form.kana.kana02, {'attr': { 'placeholder': 'メイ' }}) }}
  145.                                     {{ form_errors(form.kana.kana01) }}
  146.                                     {{ form_errors(form.kana.kana02) }}
  147.                                 </div>
  148.                             </dd>
  149.                         </dl>
  150.                         <dl>
  151.                             <dt>
  152.                                 {{ form_label(form.address, '住所', { 'label_attr': { 'class': 'ec-label' }}) }}
  153.                             </dt>
  154.                             <dd>
  155.                                 <div class="ec-zipInput{{ has_errors(form.postal_code) ? ' error' }}">
  156.                                     <span>{{ '〒'|trans }}</span>
  157.                                     {{ form_widget(form.postal_code) }}
  158.                                     <div class="ec-zipInputHelp">
  159.                                         <div class="ec-zipInputHelp__icon">
  160.                                             <div class="ec-icon"><img
  161.                                                     src="{{ asset('assets/icon/question-white.svg') }}" alt="">
  162.                                             </div>
  163.                                         </div><a href="https://www.post.japanpost.jp/zipcode/" target="_blank"><span>{{ '郵便番号検索'|trans }}</span></a>
  164.                                     </div>
  165.                                     {{ form_errors(form.postal_code) }}
  166.                                 </div>
  167.                                 <div class="ec-select{{ has_errors(form.address.pref) ? ' error' }}">
  168.                                     {{ form_widget(form.address.pref) }}
  169.                                     {{ form_errors(form.address.pref) }}
  170.                                 </div>
  171.                                 <div class="ec-input{{ has_errors(form.address.addr01) ? ' error' }}">
  172.                                     {{ form_widget(form.address.addr01, { 'attr': { 'placeholder': '市区町村名(例：大阪市北区)' }}) }}
  173.                                     {{ form_errors(form.address.addr01) }}
  174.                                 </div>
  175.                                 <div class="ec-input{{ has_errors(form.address.addr02) ? ' error' }}">
  176.                                     {{ form_widget(form.address.addr02,  { 'attr': { 'placeholder': '番地・ビル名(例：西梅田1丁目6-8)' }}) }}
  177.                                     {{ form_errors(form.address.addr02) }}
  178.                                 </div>
  179.                             </dd>
  180.                         </dl>
  181.                         <dl>
  182.                             <dt>
  183.                                 {{ form_label(form.phone_number, '電話番号', { 'label_attr': { 'class': 'ec-label' }}) }}
  184.                             </dt>
  185.                             <dd>
  186.                                 <div class="ec-telInput{{ has_errors(form.phone_number) ? ' error' }}">
  187.                                     {{ form_widget(form.phone_number) }}
  188.                                     {{ form_errors(form.phone_number) }}
  189.                                 </div>
  190.                             </dd>
  191.                         </dl>
  192.                         <dl>
  193.                             <dt>
  194.                                 {{ form_label(form.email, 'メールアドレス', { 'label_attr': { 'class': 'ec-label' }}) }}
  195.                             </dt>
  196.                             <dd>
  197.                                 <div class="ec-input{{ has_errors(form.email) ? ' error' }}">
  198.                                     {{ form_widget(form.email) }}
  199.                                     {{ form_errors(form.email) }}
  200.                                 </div>
  201.                             </dd>
  202.                         </dl>
  203.                         <!--  添付ファイル項目を追加 -->
  204.                        <dl>
  205.                          <dt>
  206.                             
  207.                            {{ form_label(form.attachment, '添付ファイル', { 'label_attr': { 'class': 'ec-label' }}) }}
  208.                            
  209.                          </dt>
  210.                          <dd>
  211.                          <div id="file-input-container">
  212.                            <div class="ec-input{{ has_errors(form.attachment) ? ' error' }}">
  213.                              {{ form_widget(form.attachment) }}
  214.                              {{ form_errors(form.attachment) }}
  215.                              {{ form_widget(form.filename) }}
  216.                            </div>
  217.                            </div>
  218.                            <div id="drop-area">
  219.                             <p class="fs12">ファイルをここにドラッグアンドドロップしてください。<br />複数アップロードする場合は一度にまとめてドラッグアンドドロップしてください。<br />アップロードする画像を選択し直す事が可能です。</p>
  220.                             
  221.                             
  222.                             </div>
  223.                             <div id="file-preview"></div>
  224.                            {% if form.filename.vars.data != '' %}
  225.                             {% for key, imgurl in form.filename.vars.data %}
  226.                              <img src="/html/upload/save_image{{ asset(imgurl, 'save_image') }}" style="width: 150px !important;" />
  227.                             {% endfor %}
  228.                            {% endif %}
  229.                          </dd>
  230.                        </dl>
  231.                         <dl>
  232.                             <dt>
  233.                                 {{ form_label(form.contents, '備考欄', { 'label_attr': { 'class': 'ec-label' }}) }}
  234.                             </dt>
  235.                             <dd>
  236.                                 <div class="ec-input{{ has_errors(form.contents) ? ' error' }}">
  237.                                     {{ form_widget(form.contents) }}
  238.                                     {{ form_errors(form.contents) }}
  239.                                 </div>
  240.                                 <!--<p>{{ 'ご注文に関するお問い合わせには、必ず「ご注文番号」をご記入くださいますようお願いいたします。'|trans }}</p>-->
  241.                             </dd>
  242.                         </dl>
  243.                         {# エンティティ拡張の自動出力 #}
  244.                         {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  245.                             {% if f.vars.eccube_form_options.form_theme %}
  246.                                 {% form_theme f f.vars.eccube_form_options.form_theme %}
  247.                                 {{ form_row(f) }}
  248.                             {% else %}
  249.                                 <dl>
  250.                                     <dt>
  251.                                         {% set label_class =  f.vars.label_attr.class is defined ? f.vars.label_attr.class : '' %}
  252.                                         {{ form_label(f, f.vars.label, { 'label_attr': {'class': label_class ~ ' ec-label' }}) }}
  253.                                     </dt>
  254.                                     <dd>
  255.                                         <div class="{{ f.vars.eccube_form_options.style_class }}{{ has_errors(f) ? ' error' }}">
  256.                                             {{ form_widget(f) }}
  257.                                             {{ form_errors(f) }}
  258.                                         </div>
  259.                                     </dd>
  260.                                 </dl>
  261.                             {% endif %}
  262.                         {% endfor %}
  263.                     </div>
  264.                     <div class="ec-RegisterRole__actions">
  265.                         <div class="ec-off4Grid">
  266.                             <div class="ec-off4Grid__cell">
  267.                                 <button type="submit" class="ec-blockBtn--action" name="mode" value="confirm">{{ '確認ページへ'|trans }}
  268.                                 </button>
  269.                             </div>
  270.                         </div>
  271.                     </div>
  272.                 </form>
  273.             </div>
  274.         </div>
  275.     </div>
  277. {% endblock %}