src/Eccube/Resource/template/admin/Setting/Shop/mail.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 '@admin/default_frame.twig' %}
  9. {% set menus = ['setting', 'shop', 'shop_mail'] %}
  10. {% block title %}{{ 'admin.setting.shop.mail_setting'|trans }}{% endblock %}
  11. {% block sub_title %}{{ 'admin.setting.shop'|trans }}{% endblock %}
  12. {% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
  13. {% block stylesheet %}
  14.     <style>
  15.         .ui-resizable-se {
  16.             right: -3px;
  17.             bottom: -3px;
  18.         }
  19.     </style>
  20. {% endblock %}
  21. {% block javascript %}
  22.     <script>
  23.         $(function() {
  24.             $(window).on('pageshow', function() {
  25.                 var tmp_select =  $('#mail_template[name="mail[template]"] option[selected]').val();
  26.                 $('#mail_template[name="mail[template]"]').val(tmp_select);
  27.             });
  28.             $('#mail_template').on('change', function() {
  29.                 var id = $(this).val()
  30.                 if (id) {
  31.                     location.href = '{{ url('admin_setting_shop_mail') }}/' + id;
  32.                 } else {
  33.                     location.href = '{{ url('admin_setting_shop_mail') }}';
  34.                 }
  35.             });
  36.             ace.require('ace/ext/language_tools');
  37.             var editor = ace.edit('editor');
  38.             editor.session.setMode('ace/mode/twig');
  39.             editor.setTheme('ace/theme/tomorrow');
  40.             editor.setValue("{{ form.tpl_data.vars.value|escape('js') }}");
  41.             editor.setOptions({
  42.                 enableBasicAutocompletion: true,
  43.                 enableSnippets: true,
  44.                 enableLiveAutocompletion: true,
  45.                 showInvisibles: true
  46.             });
  47.             {% if form.html_tpl_data.vars.value %}
  48.                 var html_editor = ace.edit('html_editor');
  49.                 html_editor.session.setMode('ace/mode/twig');
  50.                 html_editor.setTheme('ace/theme/tomorrow');
  51.                 html_editor.setValue("{{ form.html_tpl_data.vars.value|escape('js') }}");
  52.                 html_editor.setOptions({
  53.                     enableBasicAutocompletion: true,
  54.                     enableSnippets: true,
  55.                     enableLiveAutocompletion: true,
  56.                     showInvisibles: true
  57.                 });
  58.             {% endif %}
  59.             $("#editor").resizable({
  60.                 resize: function (event, ui) {
  61.                     editor.resize();
  62.                 }
  63.             });
  64.             $("#html_editor").resizable({
  65.                 resize: function (event, ui) {
  66.                     editor.resize();
  67.                 }
  68.             });
  69.             $('#form1').on('submit', function() {
  70.                 $('#mail_tpl_data').val(editor.getValue());
  71.                 {% if form.html_tpl_data.vars.value %}
  72.                     $('#mail_html_tpl_data').val(html_editor.getValue());
  73.                 {% endif %}
  74.             });
  75.             // HTMLメールモーダル表示
  76.             $('#htmlPreviewModal').on('show.bs.modal', function (event) {
  77.                 var html = $('#viewEmail');
  78.                 html.children().remove();
  79.                 // HTMLを読み込んでモーダルに表示
  80.                 $.ajax({
  81.                     type: 'POST',
  82.                     dataType: 'html',
  83.                     data: {
  84.                         'html_body' : html_editor.getValue(),
  85.                     },
  86.                     url: '{{ url('admin_setting_shop_mail_preview') }}',
  87.                     success: function(data) {
  88.                         // モーダルに結果を書き出し.
  89.                         $('#viewEmail').html(data);
  90.                     },
  91.                     error: function() {
  92.                         alert('preview html mail failed.');
  93.                     }
  94.                 });
  95.             });
  96.             $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
  97.                 var activated_tab = e.target;
  98.                 var id = $(activated_tab).attr('id');
  99.                 if (id == 'menu__{{ form.html_tpl_data.vars.id }}') {
  100.                     $('#preview_button').attr('style', 'display:blocked;');
  101.                 } else {
  102.                     $('#preview_button').attr('style', 'display:none;');
  103.                 }
  104.             });
  105.         });
  106.     </script>
  107. {% endblock javascript %}
  108. {% block main %}
  109.     <form name="form1" role="form" class="form-horizontal" id="form1" method="post" action="">
  110.         {{ form_widget(form._token) }}
  111.         <div class="c-contentsArea__cols">
  112.             <div class="c-contentsArea__primaryCol">
  113.                 <div class="c-primaryCol">
  114.                     <div class="card rounded border-0 mb-4">
  115.                         <div class="card-header"><span class="card-title">{{ 'admin.setting.shop.mail.mail_template_edit'|trans }}</span></div>
  116.                         <div class="card-body">
  117.                             <div class="row mb-2">
  118.                                 <div class="col-2">
  119.                                     <div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.setting.shop.mail.mail_template'|trans }}">
  120.                                         <span>{{ 'admin.setting.shop.mail.mail_template'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i>
  121.                                     </div>
  122.                                 </div>
  123.                                 <div class="col-10">
  124.                                     {{ form_widget(form.template) }}
  125.                                     {{ form_errors(form.template) }}
  126.                                 </div>
  127.                             </div>
  128.                             <div class="row mb-2">
  129.                                 <div class="col-2"><span>{{ 'admin.setting.shop.mail.mail_subject'|trans }}</span><span class="badge bg-primary ms-1">{{ 'admin.common.required'|trans }}</span></div>
  130.                                 <div class="col-10">
  131.                                     {{ form_widget(form.mail_subject) }}
  132.                                     {{ form_errors(form.mail_subject) }}
  133.                                 </div>
  134.                             </div>
  135.                             <div class="row mb-2">
  136.                                 <div class="col-2"><span>{{ 'admin.setting.shop.mail.mail_body'|trans }}</span><span class="badge bg-primary ms-1">{{ 'admin.common.required'|trans }}</span></div>
  137.                                 <div class="col-10">
  138.                                     {# タブ表示 #}
  139.                                     {% if id is not null %}
  140.                                     <ul class="nav nav-tabs text-center" role="tablist">
  141.                                         <li class="nav-item me-2" style="border: 1px solid #ced4da; padding:0;">
  142.                                             <a id="menu__{{ form.tpl_data.vars.id }}" href="#detail_box__tpl_data" class="nav-link active" data-bs-toggle="tab"><span>{{ 'admin.setting.shop.mail.mail_text'|trans }}</span></a>
  143.                                         </li>
  144.                                         {% if form.html_tpl_data.vars.value %}
  145.                                         <li class="nav-item me-2" style="border: 1px solid #ced4da; padding:0;">
  146.                                             <a id="menu__{{ form.html_tpl_data.vars.id }}" href="#detail_box__html_tpl_data" class="nav-link" data-bs-toggle="tab"><span>{{ 'admin.setting.shop.mail.mail_html'|trans }}</span></a>
  147.                                         </li>
  148.                                         {% endif %}
  149.                                         <div class="col-1">
  150.                                             <div class="d-inline-block">
  151.                                                 <div class="btn-group" role="group">
  152.                                                     <button type="button" id="preview_button" class="btn w-100 text-nowrap btn-ec-regular" style="display:none;" data-bs-toggle="modal" data-bs-target="#htmlPreviewModal">
  153.                                                         {{ 'admin.setting.shop.mail.preview'|trans }}
  154.                                                     </button>
  155.                                                 </div>
  156.                                             </div>
  157.                                         </div>
  158.                                     </ul>
  159.                                     {% endif %}
  160.                                     <div class="tab-content">
  161.                                         <div id="detail_box__tpl_data" class="mb-3 tab-pane active">
  162.                                             {{ form_label(form.tpl_data) }}
  163.                                             <div id="editor" style="height: 480px" class="form-control{{ has_errors(form.tpl_data) ? ' is-invalid' }}"></div>
  164.                                             <div style="display: none">{{ form_widget(form.tpl_data) }}</div>
  165.                                             {{ form_errors(form.tpl_data) }}
  166.                                         </div>
  167.                                         {% if form.html_tpl_data.vars.value %}
  168.                                         <div id="detail_box__html_tpl_data" class="mb-3 tab-pane">
  169.                                             {{ form_label(form.html_tpl_data) }}
  170.                                             <div id="html_editor" style="height: 480px" class="form-control{{ has_errors(form.html_tpl_data) ? ' is-invalid' }}"></div>
  171.                                             <div style="display: none">{{ form_widget(form.html_tpl_data) }}</div>
  172.                                             {{ form_errors(form.html_tpl_data) }}
  173.                                         </div>
  174.                                         {% endif %}
  175.                                     </div>
  176.                                 </div>
  177.                             </div>
  178.                             {# エンティティ拡張の自動出力 #}
  179.                             {% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
  180.                                 {% if f.vars.eccube_form_options.form_theme %}
  181.                                     {% form_theme f f.vars.eccube_form_options.form_theme %}
  182.                                     {{ form_row(f) }}
  183.                                 {% else %}
  184.                                     <div class="row mb-2">
  185.                                         <div class="col-2"><span>{{ f.vars.label|trans }}</span></div>
  186.                                         <div class="col-10">
  187.                                             {{ form_widget(f) }}
  188.                                             {{ form_errors(f) }}
  189.                                         </div>
  190.                                     </div>
  191.                                 {% endif %}
  192.                             {% endfor %}
  193.                         </div>
  194.                     </div>
  195.                 </div>
  196.             </div>
  197.         </div>
  198.         <div class="c-conversionArea" id="aside_column">
  199.             <div class="c-conversionArea__container">
  200.                 <div class="row justify-content-between align-items-center">
  201.                     <div class="col-6">
  202.                         <div class="c-conversionArea__leftBlockItem">
  203.                         </div>
  204.                     </div>
  205.                     <div class="col-6">
  206.                         <div id="ex-conversion-action" class="row align-items-center justify-content-end">
  207.                             <div class="col-auto">
  208.                                 <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
  209.                             </div>
  210.                         </div>
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </form>
  216.     <!-- HTMLメールを確認するモーダル -->
  217.     <div class="modal fade" id="htmlPreviewModal" tabindex="-1" role="dialog" aria-labelledby="htmlPreviewModal" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
  218.         <div class="modal-dialog modal-lg" role="document">
  219.             <div class="modal-content">
  220.                 <div class="modal-header">
  221.                     <h5 class="modal-title fw-bold">{{ 'admin.setting.shop.mail.preview'|trans }}</h5>
  222.                     <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  223.                 </div>
  224.                 <div class="modal-body">
  225.                     <div class="bg-light p-4 bg-ec-formGray" id="viewEmail" style="word-wrap: break-word; word-break:break-all">
  226.                     </div>
  227.                 </div>
  228.                 <div class="modal-footer">
  229.                     <button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ 'admin.common.close'|trans }}</button>
  230.                 </div>
  231.             </div>
  232.         </div>
  233.     </div>
  234. {% endblock %}