Obsługa dodawania załączników do reklamacji i zwrotów

Obsługa dodawania załączników do reklamacji i zwrotów

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby przy składaniu reklamacji i zwrotów było możliwe dołączenie załączników.

Szafir

W pliku product/cart-product.html wyszukaj frazę note-ui. Nad linijką z tą frazą wklej poniższy kod:

{% if config.Complaints.AttachmentsEnabled -%}
<div>
<label class="add-attachement-label-ui" for="file"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label> {% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%}
<div class="input-file-container-ui"><input class="add-attachement-in-complaint-ui add-attachement-in-complaint-lq" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /> <i class="ti-close clear-file-input-ui clear-file-input-lq hidden-lq"></i></div>
{% endfor -%}
</div>
{% endif -%}

Następnie w pliku customer-profile/complaints/complaints.html wyszukaj frazę complaint.Response. Będzie to linijka z warunkiem. Pod tym warunkiem wklej poniższy kod:

{% assign complaintsSize = customer-profile.Complaint.Attachments | Size -%}
{% if config.Complaints.AttachmentsEnabled and complaintsSize &gt; 0 -%}</code>
<div class="attachements-ui remarks-ui">

{% for file in customer-profile.Complaint.Attachments -%} {% assign type = file.Name | Split: '.' | Last -%} {% if type == "jfif" or type == "jpe" or type == "jpeg" or type == "jpg" -%} {% assign icon = 'ti-image' -%} {% elseif type == "csv" or type == "txt" -%} {% assign icon = 'ti-receipt' -%} {% elseif type == "docx" or type == "odt" -%} {% assign icon = 'ti-write' -%} {% elseif type == "xlsx" or type == "ods" -%} {% assign icon = 'ti-bar-chart' -%} {% elseif type == "pdf" -%} {% assign icon = 'ti-agenda' -%} {% else -%} {% assign icon = 'ti-file' -%} {% endif -%}
<div class="file-container-ui file-container-lq"><a href="{{ file.Url }}"><i class="{{ icon }} icon-ui"></i> <span class="line-height-1-ui va-mid-ui">{{ file.Name }}</span></a></div>
{% endfor -%}

</div>
{% endif -%}

Teraz w pliku js/init-ui2.js wyszukaj frazę sendComplaintSuccess(e). Będzie to funkcja, którą należy usunąć. Usuń również jej wywołanie, które jest tuż pod nią. Na samym końcu tego pliku (js/init-ui2.js) wklej poniższy kod:

function addAttachementInComplaint(e) {
window.attachementsInComplaint = [];
var filesArr = $(e.currentTarget).parents('.form-lq').find('.add-attachement-in-complaint-lq');
filesArr.each(function () {
if(this.files.length > 0){
var maxSize = $(this).data('file-size');
if(this.files[0].size > maxSize){
var message = $(this).data('size-exceeded');
var popup = '</code>
<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;">

'+ '
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;">

'+ '
<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div>
'+ '
<div style="padding: 20px;"><strong>'+this.files[0].name+'</strong>: '+message+'</div>
'+ '

</div>
'+ '

</div>
'; $('body').append(popup); $('body').addClass('modal-opened-ui'); $(this).val(''); } else { window.attachementsInComplaint.push(this.files[0]); $(this).next().removeClass('hidden-lq'); } } }); }; $('body').on('change', '.add-attachement-in-complaint-lq', function (e) { addAttachementInComplaint(e); }); function sendComplaint(e) { if(app.validationBeforePost(e) != 'error'){ var form = $(e.currentTarget).parents('.form-lq'); var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray(); var fileList = window.attachementsInComplaint; if(fileList != undefined){ var filesSize = fileList.length; } var fd = new FormData(); fd.append('__csrf', __CSRF); for(var i=0; i&lt;dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize &gt; 0) { window.AttachementsErrors = 0; function addAttachementError(file, message) { if(window.AttachementsNotAdded == undefined){ window.AttachementsNotAdded = []; } var attachement = '
<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>
'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i&lt;filesSize; i++) { var file = fileList.pop(); if(file.size &lt; fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j&lt;extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var popup = '
<div class="message-popup-background-ui errors-lq cancel-lq container-to-delete-lq" style="overflow: auto;">

'+ '
<div class="message-popup-ui box-ui after-adding-to-cart-popup-ui message-popup-on-background-lq" style="position: absolute; top: 0; transform: none; margin: 10% auto;">

'+ '
<div class="box-ui product-added-to-cart-ui" style="position: relative; padding: 20px;">'+ __translations.AttachementsNotAdded+ '<i class="ti-close cancel-lq" style="position: absolute; right: 20px; top: 20px; cursor: pointer;"></i>'+ '</div>
'+ window.AttachementsNotAdded.join('')+ '

</div>
'+ '

</div>
'; $('body').append(popup); $('body').addClass('modal-opened-ui'); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.add-attachement-in-complaint-lq').val(''); if (data.action.Result) { form.parents('.add-complaint-form-lq').find('.success-message-lq').removeClass('hidden-lq'); form.addClass('hidden-lq'); } else { app.serverMessage(data, form, e); } } }); } }; $('body').on('click', '.send-complaint-lq', function(e) { sendComplaint(e); }); $('body').on('click', '.clear-file-input-lq', function(e) { var index = $(e.currentTarget).parent().index(); $(e.currentTarget).prev().val(''); window.attachementsInComplaint.splice(index - 1, 1); $(e.currentTarget).addClass('hidden-lq'); });

W plikach scss/globals/_globals2.scss i scss/globals/_globals-m.scss znajdź linijkę z frazą .select-background-ui, input[type=”date”]{ i zamień ją na .select-background-ui, input[type=”date”], input[type=”file”]{.

Topaz

W Panelu Administratora przejdź do zakładki Tłumaczenia (Wygląd sklepu/ Ustawienia/ Tłumaczenia) i dodaj tam trzy frazy:

W pliku partials/customer/order-content.html wyszukaj frazę popupDialog__complain. Kontener z wyszukaną klasą podmień (wraz z zawartością) poniższym kodem:

<div class="popupDialog popupDialog__complain popupDialog-js">
<div class="popupDialog__wrapper">

<span class="popupDialog__title">{{ translations.SendComplaintOrReturn }}</span>
<div class="complain__product">

<figure><img class="productImage-js" alt="" /></figure>

</div>

<div class="form complain__form inputs-container-js" data-success-info="{{ translations.ReportSuccessInfo }}">

<div class="form__checkBox checkBoxes__container checkBoxes__container--radio radioContainer-js">

<div class="radioComplaint-js"><input id="radio-complaint" class="checkbox-input" name="__action" type="radio" value="Order/ComplaintAdd" data-name="complaint" /> <label for="radio-complaint"> {{ translations.Prf_OrderComplaint }} </label></div>

<div class="radioReturn-js"><input id="radio-return" class="checkbox-input" name="__action" type="radio" value="Order/ReturnAdd" data-name="return" /> <label for="radio-return"> {{ translations.Prf_OrderReturn }} </label></div>


</div>
<strong>{{ translations.ReportDetails }}</strong>
<div class="form__input-wrapper complaintInputWrapper-js">

{% if config.Complaints.Defects &lt;&gt; null -%} {% assign defectsSize = config.Complaints.Defects | Size -%}<select class="form__input-value form__input-value-js" name="defectId" required="">{% if defectsSize &gt; 1 -%}
<option value="-1">{% if defectsSize &gt; 1 -%}* {% endif -%} {{translations.ChooseComplaintCause}}</option>{% endif -%} {% for def in config.Complaints.Defects -%}
<option value="{{def.Id}}">{{def.Name}}</option>{% endfor -%}
</select>

{% endif -%}
<p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p>


</div>

<div class="form__input-wrapper complaintInputWrapper-js"><input id="defectDate" class="form__input-value form__icon_padding form__input-value-js" max="{{config.Now | Date: 'yyyy-MM-dd'}}" min="{{order.Date | Date: 'yyyy-MM-dd'}}" name="defectDate" type="date" value="{{config.Now | Date: 'yyyy-MM-dd'}}" placeholder="yyyy-MM-dd" /> <label class="form__input-info" for="defectDate">* {{translations.Prf_DefectDate}}</label></div>

<div class="form__input-wrapper complaintInputWrapper-js">

{% if config.Complaints.Requests &lt;&gt; null -%} {% assign requestsSize = config.Complaints.Requests | Size -%}<select class="form__input-value form__input-value-js" name="requestId" required="">{% if requestsSize &gt; 1 -%}
<option value="-1">{% if requestsSize &gt; 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}</option>{% endif %} {% for req in config.Complaints.Requests -%}
<option value="{{req.Id}}">{{req.Name}}</option>{% endfor -%}
</select>

{% endif -%}
<p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p>


</div>
{% assign returnTypes = config.Complaints.Returns | Size -%} {% if returnTypes &gt; 1 -%}
<div class="form__input-wrapper returnInputWrapper-js">

<select class="form__input-value form__input-value-js" name="returnId" required="">
<option value="-1">{% if returnTypes &gt; 1 -%}* {% endif %} {{translations.ChooseReturn}}</option>{% for return in config.Complaints.Returns -%}
<option value="{{return.Id}}">{{return.Name}}</option>{% endfor -%}
</select>
<p class="form__invalid-input form__validation-required-js" style="display: none;">{{ translations.Com_FieldIsMandatory }}</p>


</div>
{% endif %}
<div class="form__input-wrapper min-js"><label class="quantityField__label">{{translations.Com_Quantity}}</label> <button class="button-minus-add-product" type="button" data-field="quantity"> </button> <input class="quantity-field quantity__field-js" max="" min="1" name="quantity" type="number" value="1" data-decimal="false" /> <button class="button-plus-add-product" type="button" data-field="quantity"> </button></div>

<div class="form__input-wrapper"><input id="accountNumber" class="form__input-value form__input-value-js" maxlength="50" name="accountNumber" type="text" /> <label class="form__input-info form__input-info-js" for="accountNumber">{{translations.Crt_BankAccountNumber}}</label></div>

<div class="form__input-wrapper">{{translations.Prf_AdditionalInfo}} <textarea class="form__input-value" name="message"></textarea></div>

<div class="form__input-wrapper"><span class="form__requiredFields--info">* {{ translations.Com_RequiredFields }}</span></div>
{% if config.Complaints.AttachmentsEnabled -%}
<div class="form__input-wrapper attachementsInputWrapper" data-not-added-info="{{translations.AttachementsNotAdded}}">

<div class="form__attachementsLabel">{{ translations.AddAttachment }}</div>
{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%}
<div class="form__attachement-input-container"><input class="addAttachementInComplaint-js" accept="{{ config.Complaints.AttachmentExtensions }}" name="file" type="file" data-file-size="{{ config.Complaints.AttachmentMaxSize }}" data-size-exceeded="{{ translations.Com_FileSizeExceeded | Format: maxSize }}" data-invalid-file="{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}" /></div>
{% endfor -%}

</div>
{% endif -%} <input class="productId-js" name="no" type="hidden" value="" /> <input name="orderId" type="hidden" value="{{order.Id}}" /> <button class="primary-action-button orderComplaintOrReturnAdd-js" type="button" data-id="{{order.Id}}">{{translations.Report}}</button>
</div>
</div>
</div>

Teraz w pliku js/layout1.js (lub layout0.js jeśli nie ma layout1.js, lub layout.js jeśli nie ma dwóch poprzednich) znajdź zmienną var customerProfile, a w niej funkcję events. Tuż przed nią dodaj poniższy kod:

addAttachementInComplaint: function(e) {
window.attachementsInComplaint = [];
var filesArr = $(e.currentTarget).parents('.inputs-container-js').find('.addAttachementInComplaint-js');
filesArr.each(function () {
if(this.files.length > 0){
var maxSize = $(this).data('file-size');
if(this.files[0].size > maxSize){
var message = $('[data-not-added-info]').data('not-added-info') + '. </code></code><strong>' + this.files[0].name + '</strong><code class="lang:ruby decode:true ">: ' + $(this).data('size-exceeded');
app.showTemporaryPopup(message, 'error', '', 8000);
$(this).val('');
$(this).next().hide();
} else {
window.attachementsInComplaint.push(this.files[0]);
$(this).next().show();
}
}
});
},
sendComplaint: function(e) {
if(app.validationBeforePost(e) != 'error'){
var form = $(e.currentTarget).parents('.inputs-container-js');
var dataFromHTML = form.find('input:not([disabled]), select:not([disabled]), textarea:not([disabled])').serializeArray();
var fileList = window.attachementsInComplaint;
if(fileList != undefined){
var filesSize = fileList.length;
}
var fd = new FormData();
fd.append('__csrf', __CSRF);
for(var i=0; i&lt;dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize &gt; 0) {
window.AttachementsErrors = 0;
function addAttachementError(file, message) {
if(window.AttachementsNotAdded == undefined){
window.AttachementsNotAdded = [];
}
var attachement = '</code>
<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+message+'</div>
'; window.AttachementsNotAdded.push(attachement); window.AttachementsErrors += 1; }; var input = form.find('[name=file]').eq(0); var extensions = input.attr('accept').split(', '); var fileSize = input.data('file-size'); for (var i=0; i&lt;filesSize; i++) { var file = fileList.pop(); if(file.size &lt; fileSize){ var extensionArr = file.name.split('.'); var extension = '.' + extensionArr[extensionArr.length - 1].toLowerCase(); var wrongExtension = true; for(var j=0; j&lt;extensions.length; j++){ if(extension == extensions[j]){ fd.append('file'+i, file); var wrongExtension = false; } } if(wrongExtension){ var message = input.data('invalid-file'); addAttachementError(file, message); } } else { var message = input.data('size-exceeded'); addAttachementError(file, message); } } if(window.AttachementsNotAdded){ var message = $('[data-not-added-info]').data('not-added-info') + window.AttachementsNotAdded.join(''); app.showTemporaryPopup(message, 'error', '', 8000); window.AttachementsNotAdded = undefined; window.AttachementsErrors = undefined; } } $.ajax({ data: fd, processData: false, contentType: false, type: 'POST', success: function (data) { $('.addAttachementInComplaint-js').val(''); if (data.action.Result) { var message = form.data('success-info'); app.showTemporaryPopup(message, 'success', '', 8000); $('.clearFileInput-js').hide(); app.hidePopup(e); sessionStorage.removeItem('complains'); sessionStorage.removeItem('order' + (e.currentTarget).dataset.id); $('.order' + (e.currentTarget).dataset.id).remove(); customerProfile.showOrderDetails(e); } else { app.showTemporaryPopup(result.action.Description, 'error', '', 8000); } } }); } },

Następnie w funkcji events dodaj poniższy kod:

mainSection.on('change', '.addAttachementInComplaint-js', function (e) {
customerProfile.addAttachementInComplaint(e);
});
mainSection.on('click', '.orderComplaintOrReturnAdd-js', function(e) {
customerProfile.sendComplaint(e);
});
mainSection.on('click', '.clearFileInput-js', function(e) {
var index = $(e.currentTarget).parent().index();
$(e.currentTarget).prev().val('');
window.attachementsInComplaint.splice(index - 1, 1);
$(e.currentTarget).hide();
});

Teraz wyszukaj funkcję orderComplaintOrReturnAdd i usuń ją. Następnie wyszukaj wywołanie tej funkcji (w funkcji events) i również usuń.

Następnie w pliku css/layout.css dodaj poniższy kod:

.customer .popupDialog__complain .popupDialog__wrapper{max-width:700px;padding-bottom:0}.customer .complain__product{width:40%;padding:0;margin:40px 0;vertical-align:top;display:inline-block;border:none}.customer .complain__product figure{width:100%;height:auto;margin:0 0 20px}.customer .complain__form{width:calc(60% - 84px);display:inline-block;margin:40px}.customer .complain__form>strong{display:block;margin-bottom:20px}.customer .complain__form textarea{margin-top:10px;padding:10px}.customer .customer__orderContent .checkBoxes__container--radio{margin-top:0}.customer .form__attachement-input-container{position:relative}.customer .form__clear-attachement-input{position:absolute;top:11px;cursor:pointer}

Teraz w pliku css/layout-m.css dodaj poniższy kod:

.customer .complain__product{width:100%;margin:20px 0}.customer .complain__form{width:100%;margin:20px 0}