Obsługa szczegółów zamówienia dla klienta niezalogowanego

Obsługa szczegółów zamówienia dla klienta niezalogowanego

W tym artykule dowiesz się jak zmodyfikować szablon, aby klienci niezalogowani mogli w profilu klienta zobaczyć szczegóły zamówienia do którego posiadają link.

Szafir

W pliku customer-profile.html w pierwszym warunku dopisz and customer-profile.Order == null tak żeby warunek wyglądał w ten sposób:
{% if customer.Authenticated == false and config.DefinedPages.CustomerProfile.Id == page.PageId and customer-profile.Order == null -%}

W pliku customer-profile/orders/order-details.html wyszukaj frazę {{ page.Url }}?{{ pageQueryName }}. Będzie to część atrybutu przypisanego do przycisku powrotu do listy zamówień. Ten przycisk trzeba uwarunkować, aby zamiast niego pojawiał się link prowadzący do strony głównej sklepu. Ostatecznie powinno to wyglądać tak jak poniższy kod:
{% if customer.Authenticated -%}

{% else -%}
{{ translations.BackToShopping }}
{% endif -%}

Pozostając dalej w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę Order/Cancel. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Accept i Order/RestorePayment). Pod każdą z nich wklej:


Nadal w tym samym pliku (customer-profile/orders/order-details.html) wyszukaj frazę copy-to-cart-lq. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash=”{{ order.Hash }}” tak, aby ostatecznie przycisk wyglądał następująco:

Następnie w pliku js/init-ui2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:
var id = $(e.currentTarget).data('id');
var hash = $(e.currentTarget).data('hash');
var data = {
orderId: id,
hash: hash,
__csrf: __CSRF,
__action: 'Order/Copy'
};

Wskazówka
Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn lub Opal

W pliku customerprofile.html podmień warunek, aby wyglądał tak:
{% if customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %}

{% include 'customer/profile.html’ %}

{% elseif customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customerprofile.Order != null %}

{% include 'customer/profile.html’ %}

{% else %}

{% include 'customer/login.html’ %}

{% endif %}

W pliku customer/profile-orders.html wyszukaj frazę Order/RestorePayment. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/Cancel i Order/Accept). Pod każdą z nich wklej:


Nadal w tym samym pliku (customer/profile-orders.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba go zmodyfikować tak, aby wyglądał następująco:


Następnie w pliku js/profile.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:

var id = $(e.currentTarget).data('id');
var hash = $(e.currentTarget).data('hash');
var newLocation = $(e.currentTarget).data('url');
var added = $(e.currentTarget).data('added');
var copy = $(e.currentTarget).data('copy');
var notCopied = $(e.currentTarget).data('not-copied');
var data = [
{ name: '__action', value: 'Order/Copy' },
{ name: 'orderId', value: id },
{ name: 'hash', value: hash },
{ name: '__csrf', value: __CSRF }
];

Wskazówka
Pamiętaj, że pliki js należy zminifikować. O tym jak skompilować i zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku customer-profile.html podmień warunek, aby wyglądał tak:
{% if page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null %}
{% include 'partials/customer/order-details.html' -%}
{% elseif customer.Authenticated and page.PageId == config.DefinedPages.CustomerProfile.Id %}

W pliku partials/customer/order-details.html wyszukaj frazę Order/Accept. Jest to nazwa jednej z interesujących nas akcji. Kawałek dalej znajdują się pozostałe dwie (Order/RestorePayment i Order/Cancel). Pod każdą z nich wklej:


Będąc przy akcji Order/Cancel dodaj warunek do inputa z templatką tak, aby wyglądał następująco:
{% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%}

{% else -%}

{% endif -%}

Nadal będąc przy tej akcji (Order/Cancel) zmodyfikuj przycisk odpowiadający za anulowanie zamówienia tak, aby wyglądał jak tu:


Pozostając w tym samym pliku (partials/customer/order-details.html) wyszukaj frazę copy-to-cart. Jest to klasa przycisku odpowiedzialnego za kopiowanie zamówienia do koszyka. Trzeba w nim dodać atrybut data-hash=”{{ order.Hash }}” tak, aby ostatecznie przycisk wyglądał następująco:




Następnie w pliku js/init2.js znajdź funkcję copyToCart i zmodyfikuj jej początek, aby wyglądała tak:
var copyButton = $(e.currentTarget);
var copySection = copyButton.parents('.copy-section');
var id = copyButton.data('id');
var hash = copyButton.data('hash');
var data = [
{ name: '__action', value: 'Order/Copy' },
{ name: 'orderId', value: id },
{ name: 'hash', value: hash },
{ name: '__csrf', value: __CSRF }
];

W pliku js/init.js znajdź funkcję cancelOrder i podmień w niej posta, żeby wyglądał tak:
$.post(url, data, function (result) {
if (result.action.Result) {
if($(e.currentTarget).hasClass('not-authenticated')){
application.createMessage(message);
$('#main-section').html(result.template);
application.loadImages();
} else {
window.templateChanged['under-execution'] = true;
application.createMessage(message);
if (parent.index() != -1) {
$('.under-execution').eq(1).replaceWith(result.template);
}
application.uiPreventScrolling();
}
} else if (result.action.Code != 100) {
application.createMessage(result.action);
}
});

W pliku partials/customer/order-details-products.html do kontenera z klasą cart-items dodaj warunek, tak aby ostatecznie kontener wyglądał następująco:

Na końcu pliku scss/main2.scss dodaj taki kod:
@media only screen and (min-width: 481px) {
.cart-items.not-authenticated .cart-item {
width: calc(50% - 40px);
display: inline-block;
}
}

@media only screen and (min-width: 769px) {
.cart-items.not-authenticated .cart-item {
width: calc(50% - 25px);
}
}

@media only screen and (min-width: 1025px) {
.cart-items.not-authenticated {
width: 66%;
}
}

Na końcu pliku scss/mobile2.scss dodaj taki kod:
.cart-items.not-authenticated{
text-align: center;
margin: 20px auto;
}

Wskazówka
Pamiętaj, że pliki js i scss należy zminifikować. O tym jak skompilować i zminifikować pliki js i scss dowiesz się z artykułu o kompilacji i minifikacji plików.

Czy ten artykuł był pomocny?