Hey @Clemens_93
Danke für die Angaben und du möchtest eine links-rechts Navigation in die Produktseite einbauen, wie im obigen Beispiel, so dass man hin und her klicken und zwischen den Produkten direkt navigieren kann, und nicht wie du sagst, zurück in die “Alle Produkte” Kategorie, oder in die Kategorie klicken muss, wo man sich gerade befindet hat, um zum nächsten Produkt zu kommen. Ich kann verstehen, warum du deinen Kunden diesen Feature gerne anbieten möchtest, aber es ist auch mit ein paar Problemen behaftet, wie ich unten erkläre.
Ich habe jetzt in das Beispiel Warehouse Theme geklickt und diese Navigation scheint entfernt worden zu sein. Ich denke mal sie wurde aus den folgenden Gründen unten entfernt da sie doch keine gute Kundenerfahrung angeboten hat. Ggf. ist die Breadcrumb einfach die bessere Experience:
Ein paar Gedanken zu den Gründen warum es ggf. entfernt wurde:
Das Problem hier ist: wie weiss das System, sprich, der Pfeil welches Produkt als nächstes kommt, da es nicht in die Zukunft denken kann? Der Back-Arrow kann ja ggf. mit dem Internet Verlauf verbunden werden, so dass man zurück zum vorherigen Produkt kommt wo man vorher war.
Oder soll eine Maths Random Logik/Selection in die vor- und zurück Pfeile ein gecodet werden? Das wäre im Grunde eine schlechte User Experience denn vielleicht möchte der Kunde nicht zu irgendwelche Produkt willkürlich geleitet werden und kann dann entweder verwirrt werden oder genervt, was ein Conversion Killer darstellen kann, und konsequenterweise zu erhöhten Absprünge führen.
Die Produkte bleiben ja nicht immer in derselben Reihenfolge in einer Kategorie da ja manchmal Produkte vergriffen sind, oder dynamisch in der Kategorie rumrutschen können, daher weiss der Pfeil ja nicht unbedingt zu welchem Produkt als nächstes verlinkt werden soll.
Der Code der im obigen Beispiel anscheinend verwendet wurde ist dieser hier:
Das Problem mit diesem Code Beispiel:
An erster Stelle müssen Code Lösungen an das Theme angepasst werden das man verwendet da alle Theme anders im Code strukturiert sind.
Das Beispiel-Code-Snippet oben verwendet die nicht existierenden Eigenschaften previous_product und next_product auf einem collection-Objekt, weshalb es wahrscheinlich nicht richtig funktioniert.
Um dieses Problem zu lösen, einfach die in einer Kollektion enthaltenen Produkte durchlaufen und die Position des aktuellen Produkts finden. Dann die vorherige und nächste Position bestimmen und diese Produkte als “vorherigen” und “nächsten” Produkte verwenden.
Hier eine verbesserter IF-Statement die das versucht:
{%- assign current_product_index = collection.products | map: 'id' | index: product.id -%}
{%- assign previous_product = nil -%}
{%- assign next_product = nil -%}
{%- if current_product_index != nil %}
{%- if current_product_index > 0 %}
{%- assign previous_product = collection.products[current_product_index - 1] -%}
{%- endif %}
{%- if current_product_index < collection.products.size - 1 %}
{%- assign next_product = collection.products[current_product_index + 1] -%}
{%- endif %}
{%- endif %}
{%- if previous_product or next_product %}
{%- if previous_product %}
{%- render 'icon', icon: 'arrow-left' -%} {{- 'product.general.previous_product' | t -}}
{%- endif %}
{%- if next_product %}
{{- 'product.general.next_product' | t -}} {%- render 'icon', icon: 'arrow-right' -%}
{%- endif %}
{%- endif %}
Der obige Code ermittelt zuerst den Index des aktuellen Produkts in der Kollektion. Anschließend werden die vorherigen und nächsten Produkte basierend auf diesem Index bestimmt. Schließlich werden Links zu diesen Produkten (falls vorhanden) in der Navigation angezeigt.
Vergewisser dich, dass dieses Snippet innerhalb des Kontexts einer Produktseite mit einer zugehörigen Kollektion platziert wird, damit es korrekt funktioniert. Beachte auch, dass wenn dein Produktkatalog sehr groß ist, dies die Leistung beeinträchtigen könnte, da es alle Produkte durchlaufen muss, um die aktuelle Position zu bestimmen.
Ansonsten gibt es verschiedene Ansätze, um den “Vorheriges Produkt” und “Nächstes Produkt”-Button zu implementieren. Man muss im Grunde, wie gesagt, die “nächsten” und “vorherigen” Produkte bestimmen und wie die Links auf der Produktseite gerendert werden.
Eine Möglichkeit, das nächste und vorherige Produkt zu bestimmen, besteht darin, sich auf die Reihenfolge der Produkte innerhalb einer Kollektion zu verlassen, was ich aber oben als nicht sehr zuverlässig beschrieben habe da die Produkte sich ja in der Kategorie abwechseln und ändern können.
Wenn die Produkte in einer sinnvollen Reihenfolge angezeigt werden sollen, dann sicherstellen, dass die Reihenfolge der Produkte in der Kollektion diese Logik widerspiegelt. Man kann ja Produkte in den Kollektionen manuell sortieren oder eine automatische Sortierung basierend auf verschiedenen Kriterien verwenden (wie z. B. Bestseller, Preis, Datum der Hinzufügung usw.).
Hier eine weitere IF-Statement, um Links zum nächsten und vorherigen Produkt innerhalb einer Kollektion zu erstellen. Beachte, dass dies davon ausgeht, dass man auf der Produktseite ist und dass das Produkt, das angezeigt wird, Teil einer Kollektion ist:
{%- assign current_product_index = collection.products | map: 'id' | index: product.id -%}
{%- if current_product_index > 0 -%}
{%- assign previous_product = collection.products[current_product_index | minus: 1] -%}
{%- endif -%}
{%- assign next_product = collection.products[current_product_index | plus: 1] -%}
{%- if previous_product != nil or next_product != nil -%}
{%- if previous_product != nil -%}
{%- render 'icon', icon: 'arrow-left' -%} {{- 'product.general.previous_product' | t -}}
{%- endif -%}
{%- if next_product != nil -%}
{{- 'product.general.next_product' | t -}} {%- render 'icon', icon: 'arrow-right' -%}
{%- endif -%}
{%- endif -%}
Beachte:
- Dieser Code muss an das Theme angepasst werden.
- Wenn du dich auf der letzten Produktseite einer Kollektion befinden, wird es kein “nächstes” Produkt geben, und wenn man sich auf der ersten Produktseite einer Kollektion befindet, wird es kein “vorheriges” Produkt geben.
- Der oben genannte Ansatz setzt voraus, dass der Nutzer über eine Kollektion zur Produktseite gelangt. Wenn Nutzer direkt zu einem Produkt gelangen (z. B. über eine direkte URL oder eine Suchmaschine), kennt man die Kollektion nicht, von der aus die Navigation erfolgen sollte, und der Code funktioniert möglicherweise nicht wie erwartet.
- Stelle sicher, dass das Theme das
{%- render 'icon', icon: 'arrow-left' -%} Snippet unterstützt oder ersetze es durch eine eigene Implementierung von Pfeil-Icons.
- Stelle sicher, dass die Sprach-Strings
'product.general.previous_product' und 'product.general.next_product' in den Übersetzungs-/Sprachdateien definiert sind oder ersetze diese durch eigene Strings.
Wenn du es selber auf deiner Produktseite 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 denen 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 negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist, wie gesagt, Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
