Obsługa załączników do zamówienia

Obsługa załączników do zamówienia

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby było możliwe dodanie załączników do składanego zamówienia.

Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js oraz scss. Z tego artykułu dowiesz się jak je kompilować i minifikować.

Szafir

Na potrzeby tej funkcji zdecydowaliśmy się na drobne zmiany w wyglądzie elementów związanych z dodawaniem notatki do zamówienia. Poniższe fragmenty kodu uwzględniają owe zmiany.

Na początku dodaj w swoim szablonie nowe frazy w zakładce Tłumaczenia:
AddAttachement – Dodaj załącznik
AddMessage – Dodaj wiadomość
YourMessage – Twoja wiadomość
AttachementsNotAdded – Nie dodano wszystkich załączników
Attachements – Załączniki

W pliku _layout.html w elemencie head znajduje się skrypt, który dodaje do zmiennej __translations różne tłumaczenia. Dodaj tam taką linijkę: AttachementsNotAdded: „{{ translations.AttachementsNotAdded | H }}”,

Jeśli miałeś w swoim szablonie funkcję do importowania koszyka z pliku to w pliku common/navigation-bars/main-navigation-bar-partial.html wyszukaj frazę id=”file”, a następnie w tym inpucie, w którym występuje to ID dodaj klasę import-cart-input-lq. Następnie w pliku js/init.js wyszukaj frazę [name=”file”] i zamień ją na .import-cart-input-lq.

W pliku order/cart.html wyszukaj frazę note-lq. Jest to klasa kontenera, w którym znajdują się wszystkie elementy związane z dodawaniem notatki do zamówienia. Wytnij cały ten kontener czyli taki kod:

{% if usr.Authenticated -%}

{% if order.Note == '' -%}
{% include 'order/note-partials/note-form.html' -%}
{% else -%}
{% include 'order/note-partials/note-presentation.html' -%}
{% endif -%}

{% endif -%}

i wklej go pod taką linijką: {% include 'common/order-summary.html’ -%}

Następnie trzeba w całości podmienić zawartość plików order/note-partials/note-form.html oraz order/note-partials/note-presentation.html. Poniżej właściwa zawartość obu plików:

order/note-partials/note-form.html

{% assign isExpanded = include -%}

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}
{% if isExpanded == true or isExpanded == 'true' -%}

{% else -%}

{% endif -%}
{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}



{% if config.Orders.AttachmentsEnabled -%}

{% include 'order/attachements.html' -%}

{% endif -%}

order/note-partials/note-presentation.html

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}

{{order.Note}}

{% if config.Orders.AttachmentsEnabled -%}

{% include 'order/attachements.html' -%}

{% endif -%}

Kolejnym krokiem będzie dodanie nowego pliku HTML o nazwie attachements. Należy go dodać do folderu order. Poniżej zawartość tego pliku:

order/attachements.html
{% for file in order.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 -%}

{{ file.Name }}

{% endfor -%}

Następnie w pliku customer-profile/orders/order-details.html wyszukaj frazę {% if order.Note != „” -%}. W tym warunku znajdują się dodane notatki do zamówienia. Pod tym warunkiem wklej poniższy kod:


{% if config.Orders.AttachmentsEnabled -%}

{% for file in order.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 -%}

{{ file.Name }}

{% endfor -%}

{% endif -%}

Na samym końcu pliku js/init-ui2.js dodaj poniższy kod:


function processFilesList(fileInput, fileList) {
var file = fileList.pop();
if (file) {
var fd = new FormData();
fd.append('__CSRF',__CSRF);
fd.append('__action','Order/AttachmentAdd');
fd.append('__template','order/attachements.html');
fd.append('file', file);
$.ajax({data: fd, processData: false, contentType: false, type: 'POST',
success: function(data){
fileInput.val('');
if(data.action.Result){
$('.attachements-lq').html(data.template);
} else {
if(window.AttachementsNotAdded == undefined){
window.AttachementsNotAdded = [];
}
var attachement = '
'+file.name+': '+data.action.Message+'
';
window.AttachementsNotAdded.push(attachement);
}
processFilesList(fileInput, fileList);
}
});
} else {
$('.during-ajax-modal-lq').addClass('hidden-lq');
fileInput.removeClass('prevent-double-change-lq');
if(window.AttachementsNotAdded){
var popup = '
'+
'
'+
'
'+
__translations.AttachementsNotAdded+
''+
'
'+
window.AttachementsNotAdded.join('')+
'

'+
'

';

$('body').append(popup);
$('body').addClass('modal-opened-ui');
window.AttachementsNotAdded = undefined;
}
}
};

function addAttachementInOrder(e) {
$('.during-ajax-modal-lq').removeClass('hidden-lq');
var fileInput = $(e.currentTarget);
fileInput.addClass('prevent-double-change-lq');
var fileList = Object.values(e.currentTarget.files);
processFilesList(fileInput, fileList);
};

$('body').on('change', '.add-attachement-in-order-lq:not(.prevent-double-change-lq)', function (e) {
addAttachementInOrder(e);
});

function removeAttachementInOrder(e) {
$.post('', {__csrf: __CSRF, __action: 'Order/AttachmentDelete', id: $(e.currentTarget).data('id')}, function(result) {
$(e.currentTarget).parents('.file-container-lq').remove();
});
};

$('body').on('click', '.remove-attachement-in-order-lq', function (e) {
removeAttachementInOrder(e);
});

W pliku scss/globals/_globals-m.scss wyszukaj frazę &.confirm-in-cart-ui. Zmień tam top: 93px na top: 70px. Usuń też right: 20px.

W pliku scss/globals/_globals2.scss wyszukaj frazę .add-note-in-cart-ui. Dopisz do niej po spacji w tej samej linijce .ti-notepad a następnie usuń margin-top: -10px i dodaj font-size: 20px.

W pliku scss/globals/partials/_order.scss wyszukaj frazę .note-ui. Nadpisz wszystkie style znajdujące się w tej klasie poniższym kodem:


margin-top: 20px;
border-top: 1px solid $lightBorderColor;
border-bottom: 1px solid $lightBorderColor;
padding: 15px;
.half-ui{
padding: 10px;
float: left;
&:first-child{
border-right: 1px solid $lightBorderColor;
}
}
button {
padding: 0;
line-height: 1;
}
.note-in-order-ui{
margin-top: 20px;
position: relative;
.edit-ui{
margin-left: 15px;
vertical-align: baseline;
}
}
.label-note-in-cart-ui{
color: $labelsColor;
cursor: default;
}
.form-to-confirm-in-cart-ui{
resize: none;
}
.confirm-in-cart-ui{
top: -20px;
}
.file-container-ui{
background: $bgColor;
border: 1px solid $lightBorderColor;
border-radius: 20px;
margin: 0 10px 10px 0;
padding: 5px 15px 10px;
display: inline-block;
&:first-child{
margin-top: 20px;
}
.icon-ui{
font-size: 20px;
vertical-align: middle;
}
.remove-attachement-in-order-ui{
vertical-align: middle;
margin-left: 10px;
cursor: pointer !important;
}
}

Czy ten artykuł był pomocny?

Wyślij opinie