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

{% 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 -%}
    <button class="load-first-lvl-lq parent-container-reload-lq" data-template="customer-profile/orders/orders.html" data-url="{{ page.Url }}?{{ pageQueryName }}={{ pageQueryNo }}{% if tab -%}&tab={{tab}}{% endif -%}">
        <i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.Back }}</span>
    </button>
{% else -%}
    <a href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a>
{% endif -%}

{% if customer.Authenticated -%}

<i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.Back }}</span>

</button>

{% else -%}

<a href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a>

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


<input name="hash" type="hidden" value="{{ order.Hash }}" />

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:


<button class="copy-to-cart-lq" data-id="{{order.Id}}" data-hash="{{ order.Hash }}" data-redirect-url="{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}">
</button>

</button>

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

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

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


<input name="hash" type="hidden" value="{{ order.Hash }}" />

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:


<span class="f-right copy-to-cart" data-id="{{order.Id}}" data-hash="{{order.Hash}}" data-url="{{config.DefinedPages.Order.Url}}" data-added="{{translations.Com_AddedToCart}}" data-copy="{{ translations.CopyToCart }}" data-not-copied="{{translations.NotCopiedProducts}}">

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

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

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


<input name="hash" type="hidden" value="{{ order.Hash }}" />

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 -%}
    <input name="__template" type="hidden" value="partials/customer/order-details.html" />
{% else -%}
    <input name="__template" type="hidden" value="partials/customer/under-execution.html" />
{% endif -%}

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


<span class="cancel-order-button {% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%} not-authenticated {% endif -%}" data-info="{{ translations.Prf_OrderCanceled }}">

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:


<span class="copy-to-cart" data-id="{{customer-profile.Order.Id}}" data-hash="{{customer-profile.Order.Hash}}">

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

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

$.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%;
  }
}

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

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

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