{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}
{% set menus = ['setting', 'shop', 'shop_mail'] %}
{% block title %}{{ 'admin.setting.shop.mail_setting'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.setting.shop'|trans }}{% endblock %}
{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
{% block stylesheet %}
<style>
.ui-resizable-se {
right: -3px;
bottom: -3px;
}
</style>
{% endblock %}
{% block javascript %}
<script>
$(function() {
$(window).on('pageshow', function() {
var tmp_select = $('#mail_template[name="mail[template]"] option[selected]').val();
$('#mail_template[name="mail[template]"]').val(tmp_select);
});
$('#mail_template').on('change', function() {
var id = $(this).val()
if (id) {
location.href = '{{ url('admin_setting_shop_mail') }}/' + id;
} else {
location.href = '{{ url('admin_setting_shop_mail') }}';
}
});
ace.require('ace/ext/language_tools');
var editor = ace.edit('editor');
editor.session.setMode('ace/mode/twig');
editor.setTheme('ace/theme/tomorrow');
editor.setValue("{{ form.tpl_data.vars.value|escape('js') }}");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
showInvisibles: true
});
{% if form.html_tpl_data.vars.value %}
var html_editor = ace.edit('html_editor');
html_editor.session.setMode('ace/mode/twig');
html_editor.setTheme('ace/theme/tomorrow');
html_editor.setValue("{{ form.html_tpl_data.vars.value|escape('js') }}");
html_editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
showInvisibles: true
});
{% endif %}
$("#editor").resizable({
resize: function (event, ui) {
editor.resize();
}
});
$("#html_editor").resizable({
resize: function (event, ui) {
editor.resize();
}
});
$('#form1').on('submit', function() {
$('#mail_tpl_data').val(editor.getValue());
{% if form.html_tpl_data.vars.value %}
$('#mail_html_tpl_data').val(html_editor.getValue());
{% endif %}
});
// HTMLメールモーダル表示
$('#htmlPreviewModal').on('show.bs.modal', function (event) {
var html = $('#viewEmail');
html.children().remove();
// HTMLを読み込んでモーダルに表示
$.ajax({
type: 'POST',
dataType: 'html',
data: {
'html_body' : html_editor.getValue(),
},
url: '{{ url('admin_setting_shop_mail_preview') }}',
success: function(data) {
// モーダルに結果を書き出し.
$('#viewEmail').html(data);
},
error: function() {
alert('preview html mail failed.');
}
});
});
$('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
var activated_tab = e.target;
var id = $(activated_tab).attr('id');
if (id == 'menu__{{ form.html_tpl_data.vars.id }}') {
$('#preview_button').attr('style', 'display:blocked;');
} else {
$('#preview_button').attr('style', 'display:none;');
}
});
});
</script>
{% endblock javascript %}
{% block main %}
<form name="form1" role="form" class="form-horizontal" id="form1" method="post" action="">
{{ form_widget(form._token) }}
<div class="c-contentsArea__cols">
<div class="c-contentsArea__primaryCol">
<div class="c-primaryCol">
<div class="card rounded border-0 mb-4">
<div class="card-header"><span class="card-title">{{ 'admin.setting.shop.mail.mail_template_edit'|trans }}</span></div>
<div class="card-body">
<div class="row mb-2">
<div class="col-2">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.setting.shop.mail.mail_template'|trans }}">
<span>{{ 'admin.setting.shop.mail.mail_template'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col-10">
{{ form_widget(form.template) }}
{{ form_errors(form.template) }}
</div>
</div>
<div class="row mb-2">
<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>
<div class="col-10">
{{ form_widget(form.mail_subject) }}
{{ form_errors(form.mail_subject) }}
</div>
</div>
<div class="row mb-2">
<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>
<div class="col-10">
{# タブ表示 #}
{% if id is not null %}
<ul class="nav nav-tabs text-center" role="tablist">
<li class="nav-item me-2" style="border: 1px solid #ced4da; padding:0;">
<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>
</li>
{% if form.html_tpl_data.vars.value %}
<li class="nav-item me-2" style="border: 1px solid #ced4da; padding:0;">
<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>
</li>
{% endif %}
<div class="col-1">
<div class="d-inline-block">
<div class="btn-group" role="group">
<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">
{{ 'admin.setting.shop.mail.preview'|trans }}
</button>
</div>
</div>
</div>
</ul>
{% endif %}
<div class="tab-content">
<div id="detail_box__tpl_data" class="mb-3 tab-pane active">
{{ form_label(form.tpl_data) }}
<div id="editor" style="height: 480px" class="form-control{{ has_errors(form.tpl_data) ? ' is-invalid' }}"></div>
<div style="display: none">{{ form_widget(form.tpl_data) }}</div>
{{ form_errors(form.tpl_data) }}
</div>
{% if form.html_tpl_data.vars.value %}
<div id="detail_box__html_tpl_data" class="mb-3 tab-pane">
{{ form_label(form.html_tpl_data) }}
<div id="html_editor" style="height: 480px" class="form-control{{ has_errors(form.html_tpl_data) ? ' is-invalid' }}"></div>
<div style="display: none">{{ form_widget(form.html_tpl_data) }}</div>
{{ form_errors(form.html_tpl_data) }}
</div>
{% endif %}
</div>
</div>
</div>
{# エンティティ拡張の自動出力 #}
{% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
{% if f.vars.eccube_form_options.form_theme %}
{% form_theme f f.vars.eccube_form_options.form_theme %}
{{ form_row(f) }}
{% else %}
<div class="row mb-2">
<div class="col-2"><span>{{ f.vars.label|trans }}</span></div>
<div class="col-10">
{{ form_widget(f) }}
{{ form_errors(f) }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="c-conversionArea" id="aside_column">
<div class="c-conversionArea__container">
<div class="row justify-content-between align-items-center">
<div class="col-6">
<div class="c-conversionArea__leftBlockItem">
</div>
</div>
<div class="col-6">
<div id="ex-conversion-action" class="row align-items-center justify-content-end">
<div class="col-auto">
<button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- HTMLメールを確認するモーダル -->
<div class="modal fade" id="htmlPreviewModal" tabindex="-1" role="dialog" aria-labelledby="htmlPreviewModal" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold">{{ 'admin.setting.shop.mail.preview'|trans }}</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="bg-light p-4 bg-ec-formGray" id="viewEmail" style="word-wrap: break-word; word-break:break-all">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">{{ 'admin.common.close'|trans }}</button>
</div>
</div>
</div>
</div>
{% endblock %}