Handhabung von Bestelldetails für einen nicht eingeloggten Kunden

In diesem Artikel erfährst du, wie du die Vorlage so änderst, dass Kunden, die nicht angemeldet sind, die Details der Bestellung sehen können, zu der sie einen Link im Kundenprofil haben.

Bernstein oder Opal

Ersetze in der Datei customerprofile.html die Bedingung so, dass sie folgendermaßen aussieht:

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

Suche in der Datei customer/profile-orders.html nach Order/RestorePayment. Dies ist der Name einer der Aktionen, an denen wir interessiert sind. Etwas weiter entfernt befinden sich die anderen beiden (Order/Cancel und Order/Accept). Füge unter jedem von ihnen ein:

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

Suche in derselben Datei (customer/profile-orders.html) nach copy-to-cart. Dies ist die Klasse der Schaltfläche, die für das Kopieren der Bestellung in den Warenkorb verantwortlich ist. Man muss es so ändern, dass es so aussieht:

Dann in der Datei js/profile.js Funktion finden copyToCart und ändere seinen Anfang so, dass er so aussieht:

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

Tipp

Denke daran, dass js-Dateien minimiert werden müssen. Informationen zum Kompilieren und Minimieren von js-Dateien findest du im Artikel über Kompilierung und Minimierung von Dateien.

Achat

Ersetze in der Datei customer-profile.html die Bedingung so, dass sie folgendermaßen aussieht:

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

Suche in partials/customer /order-details.html nach Order/Accept. Dies ist der Name einer der Aktionen, an denen wir interessiert sind. Etwas weiter entfernt befinden sich die anderen beiden (Order/RestorePayment und Order/Cancel). Füge unter jedem von ihnen ein:

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

Füge bei der Aktion Order/Cancel der Eingabe eine Bedingung mit einer Vorlage hinzu, sodass sie so aussieht:

{% if customer.Authenticated == false and page.PageId == config.DefinedPages.CustomerProfile.Id and customer-profile.Order != null -%}
{% else -%}
{% endif -%}

Ändere während dieser Aktion (Order/Cancel) die Schaltfläche, die für die Stornierung der Bestellung verantwortlich ist, so, dass sie wie folgt aussieht:

Suche in derselben Datei (partials/customer/order-details.html) nach copy-to-cart. Dies ist die Klasse der Schaltfläche, die für das Kopieren der Bestellung in den Warenkorb verantwortlich ist. Du musst das Attribut data-hash = “{{order.Hash}}” hinzufügen, damit die endgültige Schaltfläche so aussieht:

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

Suche dann in der Datei js/init2.js die Funktion copyToCart und ändere ihren Anfang so, dass er folgendermaßen aussieht:

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

Suche in js/init.js die Funktion cancelOrder und ersetze post darin, sodass er so aussieht:

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

Füge in partials/customer/order-details-products.html dem Container mit der Klasse cart-items eine Bedingung hinzu, sodass der endgültige Container so aussieht:

Füge am Ende der Datei scss/main2.scss den folgenden Code hinzu:

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

Füge am Ende der Datei scss/mobile2.scss den folgenden Code hinzu:

.cart-items.not-authenticated{
text-align: center;
margin: 20px auto;
}

Tipp

Denke daran, dass die js- und scss-Dateien minimiert werden müssen. Wie du js- und scss-Dateien kompilierst und minimierst, erfährst du im Artikel über Kompilierung und Minimierung von Dateien.

Wie können wir dir helfen?

Handhabung von Bestelldetails für einen nicht eingeloggten Kunden