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 -%}
    <div class="clear-after-ui cart-option-ui note-lq note-ui">
        {% if order.Note == '' -%}
            {% include 'order/note-partials/note-form.html' -%}
        {% else -%}
            {% include 'order/note-partials/note-presentation.html' -%}
        {% endif -%}
    </div>
{% endif -%}

{% if usr.Authenticated -%}

{% if order.Note == '' -%}

{% include 'order/note-partials/note-form.html' -%}

{% else -%}

{% include 'order/note-partials/note-presentation.html' -%}

{% endif -%}

</div>

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

<div class="expandable-mechanism-container-lq">
    {% if config.Orders.AttachmentsEnabled -%}
        <div class="clear-after-ui">
            <div class="half-ui">
    {% endif -%}
            {% if isExpanded == true or isExpanded == 'true' -%}
                <button class="btn-pure-ui label-note-in-cart-ui">
                    <i class="va-mid-ui ti-notepad"></i>
                    <span class="va-mid-ui line-height-1-ui">{{ translations.YourMessage }}</span>
                </button>
            {% else -%}
                <button class="btn-pure-ui add-note-in-cart-ui expand-data-lq">
                    <i class="va-mid-ui ti-notepad"></i>
                    <span class="va-mid-ui line-height-1-ui">{{ translations.AddMessage }}</span>
                </button>
            {% endif -%}
    {% if config.Orders.AttachmentsEnabled -%}
            </div>
            <div class="half-ui">
                <label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }} <span class="max-ui">(Max. {{ config.Orders.AttachmentsMaxCount }})</span></label>
                <input class="add-attachement-in-order-lq" id="file" type="file" name="file" accept="{{ config.Orders.AttachmentExtensions }}" multiple />
            </div>
        </div>
    {% endif -%}
    <div class="expandable-lq {% if isExpanded == true or isExpanded == 'true' -%} expanded-lq{% endif -%}">
        <form method="post" class="note-in-order-ui">
            <button class="btn-pure-ui right-corner-ui confirm-in-cart-ui add-note-lq">
                <i class="va-mid-ui ti-check"></i>
                <span class="va-mid-ui line-height-1-ui">{{translations.Confirm}}</span>
            </button>
            <input type="hidden" name="__action" value="Order/NoteAdd" class="post-lq" />
            <textarea class="form-to-confirm-in-cart-ui" maxlength="500" placeholder="{{ translations.Notes }}" name="note">{{order.Note}}</textarea>
            <div class="characters-counter-ui characters-counter-lq hidden-lq"></div>
        </form>
    </div>
</div>
{% if config.Orders.AttachmentsEnabled -%}
    <div class="attachements-ui attachements-lq">
        {% include 'order/attachements.html' -%}
    </div>
{% endif -%}

{% assign isExpanded = include -%}

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}

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

<span class="va-mid-ui line-height-1-ui">{{ translations.YourMessage }}</span>

</button>

{% else -%}

<span class="va-mid-ui line-height-1-ui">{{ translations.AddMessage }}</span>

</button>

{% endif -%}

{% if config.Orders.AttachmentsEnabled -%}

</div>

<label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }} <span class="max-ui">(Max. {{ config.Orders.AttachmentsMaxCount }})</span></label>

</div>

{% endif -%}

<span class="va-mid-ui line-height-1-ui">{{translations.Confirm}}</span>

</button>

<textarea class="form-to-confirm-in-cart-ui" maxlength="500" placeholder="{{ translations.Notes }}" name="note">{{order.Note}}</textarea>

</form>

</div>

{% if config.Orders.AttachmentsEnabled -%}

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

</div>

{% endif -%}

order/note-partials/note-presentation.html


{% if config.Orders.AttachmentsEnabled -%}
    <div class="clear-after-ui">
        <div class="half-ui">
{% endif -%}
        <button class="btn-pure-ui label-note-in-cart-ui">
            <i class="va-mid-ui ti-notepad"></i>
            <span class="va-mid-ui line-height-1-ui">{{ translations.YourMessage }}</span>
        </button>
{% if config.Orders.AttachmentsEnabled -%}
        </div>
        <div class="half-ui">
            <label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }} <span class="max-ui">(Max. {{ config.Orders.AttachmentsMaxCount }})</span></label>
            <input class="add-attachement-in-order-lq" id="file" type="file" name="file" accept="{{ config.Orders.AttachmentExtensions }}" multiple />
        </div>
    </div>
{% endif -%}
<div class="note-in-order-ui">
    {{order.Note}}
    <button class="btn-pure-ui edit-note-lq edit-ui">{{translations.Edit}}</button>
</div>
{% if config.Orders.AttachmentsEnabled -%}
    <div class="attachements-ui attachements-lq">
        {% include 'order/attachements.html' -%}
    </div>
{% endif -%}

{% if config.Orders.AttachmentsEnabled -%}

{% endif -%}

<span class="va-mid-ui line-height-1-ui">{{ translations.YourMessage }}</span>

</button>

{% if config.Orders.AttachmentsEnabled -%}

</div>

<label for="file" class="add-attachement-label-ui"><i class="ti-clip"></i> {{ translations.AddAttachement }} <span class="max-ui">(Max. {{ config.Orders.AttachmentsMaxCount }})</span></label>

</div>

{% endif -%}

<button class="btn-pure-ui edit-note-lq edit-ui">{{translations.Edit}}</button>

</div>

{% if config.Orders.AttachmentsEnabled -%}

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

</div>

{% 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 -%}
    <div class="file-container-ui file-container-lq">
        <i class="{{ icon }} icon-ui"></i> <span class="line-height-1-ui va-mid-ui">{{ file.Name }}</span> <i class="ti-close remove-attachement-in-order-ui remove-attachement-in-order-lq" data-id="{{ file.Id }}"></i>
    </div>
{% endfor -%}

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

</div>

{% 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 -%}
    <div class="attachements-ui remarks-ui">
        {% 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 -%}
            <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 -%}

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

</div>

{% endfor -%}

</div>

{% 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 = '<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+data.action.Message+'</div>';
                    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 = '<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;
        }
    }
};

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

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 = '<div style="padding: 20px;"><strong>'+file.name+'</strong>: '+data.action.Message+'</div>';

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

}

};

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

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;

}

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

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

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt