Hey @Faltfabrik
Freut mich, dass du das gelöst hast! Darf ich fragen wie genau? Aber was du schreibst ist sehr hilfreich, auch für andere!
Hier mehr Kontext dazu, dass ich im Laufe meiner Recherche auf Github habe finden können die vielleicht auch @r8r, @tewe und @Mr-Flo hilfreich finden.
Derzeit tritt also dieses Verhalten in allen Themes mit Breadcrumb-Navigation auf (kann auch weitere 3P Themes betreffen):
- Brooklyn
- Minimal
- Simple
- Supply
Erwartetes vs. tatsächliches Verhalten - Beispiele:
Schritte zur Reproduzierung: Lade ein beliebiges neues Theme herunter und aktiviere die Brotkrümelnavigation.
Es leuchtet ein, Links innerhalb within: collection zu entfernen, aber wenn wir keine Lösung finden können, um diese Funktion intakt zu halten, dann sollten wir versuchen, die Breadcrumb-Trails aus Themes zu entfernen, da sie im Moment ggf. keinen richtigen Wert bieten, da sie nur zur Startseite backlinken. Käufer haben ja mehrere Möglichkeiten, zur Homepage zurückzukehren.
Man braucht praktisch eine Möglichkeit die Sammlung zu erben, wenn nicht durch die Sammlung auf der Produktseite verknüpft wird. Das wäre ziemlich einfach, wenn ein Produkt nur in einer Collection ist, aber es wird komplizierter, wenn das Produkt zu mehreren Kollektionen gehört, und somit wäre eine Historie in einer Art Drop, um das herauszufinden.
Vielleicht eine routes zum drop routes.history hinzufügen und man könnte eine Vielzahl von Dingen mit dem History-Objekt in Liquid machen und das Problem mit einem Javascript-Client lösen. Aber die localStorage Route ist auch fraglich. Die aktuell empfohlene Art, Breadcrumbs zu Themes hinzuzufügen, wie sie im Shopify dev tutorials empfohlen wird ist nicht optimal. Das ganze ist in einem unless ge-wrapped um bestimmte Pages zu eliminieren, und hat einen hardcoded link für Home, mit einer Folge von 6+ if/elsif/else-Statements mit zusätzlicher Verschachtelung darin.
Der einfachste Weg, dies zu implementieren, könnte sein, mit einem Liquid-Objekt, das kontextbewusst ist und die Breadcrumbs für die aktuelle Seite zurückgibt:
[
{
"display_name": "Home",
"link": "https...."
},
...
]
Aber ich bin nicht sicher, ob das ein guter Weg ist, den wir gehen sollten. Mit dem im Sinne, betrachte noch einmal das Shopify-Dev-Tutorial und vergleiche es mit dem folgenden, das mit der neuen Struktur möglich wäre:
{% for breadcrumb in breadcrumbs %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
{% if breadcrumb.link %}
<a class="breadcrumb__name breadcrumb__name--link" href="{{ breadcrumb.link }}">
{{ breadcrumb.display_name }}
</a>
{% else %}
<span class="breadcrumb__name">{{ breadcrumb.name }}</span>
{% endif %}
</nav>
{% endfor %}
Wir würden den Link auf der aktuellen Seite ausschließen wollen, daher wäre es gut, wenn die Datenstruktur den link key für die Seite, auf der man sich gerade befindet, nicht enthalten würde. Andernfalls muss der Theme-Entwickler eine Bedingung für "wenn ich auf dem letzten Index bin, tue dies" anstelle von "wenn es keinen Link gibt, tue dies" einfügen, was intuitiver ist.
Es ist möglich, dass man die Anzeige von Breadcrumbs auf bestimmten Seiten unterdrücken kann. Das wird derzeit mit dem "unless wrapper" gemacht. Es könnte lohnenswert sein, zu sehen, ob es bestimmte Seiten gibt, für die die Breadcrumbs nicht breit angezeigt werden sollen, und sie auf der Plattformseite zu unterdrücken, oder ob es besser ist, das nur auf einer Theme-zu-Theme-Basis zu behandeln.
Man könnte auch die Breadcrumbs als Abschnitt implementieren und SE verwenden, um sie in Seiten ein- oder auszuschließen - das könnte auch eine Implementierungsentscheidung auf Themenebene sein, die ebenfalls funktionieren könnte. Ein paar Beispiele auf bestimmten Seiten:
Home
[
{
"display_name": "Home"
}
]
Blog Article
[
{
"display_name": "Home",
"link": "https://xxxxxxxxx.myshopify.com"
},
{
"display_name": "News",
"link": "https://xxxxxxxxx.myshopify.com/blogs/news"
},
{
"display_name": "Twilight Struggle"
}
]
Product (from collection page)
[
{
"display_name": "Home",
"link": "https://xxxxxxxxx.myshopify.com"
},
{
"display_name": "Media tests",
"link": "https://xxxxxxxxx.myshopify.com/collections/media-tests"
},
{
"display_name": "Product - All Media - Variants w/ Media",
}
]
Product (from elsewhere)
[
{
"display_name": "Home",
"link": "https://xxxxxxxxx.myshopify.com"
},
{
"display_name": "Product - All Media - Variants w/ Media",
}
]
Man könne einen {{ request | default_breadcrumbs }} Filter ergänzen, aber es soll zumindest die Bedürfnisse aller Themes erfüllen. Es soll immer eine gute UX für jede der häufigsten Formen von Breadcrumbs gewährleistet werden.
Ein {{ request | default_breadcrumbs }} mit einem breadcrumbs global object ählich wie beim paginate object für mehr granulare Kontrolle ist hier hilfreich, obwohl wir dann zur Verwendung von| default_breadcrumbs defaulten würden in unseren Themes.
Hier ein Beispiel Workaround für Händler, die Session Storage verwenden:
<script>
// Store breadcrumb collection
{%- if template == 'collection' -%}
{%- if current_tags -%}
{%- assign tag_names = current_tags | join: ', ' %}
{% comment %}Converting an array to a handle converts it to a string{% endcomment %}
{%- capture tag_handles -%}
{%- for tag in current_tags -%}
{{- tag | handle | append: '|' -}}
{%- endfor -%}
{%- endcapture -%}
{%- endif -%}
theme.breadcrumbs = {
collection: {
title: {{ collection.title | json }},
link: "{{ shop.url }}{{ collection.url }}{%- if current_tags -%}/{{- tag_handles | split: '|' | join: '+' -}}{%- endif -%}"
}
};
if(theme.breadcrumbs.collection){
sessionStorage.setItem("breadcrumb", JSON.stringify(theme.breadcrumbs.collection));
}
{%- endif -%}
</script>Füge dies in der Datei "breadcrumbs.liquid" vor dem abschließenden Tag "{% endunless %}" ein:
<script>
if(sessionStorage.breadcrumb) {
theme.breadcrumbs = {};
theme.breadcrumbs.collection = JSON.parse(sessionStorage.breadcrumb);
var breadcrumbHTML = `<span aria-hidden="true"> › </span><a href="${theme.breadcrumbs.collection.link}" title="${theme.breadcrumbs.collection.title}">${theme.breadcrumbs.collection.title}</a>`;
var homeBreadcrumb = document.getElementById('breadcrumb-home');
if(homeBreadcrumb) {
homeBreadcrumb.insertAdjacentHTML('afterend', breadcrumbHTML);
}
}
</script>Dies fügt den Sammlungslink über sessionStorage ein. Es funktioniert bis man einen liquid drop für Breadcrumbs hat. Cookies hätten auch verwendet werden können, aber die session storage könnte besser sein, damit die Daten nach dem Schließen der Seite gelöscht werden.
Community Blog Artikel
Bist du ein EU-Dropshipping Supplier, 3PL-Streckengeschäft Lieferant, oder ein Spediteu...
By Gabe Apr 18, 2024
Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024