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:
|
<div class=“popupDialog popupDialog__complain popupDialog-js”>
<div class=“popupDialog__wrapper”>
<span class=“popupDialog__closeBtn closePopupBtn-js”>
<svg class=“svgIcon”>
<use xlink:href=“css/img/icons-sprite.svg#times-light”></use>
</svg>
</span>
<span class=“popupDialog__title”>{{ translations.SendComplaintOrReturn }}</span>
<div class=“complain__product”>
<figure>
<img class=“productImage-js” src=“” alt=“”>
<svg class=“svgIcon svgIcon–emptyImage”>
<use xlink:href=“css/img/icons-sprite.svg#image-regular”></use>
</svg>
</figure>
<p>
<span class=“complain__productTitle productName-js”></span>
<span class=“complain__lightText productAmount-js”></span>
</p>
</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” type=“radio” name=“__action” data–name=“complaint” value=“Order/ComplaintAdd”/>
<label for=“radio-complaint”>
<span class=“checkBoxes__checkIcon”>
<svg><circle cx=“7” cy=“8” r=“2”/></svg>
</span>
{{ translations.Prf_OrderComplaint }}
</label>
</div>
<div class=“radioReturn-js”>
<input id=“radio-return” class=“checkbox-input” type=“radio” name=“__action” data–name=“return” value=“Order/ReturnAdd”/>
<label for=“radio-return”>
<span class=“checkBoxes__checkIcon”>
<svg><circle cx=“7” cy=“8” r=“2”/></svg>
</span>
{{ translations.Prf_OrderReturn }}
</label>
</div>
</div>
<strong>{{ translations.ReportDetails }}</strong>
<div class=“form__input-wrapper complaintInputWrapper-js”>
{% if config.Complaints.Defects <> null –%}
{% assign defectsSize = config.Complaints.Defects | Size –%}
<select name=“defectId” class=“form__input-value form__input-value-js” required>
{% if defectsSize > 1 –%}
<option value=“-1”>{% if defectsSize > 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”>
<span class=“form__icons”>
<svg class=“svgIcon”>
<use xlink:href=“css/img/icons-sprite.svg#calendar-regular”></use>
</svg>
</span>
<input type=“date”
name=“defectDate”
id=“defectDate”
class=“form__input-value form__icon_padding form__input-value-js”
placeholder=“yyyy-MM-dd”
value=“{{config.Now | Date: ‘yyyy-MM-dd’}}”
max=“{{config.Now | Date: ‘yyyy-MM-dd’}}”
min=“{{order.Date | Date: ‘yyyy-MM-dd’}}”/>
<label for=“defectDate” class=“form__input-info”>* {{translations.Prf_DefectDate}}</label>
</div>
<div class=“form__input-wrapper complaintInputWrapper-js”>
{% if config.Complaints.Requests <> null –%}
{% assign requestsSize = config.Complaints.Requests | Size –%}
<select name=“requestId” class=“form__input-value form__input-value-js” required>
{% if requestsSize > 1 –%}
<option value=“-1”>{% if requestsSize > 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 > 1 –%}
<div class=“form__input-wrapper returnInputWrapper-js”>
<select name=“returnId” class=“form__input-value form__input-value-js” required>
<option value=“-1”>{% if returnTypes > 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 type=“button” class=“button-minus-add-product” data–field=“quantity”>
<svg class=“svgIcon”>
<use xlink:href=“css/img/icons-sprite.svg#minus-light”></use>
</svg>
</button>
<input class=“quantity-field quantity__field-js” name=“quantity” data–decimal=“false” type=“number” min=“1” max=“” value=“1”>
<button type=“button” class=“button-plus-add-product” data–field=“quantity”>
<svg class=“svgIcon”>
<use xlink:href=“css/img/icons-sprite.svg#plus-light”></use>
</svg>
</button>
</div>
<div class=“form__input-wrapper”>
<input class=“form__input-value form__input-value-js”
id=“accountNumber”
type=“text”
name=“accountNumber”
maxlength=“50” />
<label for=“accountNumber” class=“form__input-info form__input-info-js”>{{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”>
<svg class=“svgIcon”>
<use href=“css/img/icons-sprite.svg#paperclip-{{settings.iconStyle}}”></use>
</svg>
{{ 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” type=“file” name=“file” accept=“{{ config.Complaints.AttachmentExtensions }}” data–file–size=“{{ config.Complaints.AttachmentMaxSize }}” data–size–exceeded=“{{ translations.Com_FileSizeExceeded | Format: maxSize }}” data–invalid–file=“{{ translations.Com_InvalidFile | Format: config.Complaints.AttachmentExtensions }}” />
<span class=“form__clear-attachement-input clearFileInput-js” style=“display: none”>
<svg class=“svgIcon”>
<use xlink:href=“css/img/icons-sprite.svg#times-light”></use>
</svg>
</span>
</div>
{% endfor –%}
</div>
{% endif –%}
<input class=“productId-js” type=“hidden” name=“no” value=“”/>
<input type=“hidden” name=“orderId” value=“{{order.Id}}”/>
<button type=“button” data–id=“{{order.Id}}” class=“primary-action-button orderComplaintOrReturnAdd-js”>{{translations.Report}}</button>
</div>
</div>
</div>
|
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’) + ‘. <strong>’ + this.files[0].name + ‘</strong>: ‘ + $(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 = ‘<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<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} |