Hey @Buenyamin
Danke für die Bilder und dieser grüner “In-Stock” Punkt ist ein Feature des Impulse Themes wie es aussieht und deswegen wird das nicht so einfach sein so einen Punkt in dein Theme einzubauen.
Der einfache Weg mit Apps:
Apps gibt es die das möglich machen was du brauchst. Siehe eine Demo die ich für dich ausgesucht habe hier.
Wenn du es doch DIY machen möchtest:
Wenn du es selber auf deiner XXXXseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
Deine Verwendung der ternären Operation ist korrekt, aber sie entspricht nicht der Syntax, die von der Shopify Liquid-Templating-Engine verwendet wird. Die ternäre Operation in Liquid ist strukturiert wie eine IF-ELSE Statement. So könnte ein Beispiel Code aussehen:
{% if product.available %}
{% assign stockQuantity = product.variants.first.inventory_quantity %}
{% if stockQuantity > 0 %}
{% assign stockIcon = 'green' %}
{% else %}
{% assign stockIcon = 'red' %}
{% endif %}
Lagerbestand: {{ stockQuantity }}
{% else %}
Aktuell nicht auf Lager
{% endif %}
In diesem obigen Code wird zuerst geprüft, ob das Produkt verfügbar ist. Wenn ja, wird die Lagermenge zugewiesen und anschließend geprüft, ob diese Menge größer als Null ist. Wenn dies der Fall ist, wird stockIcon auf ‘green’ gesetzt, ansonsten auf ‘red’.
Jetzt berücksichtigt dieser Code aber nicht einen “low stock”-Status wie in meinem Impulse Theme Beispiel oben abgebildet. Wir können diesen Zustand hinzufügen, indem wir eine weitere Bedingung festlegen. Zum Beispiel könnte ‘low stock’ definiert werden, wenn die Lagermenge weniger als 10 ist:
{% if product.available %}
{% assign stockQuantity = product.variants.first.inventory_quantity %}
{% if stockQuantity > 10 %}
{% assign stockIcon = 'green' %}
{% elsif stockQuantity > 0 %}
{% assign stockIcon = 'yellow' %}
{% else %}
{% assign stockIcon = 'red' %}
{% endif %}
Lagerbestand: {{ stockQuantity }}
{% else %}
Aktuell nicht auf Lager
{% endif %}
Es müssen auch die entsprechenden CSS-Stile für diese Lagerbestandsanzeigen definiert werden. Hier ist ein einfaches Beispiel:
.stock-icon {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
border-radius: 50%;
}
.stock-icon-green {
background-color: green;
}
.stock-icon-yellow {
background-color: yellow;
}
.stock-icon-red {
background-color: red;
}
Hoffe das hilft! 