Umgang mit Archivwaren
In diesem Artikel erfährst du, wie du mit einem archivierten Element auf der Seite „Elementdetails“ deiner Vorlage umgehst.
Agat
In der Datei product-page.html suchst du nach einem Wort button-container. Es ist die Containerklasse, die die wichtigsten Daten zur Ware enthält. Füge den folgenden Code unter diesem Container ein:
{% if product.Archival -%}
{% endif -%}
In derselben Datei bleiben (product-page.html) suchst du nach einem Wort config.Reviews.Enabled. Dies ist Teil der Bedingung für das Hinzufügen von Produktbewertungen. Ändere es so, dass es so aussieht:
{% if product.Archival -%}
{% if config.Reviews.Enabled == true and productD.Archival == false -%}
{% endif -%}
In der Datei partials/product/product-popup.html suchst du nach einem Wort usr.Authenticated. Es wird zwei Instanzen dieses Ausdrucks in dieser Datei geben. Es ist Teil der Bedingung in beiden. Ändere in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen:
{% if usr.Authenticated and product.Archival == false -%}
In derselben Datei (partials/product/product-popup.html) suchst du nach einem Wort add-to-cart-popup. Dies ist die Containerklasse, die geändert werden muss, damit sie so aussieht:
Weiter in derselben Datei (partials/product/product-popup.html) suchst du nach einem Wort AddToCartForm. Es ist die ID des Formulars, das für das Hinzufügen der Waren zum Warenkorb verantwortlich ist. Öffne die Zeile über der Bedingung:
{% if product.Archival == false -%}
Es wird für den Rest des Codes in dieser Datei verwendet. Am Ende findest du einen Klassencontainer ask-for-price-popup. Schließe unter diesem Container die zuvor geöffnete Bedingung, indem du darunter eine Zeile hinzufügst {% endif -%}.
Am Ende der Datei scss/main2.scss diesen Code einfügen:
.archival{
padding-bottom: 20px;
}
.archival-info{
background: $pageNameColor;
color: $primaryColor;
padding: 20px;
margin-bottom: 20px;
text-transform: uppercase;
@media only screen and (min-width: 481px) {
box-shadow: 2px 2px 1px 0 $bgColorFont;
}
}
Bernstein
Suche in der Datei productdetails.html nach dem Wort itemprop=”offers”. Es ist eines der Attribute des Containers, an dessen Anfang du den folgenden Code einfügen musst:
{% if _pd.Archival -%}
{% endif %}
In derselben Datei (productdetails.html) suchst du nach einem Wort usr.Authenticated. Dieser Ausdruck wird in dieser Datei zweimal vorkommen. Es ist Teil der Bedingung in beiden. Ändere in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen:
{% if usr.Authenticated and _pd.Archival == false -%}
Weiter in derselben Datei (productdetails.html) suchst du nach einem Wort class=”availability”. Füge die Zeile über dem Element mit dieser Klasse hinzu {% if _pd.Archival == false %}. Dies wird der Beginn einer Bedingung sein, die etwas tiefer abgeschlossen werden muss. Um diesen Ort zu finden, suche nach dem Ausdruck {% if customer.HidePrices %}. Dies ist die Voraussetzung für die Fertigstellung dieses neuen von uns, das wir gerade hinzugefügt haben. Füge dazu die obige Zeile hinzu {% endif %}.
Ein weiterer Satz in dieser Datei (productdetails.html), musst du nach einem Wort add-to-cart suchen. Dies ist die Klasse der Schaltfläche zum Hinzufügen eines Artikels zum Warenkorb. Es wird zwei Präsentationen geben. Uns interessiert nur die erste, die sich auf ein bestimmtes Produkt bezieht. Die zweite Instanz ist für Baugruppen und befindet sich in einem Zustand {% if set.Price <> null %}. Das interessiert uns nicht, also seien wir die Ersten. Füge die Zeile oben hinzu {% if _pd.Archival == false %}. Unter dieser Schaltfläche befinden sich zwei weitere Schaltflächen (Verfügbarkeitsmeldungen und Preisabfrage). Unter letzterem sollte die Bedingung geschlossen werden, indem eine Zeile darunter hinzugefügt wird {% endif %}.
Bei diesen Schaltflächen sehen wir das nav-Element mit der Klasse options. Füge die Zeile oben ein {% if _pd.Archival == false %}, und füge direkt nach dem Ende dieses Elements die Zeile unten ein {% endif %}.
Die letzte Bedingung in dieser Datei (productdetails.html),die man ändern muss, kann mna finden, indem man nach dem Ausdruck productuserreviews.TotalItems sucht. Man muss es so ersetzen, dass es so aussieht:
{% unless productuserreviews.TotalItems == 0 and _pd.Archival %}
Datei productdetails/opinions-partial.html sollte wie folgt geändert werden:
{% if productuserreviews.TotalItems == 0 %}
{% if _pd.Archival == false -%}
.
.
.
{% endif -%}
{% else %}
{% for o in productuserreviews.Reviews %}
.
.
.
{% endfor %}
{% if _pd.Archival == false -%}
{% endif -%}
{% endif%}
Füge am Ende der Datei scss/main2.scss ein:
.archival-product-info{
padding: 15px 20px;
border-radius: 5px 0 0 5px;
box-shadow: rgba(0,0,0,.2) -2px 2px 10px;
background: #F5F5F5;
position: relative;
right: -20px;
left: -20px;
width: calc(100% + 40px);
margin: 10px 0 30px;
font-style: italic;
}
Opal
In der Datei productdetails.html suchst du nach einem Wort details-section. Dies ist die Klasse des Containers, über der man die Zeile über einem solchen Code einfügen muss:
{% if _pd.Archival -%}
{% endif %}
Suche dann nach dem Wort usr.Authenticated. Es wird zwei Instanzen dieses Ausdrucks in dieser Datei geben. Es ist Teil der Bedingung in beiden. Ändern in beiden Fällen diese Bedingungen so, dass sie wie folgt aussehen:
{% if usr.Authenticated and _pd.Archival == false -%}
Ein anderer Satz ist class=”stock”. Dies ist die Klasse des Artikels, der mit der Bedingung “bekleidet” werden soll {% if _pd.Archival == false %}. Dies ist der Beginn einer Bedingung, die die Zeile unter dem Element beenden
muss, indem sie es hinzufügt {% endif %}.
Suche nun nach dem Begriff class=”attributes”. Füge die Zeile über dem Element mit dieser Klasse hinzu {% if _pd.Archival == false %}. Dies wird der Beginn einer Bedingung sein, die etwas tiefer abgeschlossen werden muss. Um diesen Ort zu finden, suche nach dem Ausdruck {% if customer.HidePrices %}. Dies ist die Voraussetzung für die Fertigstellung dieses neuen von uns, das wir gerade hinzugefügt haben. Füge dazu die obige Zeile hinzu. {% endif %}.
Der nächste Satz ist add-to-cart.Dies ist die Klasse der Schaltfläche zum Hinzufügen eines Artikels zum Warenkorb. Es wird zwei Präsentationen geben. Uns interessiert nur die erste, die sich auf ein bestimmtes Produkt bezieht. Die zweite Instanz ist für Baugruppen und befindet sich in einem Zustand {% if set.Price <> null %}. Das interessiert uns nicht, also seien wir die Ersten. Füge die Zeile oben hinzu {% if _pd.Archival == false %}. Unter dieser Schaltfläche befinden sich zwei weitere Schaltflächen (Verfügbarkeitsmeldungen und Preisabfrage). Unter letzterem sollte die Bedingung geschlossen werden, indem eine Zeile darunter hinzugefügt wird {% endif %}.
Bei diesen Schaltflächen sehen wir das nav-Element mit der Klasse options. Füge das Lineal oben ein {% if _pd.Archival == false %}, und direkt nach dem Ende dieses Elements füge unten eine Zeile hinzu {% endif %}.
Füge am Ende der Datei scss/main2.scss ein:
.archival-product-info{
background: #f7f7f7;
color: $placeholderColorFont;
padding: 20px;
margin-top: 20px;
text-align: center;
}