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.

Wskazówka

Na podstawie tego artykułu trzeba będzie wprowadzać zmiany w plikach js oraz scss. Pamiętaj, że te pliki należy zminifikować. O tym jak skompilować i zminifikować pliki js oraz scss dowiesz się z artykułu o kompilacji i minifikacji plikó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 for="file" class="add-attachement-label-ui"><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" 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 }}" />
                <i class="ti-close clear-file-input-ui clear-file-input-lq hidden-lq"></i>
            </div>
        {% endfor -%}
    </div>
{% endif -%}

{% if config.Complaints.AttachmentsEnabled -%}

<div>

<label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }}</label>

{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%}

{% for i in (1..config.Complaints.AttachmentsMaxCount) -%}

</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 > 0 -%}
    <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 -%}

{% assign complaintsSize = customer-profile.Complaint.Attachments | Size -%}

{% if config.Complaints.AttachmentsEnabled and complaintsSize > 0 -%}

{% 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>

{% 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 = '<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<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 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');
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

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 = '<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<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 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:

ReportDetails – Szczegóły zgłoszenia,
ReportSuccessInfo – Na adres e-mail zostało wysłane potwierdzenie. Oczekuj kolejnych wiadomości e-mail o zmianie statusu zgłoszenia.,
AttachementsNotAdded – Nie dodano wszystkich załączników.

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__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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

</svg>

</span>

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

</svg>

</figure>

<p>

</p>

</div>

</span>

</label>

</div>

</span>

</label>

</div>

<strong>{{ translations.ReportDetails }}</strong>

{% if config.Complaints.Defects <> null -%}

{% assign defectsSize = config.Complaints.Defects | Size -%}

{% if defectsSize > 1 -%}

<option value="-1">{% if defectsSize > 1 -%}* {% endif -%} {{translations.ChooseComplaintCause}}</option>

{% endif -%}

{% for def in config.Complaints.Defects -%}

{% endfor -%}

</select>

{% endif -%}

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

</div>

</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>

{% if config.Complaints.Requests <> null -%}

{% assign requestsSize = config.Complaints.Requests | Size -%}

{% if requestsSize > 1 -%}

<option value="-1">{% if requestsSize > 1 -%}* {% endif %} {{translations.Prf_ComplainRequest}}</option>

{% endif %}

{% for req in config.Complaints.Requests -%}

{% 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 -%}

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

<label class="quantityField__label">{{translations.Com_Quantity}}</label>

</svg>

</button>

</svg>

</button>

</div>

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

<span class="form__requiredFields--info">* {{ translations.Com_RequiredFields }}</span>

</div>

{% if config.Complaints.AttachmentsEnabled -%}

</svg>

</div>

{% capture maxSize -%}{{config.Complaints.AttachmentMaxSize}}B{% endcapture -%}

{% for i in (1..config.Complaints.AttachmentsMaxCount) -%}

</svg>

</span>

</div>

{% endfor -%}

</div>

{% endif -%}

<button type="button" data-id="{{order.Id}}" class="primary-action-button orderComplaintOrReturnAdd-js">{{translations.Report}}</button>

</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') + '. <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);
                }
            }
        });
    }
},

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

}

});

}

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

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}

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

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

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