302 lines
13 KiB
Twig
302 lines
13 KiB
Twig
|
{{ header }}{{ column_left }}
|
||
|
|
<div id="content">
|
||
|
|
<div class="page-header">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="float-end">
|
||
|
|
<button type="button" id="button-send" class="btn btn-primary"><i class="fa-solid fa-envelope"></i> {{ button_send }}</button></div>
|
||
|
|
<h1>{{ heading_title }}</h1>
|
||
|
|
<ol class="breadcrumb">
|
||
|
|
{% for breadcrumb in breadcrumbs %}
|
||
|
|
<li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
|
||
|
|
{% endfor %}
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><i class="fa-solid fa-envelope"></i> {{ text_mail }}</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<form>
|
||
|
|
<div class="row mb-3">
|
||
|
|
<label for="input-store" class="col-sm-2 col-form-label">{{ entry_store }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<select name="store_id" id="input-store" class="form-select">
|
||
|
|
<option value="0">{{ text_default }}</option>
|
||
|
|
{% for store in stores %}
|
||
|
|
<option value="{{ store.store_id }}">{{ store.name }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3">
|
||
|
|
<label for="input-to" class="col-sm-2 col-form-label">{{ entry_to }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<select name="to" id="input-to" class="form-select">
|
||
|
|
<option value="newsletter">{{ text_newsletter }}</option>
|
||
|
|
<option value="customer_all">{{ text_customer_all }}</option>
|
||
|
|
<option value="customer_group">{{ text_customer_group }}</option>
|
||
|
|
<option value="customer">{{ text_customer }}</option>
|
||
|
|
<option value="affiliate_all">{{ text_affiliate_all }}</option>
|
||
|
|
<option value="affiliate">{{ text_affiliate }}</option>
|
||
|
|
<option value="product">{{ text_product }}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 to" id="to-customer-group">
|
||
|
|
<label for="input-customer-group" class="col-sm-2 col-form-label">{{ entry_customer_group }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<select name="customer_group_id" id="input-customer-group" class="form-select">
|
||
|
|
{% for customer_group in customer_groups %}
|
||
|
|
<option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 to" id="to-customer">
|
||
|
|
<label class="col-sm-2 col-form-label">{{ entry_customer }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="text" name="customers" value="" placeholder="{{ entry_customer }}" id="input-customer" data-oc-target="autocomplete-customer" class="form-control" autocomplete="off"/>
|
||
|
|
<ul id="autocomplete-customer" class="dropdown-menu"></ul>
|
||
|
|
<div class="form-control p-0" style="height: 150px; overflow: auto;">
|
||
|
|
<table id="mail-customer" class="table m-0">
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="form-text">{{ help_customer }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 to" id="to-affiliate">
|
||
|
|
<label class="col-sm-2 col-form-label">{{ entry_affiliate }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="text" name="affiliates" value="" placeholder="{{ entry_affiliate }}" id="input-affiliate" data-oc-target="autocomplete-affiliate" class="form-control" autocomplete="off"/>
|
||
|
|
<ul id="autocomplete-affiliate" class="dropdown-menu"></ul>
|
||
|
|
<div class="form-control p-0" style="height: 150px; overflow: auto;">
|
||
|
|
<table id="mail-affiliate" class="table m-0">
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="form-text">{{ help_affiliate }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 to" id="to-product">
|
||
|
|
<label class="col-sm-2 col-form-label">{{ entry_product }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="text" name="products" value="" placeholder="{{ entry_product }}" id="input-product" data-oc-target="autocomplete-product" class="form-control" autocomplete="off"/>
|
||
|
|
<ul id="autocomplete-product" class="dropdown-menu"></ul>
|
||
|
|
<div class="form-control p-0" style="height: 150px; overflow: auto;">
|
||
|
|
<table id="mail-product" class="table m-0">
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<div class="form-text">{{ help_product }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 required">
|
||
|
|
<label for="input-subject" class="col-sm-2 col-form-label">{{ entry_subject }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<input type="text" name="subject" value="" placeholder="{{ entry_subject }}" id="input-subject" class="form-control"/>
|
||
|
|
<div id="error-subject" class="invalid-feedback"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-3 required">
|
||
|
|
<label for="input-message" class="col-sm-2 col-form-label">{{ entry_message }}</label>
|
||
|
|
<div class="col-sm-10">
|
||
|
|
<div id="input-message">
|
||
|
|
<textarea name="message" placeholder="{{ entry_message }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="form-control"></textarea>
|
||
|
|
<div id="error-message" class="invalid-feedback"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript"><!--
|
||
|
|
$('#input-to').on('change', function () {
|
||
|
|
$('.to').hide();
|
||
|
|
|
||
|
|
$('#to-' + this.value.replaceAll('_', '-')).show();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#input-to').trigger('change');
|
||
|
|
|
||
|
|
// Customers
|
||
|
|
$('#input-customer').autocomplete({
|
||
|
|
'source': function (request, response) {
|
||
|
|
$.ajax({
|
||
|
|
url: 'index.php?route=customer/customer.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (json) {
|
||
|
|
response($.map(json, function (item) {
|
||
|
|
return {
|
||
|
|
label: item['name'],
|
||
|
|
value: item['customer_id']
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
||
|
|
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'select': function (item) {
|
||
|
|
$('#input-customer').val('');
|
||
|
|
|
||
|
|
$('#mail-customer-' + item['value']).remove();
|
||
|
|
|
||
|
|
html = '<tr id="mail-customer-' + item['value'] + '">';
|
||
|
|
html += ' <td>' + item['label'] + '<input type="hidden" name="customer[]" value="' + item['value'] + '"/></td>';
|
||
|
|
html += ' <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
|
||
|
|
html += '</tr>';
|
||
|
|
|
||
|
|
$('#mail-customer tbody').append(html);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#mail-customer').on('click', '.btn', function () {
|
||
|
|
$(this).parent().parent().remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Affiliates
|
||
|
|
$('#input-affiliate').autocomplete({
|
||
|
|
'source': function (request, response) {
|
||
|
|
$.ajax({
|
||
|
|
url: 'index.php?route=customer/customer.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request) + '&filter_affiliate=1',
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (json) {
|
||
|
|
response($.map(json, function (item) {
|
||
|
|
return {
|
||
|
|
label: item['name'],
|
||
|
|
value: item['customer_id']
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
||
|
|
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'select': function (item) {
|
||
|
|
$('#input-affiliate').val('');
|
||
|
|
|
||
|
|
$('#mail-affiliate-' + item['value']).remove();
|
||
|
|
|
||
|
|
html = '<tr id="mail-affiliate-' + item['value'] + '">';
|
||
|
|
html += ' <td>' + item['label'] + '<input type="hidden" name="affiliate[]" value="' + item['value'] + '"/></td>';
|
||
|
|
html += ' <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
|
||
|
|
html += '</tr>';
|
||
|
|
|
||
|
|
$('#mail-affiliate tbody').append(html);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#input-affiliate').on('click', '.btn', function () {
|
||
|
|
$(this).parent().parent().remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Products
|
||
|
|
$('#input-product').autocomplete({
|
||
|
|
'source': function (request, response) {
|
||
|
|
$.ajax({
|
||
|
|
url: 'index.php?route=catalog/product.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (json) {
|
||
|
|
response($.map(json, function (item) {
|
||
|
|
return {
|
||
|
|
label: item['name'],
|
||
|
|
value: item['product_id']
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
||
|
|
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
'select': function (item) {
|
||
|
|
$('#input-product').val('');
|
||
|
|
|
||
|
|
$('#mail-product-' + item['value']).remove();
|
||
|
|
|
||
|
|
html = '<tr id="mail-product-' + item['value'] + '">';
|
||
|
|
html += ' <td>' + item['label'] + '<input type="hidden" name="product[]" value="' + item['value'] + '"/></td>';
|
||
|
|
html += ' <td class="text-end"><button type="button" class="btn btn-danger"><i class="fa-solid fa-minus-circle"></i></button></td>';
|
||
|
|
html += '</tr>';
|
||
|
|
|
||
|
|
$('#mail-product tbody').append(html);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#mail-product').on('click', '.btn', function () {
|
||
|
|
$(this).parent().parent().remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('textarea[data-oc-toggle=\'ckeditor\']').ckeditor({
|
||
|
|
language: '{{ ckeditor }}'
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#button-send').on('click', function () {
|
||
|
|
var element = this;
|
||
|
|
|
||
|
|
$(element).button('loading');
|
||
|
|
|
||
|
|
for (instance in CKEDITOR.instances) {
|
||
|
|
CKEDITOR.instances[instance].updateElement();
|
||
|
|
}
|
||
|
|
|
||
|
|
var next = 'index.php?route=marketing/contact.send&user_token={{ user_token }}';
|
||
|
|
|
||
|
|
var send = function () {
|
||
|
|
return $.ajax({
|
||
|
|
url: next,
|
||
|
|
type: 'post',
|
||
|
|
data: $('#content form').serialize(),
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (json) {
|
||
|
|
console.log(json);
|
||
|
|
|
||
|
|
$('.invalid-feedback').removeClass('d-block');
|
||
|
|
|
||
|
|
if (json['error']) {
|
||
|
|
if (json['error']['warning']) {
|
||
|
|
$('#alert').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error']['warning'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
|
||
|
|
}
|
||
|
|
|
||
|
|
for (key in json['error']) {
|
||
|
|
$('#input-' + key.replaceAll('_', '-')).addClass('is-invalid').find('.form-control, .form-select, .form-check-input, .form-check-label').addClass('is-invalid');
|
||
|
|
$('#error-' + key.replaceAll('_', '-')).html(json['error'][key]).addClass('d-block');
|
||
|
|
}
|
||
|
|
|
||
|
|
$(element).button('reset');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (json['text']) {
|
||
|
|
$('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle-circle"></i> ' + json['text'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (json['success']) {
|
||
|
|
$('#alert').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
|
||
|
|
|
||
|
|
$(element).button('reset');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (json['next']) {
|
||
|
|
next = json['next'];
|
||
|
|
|
||
|
|
chain.attach(send);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
||
|
|
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
|
||
|
|
|
||
|
|
$(element).button('reset');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
chain.attach(send);
|
||
|
|
});
|
||
|
|
//--></script>
|
||
|
|
{{ footer }}
|