Unterstützung für das Hinzufügen von Anhängen zu Reklamationen und Rücksendungen

Inhaltsverzeichnis

Einleitung

In diesem Artikel erfährst du, wie du die Vorlage änderst, damit du bei der Einreichung von Reklamationen und Rücksendungen Anhänge anhängen kannst. 

Tipp
Basierend auf diesem Artikel musst du Änderungen an den js und scss Dateien vornehmen. Denke daran, dass diese Dateien minifiziert werden müssen. Wie du js und scss Dateien kompilieren und minifizieren kannst, erfährst du im Artikel über das Kompilieren und Minifizieren von Dateien.

Topaz

Gehe zum Administrationspanel auf die Registerkarte Webshop Layout Einstellungen Übersetzungen und füge dort die drei Phrasen hinzu:

  • ReportDetails – Details des Berichts,
  • ReportSuccessInfo – Es wurde eine Bestätigung an deine E-Mail-Adresse gesendet. Erwarte weitere E-Mails über Änderungen am Status deines Berichts,
  • AttachementsNotAdded – Es wurden nicht alle Anhänge hinzugefügt.

Suche in der Datei partials/customer/order-content.html nach der Phrase popupDialog__complain. Ersetze den Container mit der abgerufenen Klasse (einschließlich des Inhalts) durch den folgenden Code:

{{ translations.SendComplaintOrReturn }}

{{ translations.ReportDetails }}

{% if config.Complaints.Defects <> null -%} {% assign defectsSize = config.Complaints.Defects | Size -%}

{% if defectsSize &gt; 1 -%}* {% endif -%} {{translations.ChooseComplaintCause}}{{def.Name}}

{% endif -%}

dd.mm.rrrr

 

{% if config.Complaints.Requests <> null -%} {% assign requestsSize = config.Complaints.Requests | Size -%}

{% if requestsSize > 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}
{{req.Name}}

{% endif -%}

{% assign returnTypes = config.Complaints.Returns | Size -%} {% if returnTypes > 1 -%}

{% if returnTypes >1-%}* {%endif %} {{translations.ChooseReturn}}
{{return.Name}}

{% endif %}

{{translations.Prf_AdditionalInfo}}
* {{ translations.Com_RequiredFields }}

{% if config.Complaints.AttachmentsEnabled -%}

{{ translations.AddAttachment }}

{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%} {% for i in (1..config.Complaints.AttachmentsMaxCount) -%}

Wähle Datei
{% endfor -%}

{% endif -%} {{translations.Report}}

Suche nun in der Datei js/layout1.js (oder layout0.js, wenn du layout1.js nicht hast, oder layout.js, wenn du die beiden vorherigen nicht hast) die Variable var customerProfile und darin die Funktion events. Füge unmittelbar davor den folgenden Code ein:

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’) + ‘. ‘ + this.files[0].name + ‘: ‘ + $(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<dataFromHTML.length; i++){ fd.append(dataFromHTML[i].name,dataFromHTML[i].value); } if (filesSize > 0{
window.AttachementsErrors = 0;
function addAttachementError(file, message) {
if(window.AttachementsNotAdded == undefined){
window.AttachementsNotAdded = [];
}
var attachement = ‘

‘+file.name+’: ‘+message+’

‘; 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<filesSize; i++) { var file = fileList.pop(); if(file.size < fileSize){ var extensionArr = file.name.split(‘.’); var extension = ‘.’ + extensionArr[extensionArr.length – 1].toLowerCase(); var wrongExtension = true; for(var j=0; j<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); } } }); } },

Füge dann den folgenden Code in die events-funktion ein:

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();
});

Suche nun nach der Funktion orderComplaintOrReturnAdd und lösche sie. Suche dann nach dem Aufruf dieser Funktion (in der events-funktion) und entfernen Sie sie ebenfalls.

Füge dann den folgenden Code in die Datei css/layout.css ein:

.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}

Füge nun den folgenden Code in die Datei css/layout-m.css ein:

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

Finden Sie den Artikel hilfreich?