app/template/default/ProductReview4/Resource/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) LOCKON CO.,LTD. All Rights Reserved.
  6. http://www.lockon.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 = 'product_review' %}
  15. {% form_theme form 'Form/form_div_layout.twig' %}
  16. {% block stylesheet %}
  17.     <link rel="stylesheet" href="{{ asset('assets/css/fileupload/jquery.fileupload.css', 'admin') }}">
  18.     <link rel="stylesheet" href="{{ asset('assets/css/fileupload/jquery.fileupload-ui.css', 'admin') }}">
  19.     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  20.     <style type="text/css">
  21.         .c-form__fileUploadThumbnail,.c-form__fileUploadThumbnail2{
  22.                 display: inline-block;
  23.             width: 170px;
  24.             height: 170px;
  25.             background-color: #f5f6f8;
  26.             background-position: center;
  27.             background-repeat: no-repeat;
  28.             background-size: contain;
  29.             cursor: pointer;
  30.             position: relative;
  31.         }
  32.         .c-form__fileUploadThumbnail .delete-image, .c-form__fileUploadThumbnail2 .delete-image{
  33.     font-family: FontAwesome;
  34.     font-size: 18px;
  35.     line-height: 1;
  36.     color: #54687A;
  37.     padding: 5px;
  38.     background: #fff;
  39.     border-radius: 3px;
  40.     position: absolute;
  41.     top: 2px;
  42.     right: 2px;
  43.         }
  44.         .upload-zone{
  45.             margin:0;
  46.         }
  47.         #thumb, #thumb2{
  48.             line-height: 1 !important;
  49.         }
  50.     </style>
  51.     <style>
  52.         #product_review_recommend_level {
  53.             display: flex;
  54.             flex-direction: column;
  55.             flex-wrap: wrap;
  56.         }
  57.         #product_review_recommend_level label {
  58.             position: relative;
  59.             bottom: 18px;
  60.             left: 20px;
  61.             line-height: 0;
  62.         }
  63.     </style>
  64. {% endblock stylesheet %}
  66. {% block javascript %}
  67.     <script src="{{ asset('assets/js/vendor/fileupload/vendor/jquery.ui.widget.js', 'admin') }}"></script>
  68.     <script src="{{ asset('assets/js/vendor/fileupload/jquery.iframe-transport.js', 'admin') }}"></script>
  69.     <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload.js', 'admin') }}"></script>
  70.     <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-process.js', 'admin') }}"></script>
  71.     <script src="{{ asset('assets/js/vendor/fileupload/jquery.fileupload-validate.js', 'admin') }}"></script>
  72.     <script>var bootstrapTooltip = $.fn.tooltip.noConflict();</script>
  73.     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  74.    <script>
  75.         $(function() {
  76.             var hideThumbnail = function() {
  77.                 if ($('#thumb div').length > 0) {
  78.                     $('#icon_no_image').css('display', 'none');
  79.                 } else {
  80.                     $('#icon_no_image').css('display', '');
  81.                 }
  82.             };
  84.             var proto_img = '<div class="c-form__fileUploadThumbnail" style="background-image:url(\'__path__\');">' +
  85.                 '<a class="delete-image"><i class="fa fa-times" aria-hidden="true"></i></a>' +
  86.                 '</div>';
  87.             var upload_file = $('#{{ form.upload_file.vars.id }}').val();
  88.             if (upload_file != '') {
  89.                 var filename = $('#{{ form.upload_file.vars.id }}').val();
  90.                 if (upload_file == '{{ oldUploadFile }}') {
  91.                     var path = '{{ asset('', 'save_image') }}' + filename;
  92.                 } else {
  93.                     var path = '{{ asset('', 'temp_image') }}' + filename;
  94.                 }
  95.                 var $img = $(proto_img.replace(/__path__/g, path));
  96.                 $('#{{ form.upload_file.vars.id }}').val(filename);
  98.                 $('#thumb').append($img);
  99.                 hideThumbnail();
  100.             }
  101.             hideThumbnail();
  103.             $('#{{ form.upload_file_file.vars.id }}').fileupload({
  104.                 url: "{{ url('product_review_upload_file_add') }}",
  105.                 type: 'post',
  106.                 dataType: 'json',
  107.                 dropZone: $('#upload-zone'),
  108.                 done: function(e, data) {
  109.                     $('.progress').hide();
  110.                     var path = '{{ asset('', 'temp_image') }}/' + data.result.filename;
  111.                     var $img = $(proto_img.replace(/__path__/g, path));
  112.                     $('#{{ form.upload_file.vars.id }}').val(data.result.filename);
  114.                     $('#thumb').append($img);
  115.                     hideThumbnail();
  116.                 },
  117.                 fail: function(e, data) {
  118.                     alert('{{ 'admin.common.upload_error'|trans }}');
  119.                 },
  120.                 always: function(e, data) {
  121.                     $('.progress').hide();
  122.                     $('.progress .progress-bar').width('0%');
  123.                 },
  124.                 start: function(e, data) {
  125.                     if ($('.c-form__fileUploadThumbnail').length >= 1) {
  126.                         $.each($('.delete-image'), function(index, delete_image) {
  127.                             delete_image.click();
  128.                         });
  129.                     }
  130.                     $('.progress').show();
  131.                     $('#thumb').find('div').remove();
  132.                     $('#{{ form.upload_file.vars.id }}').val('');
  133.                 },
  134.                 acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
  135.                 maxFileSize: 10000000,
  136.                 maxNumberOfFiles: 1,
  137.                 progressall: function(e, data) {
  138.                     var progress = parseInt(data.loaded / data.total * 100, 10);
  139.                     $('.progress .progress-bar').css(
  140.                         'width',
  141.                         progress + '%'
  142.                     );
  143.                 },
  144.                 processalways: function(e, data) {
  145.                     if (data.files.error) {
  146.                         alert("{{ 'admin.common.upload_error'|trans }}");
  147.                     }
  148.                 }
  149.             });
  151.             $('#thumb').on('click', '.delete-image', function() {
  152.                 $('#{{ form.upload_file.vars.id }}').val('');
  153.                 var thumbnail = $(this).parents('div.c-form__fileUploadThumbnail');
  154.                 $(thumbnail).remove();
  155.                 hideThumbnail();
  156.             });
  158.             // 画像アップロード
  159.             // $('#file_upload').on('click', function() {
  160.             //     $('#{{ form.upload_file_file.vars.id }}').click();
  161.             // });
  162.         });
  165.     </script>
  166. {% endblock javascript %}
  168. {% block main %}
  169.     <div class="ec-registerRole">
  170.         <div class="ec-pageHeader">
  171.             <h1>{{ 'product_review.front.review.title'|trans }}</h1>
  172.         </div>
  173.         <div class="ec-off1Grid">
  174.             <div class="ec-off1Grid__cell">
  175.                 <form method="post" action="{{ url('product_review_index', { id: Product.id }) }}">
  176.                     {{ form_widget(form._token) }}
  177.                     <p class="ec-para-nomal">{{ 'product_review.front.review.description'|trans }}</p>
  178.                     <div class="ec-borderedDefs">
  179.                         {# 商品名 #}
  180.                         <dl>
  181.                             <dt>
  182.                                 <label class="ec-label">{{ 'product_review.front.review.product_name'|trans }}</label>
  183.                             </dt>
  184.                             <dd>
  185.                                 <div class="ec-input">
  186.                                     {{ Product.name }}
  187.                                 </div>
  188.                             </dd>
  189.                         </dl>
  190.                         {# 投稿者名 #}
  191.                         <dl>
  192.                             <dt>
  193.                                 {{ form_label(form.reviewer_name, '', {'label_attr': {'class': 'ec-label'}}) }}
  194.                             </dt>
  195.                             <dd>
  196.                                 <div class="ec-input{{ has_errors(form.reviewer_name) ? ' error' }}">
  197.                                     {{ form_widget(form.reviewer_name) }}
  198.                                     {{ form_errors(form.reviewer_name) }}
  199.                                 </div>
  200.                             </dd>
  201.                         </dl>
  202.                         {# 投稿者URL #}
  203.                         <dl>
  204.                             <dt>
  205.                                 {{ form_label(form.reviewer_url, '', {'label_attr': {'class': 'ec-label'}}) }}
  206.                             </dt>
  207.                             <dd>
  208.                                 <div class="ec-input{{ has_errors(form.reviewer_url) ? ' error' }}">
  209.                                     {{ form_widget(form.reviewer_url) }}
  210.                                     {{ form_errors(form.reviewer_url) }}
  211.                                 </div>
  212.                             </dd>
  213.                         </dl>
  214.                         {# 性別 #}
  215.                         <dl>
  216.                             <dt>
  217.                                 {{ form_label(form.sex, 'common.gender', {'label_attr': {'class': 'ec-label'}}) }}
  218.                             </dt>
  219.                             <dd>
  220.                                 <div class="ec-radio{{ has_errors(form.sex) ? ' error' }}">
  221.                                     {{ form_widget(form.sex) }}
  222.                                     {{ form_errors(form.sex) }}
  223.                                 </div>
  224.                             </dd>
  225.                         </dl>
  226.                         {# おすすめレベル #}
  227.                         <dl>
  228.                             <dt>
  229.                                 {{ form_label(form.recommend_level, '', {'label_attr': {'class': 'ec-label'}}) }}
  230.                             </dt>
  231.                             <dd>
  232.                                 <div class="ec-radio{{ has_errors(form.recommend_level) ? ' error' }}">
  233.                                     {{ form_widget(form.recommend_level) }}
  234.                                     {{ form_errors(form.recommend_level) }}
  235.                                 </div>
  236.                             </dd>
  237.                         </dl>
  238.                         {# タイトル #}
  239.                         <dl>
  240.                             <dt>
  241.                                 {{ form_label(form.title, '', {'label_attr': {'class': 'ec-label'}}) }}
  242.                             </dt>
  243.                             <dd>
  244.                                 <div class="ec-input{{ has_errors(form.title) ? ' error' }}">
  245.                                     {{ form_widget(form.title) }}
  246.                                     {{ form_errors(form.title) }}
  247.                                 </div>
  248.                             </dd>
  249.                         </dl>
  250.                         {# コメント #}
  251.                         <dl>
  252.                             <dt>
  253.                                 {{ form_label(form.comment, '', {'label_attr': {'class': 'ec-label'}}) }}
  254.                             </dt>
  255.                             <dd>
  256.                                 <div class="ec-input{{ has_errors(form.comment) ? ' error' }}">
  257.                                     {{ form_widget(form.comment) }}
  258.                                     {{ form_errors(form.comment) }}
  259.                                 </div>
  260.                             </dd>
  261.                         </dl>
  264.                          <dl>
  265.                             <dt>
  266.                                 {{ form_label(form.upload_file, '图片', { 'label_attr': { 'class': 'ec-label' }}) }}
  267.                             </dt>
  268.                             <dd>
  269.                                 <div class="col mb-2">
  270.                                     <div class="progress" style="display: none;">
  271.                                         <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
  272.                                     </div>
  273.                                     <div id="thumb" class="c-form__fileUploadThumbnails clearfix"></div>
  274.                                     {{ form_widget(form.upload_file, { attr : { style : 'display:none;' } }) }}
  275.                                     <div id="upload-zone" class="media py-5 border-ec-dashed mb-2 rounded">
  276.                                         <div class="media-body">
  277.                                             <i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true"></i>
  278.                                             {{ form_widget(form.upload_file_file, { attr : { accept : 'image/*', style : 'display:none;' } }) }}
  279.                                             {{ form_errors(form.upload_file) }}
  280.                                             <a class="btn btn-ec-regular mr-2" onclick="$('#product_review_upload_file_file').click()">
  281.                                                 {{ 'admin.common.file_select'|trans }}
  282.                                             </a>
  283.                                         </div><!-- /.media-body -->
  284.                                     </div><!-- /.media -->
  285.                                 </div>
  288.                             </dd>
  289.                         </dl>
  293.                     </div>
  294.                     <div class="ec-registerRole__actions">
  295.                         <div class="ec-off4Grid">
  296.                             <div class="ec-off4Grid__cell">
  297.                                 <button class="ec-blockBtn--action" type="submit" name="mode"
  298.                                         value="confirm">{{ 'product_review.front.review.confirm'|trans }}</button>
  299.                                 <a class="ec-blockBtn--cancel"
  300.                                    href="{{ url('product_detail', { id: Product.id }) }}">{{ 'product_review.front.review.back'|trans }}</a>
  301.                             </div>
  302.                         </div>
  303.                     </div>
  304.                 </form>
  305.             </div>
  306.         </div>
  307.     </div>
  308. {% endblock %}