FROM CACHE - de_header

Breadcrumbs und Url auf Produktseite im Minimal Theme

Faltfabrik
Tourist
9 0 8

Hallo zusammen, ich bin absoluter Neuling und mache gerade meine ersten Schritte mit dem Minimal Theme. Ich habe eine Kategorie angelegt und dann ein Testprodukt, das ich der entsprechenden Kategorie zugeordnet habe. Im Hauptmenü ist ein Link zur Kategorieseite und wenn ich da drauf gehe zeigen die Breadcrumbs "Home > Kategorie-Name". Klicke ich auf der Kategorieseite auf das Produkt, dann wechseln die Breadcrumbs zu "Home > Produkt-Name". Was ich eigentlich erwartet hätte und was im Preview Shop des Themes auch funzt wäre "Home > Kategorie-Name > Produkt-Name" (siehe z.B. https://minimal-vintage-theme.myshopify.com/collections/prints/products/the-staves). Weiß jemand woran das liegen könnte? 

Ich habe dazu auch schon etwas recherchiert und einige scheinen dasselbe Problem zu haben. Ich habe mich gefragt, ob die Breadcrumbs in irgendeiner Form auch mit den Urls, die aufgerufen werden zusammenhängen (siehe breadcrumb.liquid)?! Wenn ich in meinem Shop ein Produkt aufrufe, dann steht bei der Url ".../products/produkt-name" bei dem Demo Shop Link oben sieht man, dass es dort ".../collections/kategorie-name/products/produkt-name" ist. Warum sieht der Url Aufbau bei mir anders aus? Und kann das zusammenhängen?

7 ANTWORTEN 7
Faltfabrik
Tourist
9 0 8

Ich habe die Breadcrumbs übrigens im Minimal Theme 12.4.0 zum Laufen gekriegt und die Collection in der Url ergänzt. In den meisten Threads geht es um das genaue Gegenteil, weil das Theme früher wohl anders war. Dort wurde geraten nach "{{ product.url | within: collection }}" zu suchen und das "| within: collection" aus SEO Gründen zu entfernen – dadurch wurden von Shopify nur die canonical Links benutzt, aber gleichzeitig gehen damit die Breadcrumbs flöten. Die nicht-canonischen Links werden übrigens von Shopify trotzdem angelegt. 

Im Minimal Theme 12.4.0 Code scheint das anders zu sein und wenn man die funktionierenden Breadcrumbs möchte, muss man das "| within: collection" hinzufügen. Zusätzlich wird man "{{ product.url}}" nicht mehr in product-grid-item.liquid finden. Stattdessen muss man dort nach "{{ featured.url}}" suchen und es zu "{{ featured.url | within: collection }}" ändern. Vielleicht hilft das ja jemand, der das gleiche Problem hat.

Gabe
Shopify Staff
Shopify Staff
7475 1198 1943

Hey @Faltfabrik 

Danke für die Angaben und ich kann sehen, was du meinst mit der Breadcrumb Trail im Minimal Theme. Dies scheint ein erwartetes Systemverhalten des Minimal Themes zu sein und das habe ich jetzt in meinem eigenen Shop reproduzieren und mit dem Verhalten des Simple Themes vergleichen können hier. Ich bin mir trotzdem nicht sicher, was der Sinn dahinter ist und warum die Kategorie selber auf diese Weise aus dem Breadcrumb Trail ausgeschlossen wird. 

Da das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier damit wir einen genaueren Blick darauf werfen können.

Lass wissen, ob ich deine Frage damit beantwortet habe 🙂

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Faltfabrik
Tourist
9 0 8

Hallo Gabe, 

vielen Dank für die Rückmeldung. Ich habe es für mich lösen können, aber falls ich weitere Fragen habe, komme ich gerne auf dein Angebot zurück :). 

Wie gesagt habe ich zu dem Thema ein bisschen recherchiert und meistens wollten die Leute nur die canonical Url haben (also ohne die collection), weil sie Angst hatten, dass ihr SEO negativ beinflusst wäre, wenn in ihrem Shop mehrere Links für die gleiche Seite benutzt werden (wobei die doppelten Links ja trotzdem automatisch von Shopify generiert werden). Der Breadcrumb Code nutzt aber nunmal die Url und wenn die collection da rausgeschmissen wird, dann funktioneren die Breadcrumbs nicht richtig.

Wie auch immer, anscheinend wurde der Code in der aktuellen Minimal Theme Version dahingehend geändert und das ist echt verwirrend, wenn man dann nach Lösungen sucht und nicht versteht, warum die Leute etwas default-mäßiges abschalten wollen, was man selber gerne aktiviert hätte und bei einem selber anders aussieht. 

Gabe
Shopify Staff
Shopify Staff
7475 1198 1943

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:

image.png

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.

Spoiler

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:

Spoiler
<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">&nbsp;&rsaquo;&nbsp;</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.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Mr-Flo
Forscher
73 8 34

Darf Ich fragen warum du das so willst?

Ich habe selber beim Prestige theme die Collection Kürzel rausgeworfen, da es immer wieder Probleme mit der Sitemap automatisch einlesen gab. 

Faltfabrik
Tourist
9 0 8

Hi Gabe,

oh, da muss ich mich nochmal kurz reindenken:

Öffne in der Code-Ansicht unter den Snippets "product-grid-item.liquid" und suche dort nach "{{ featured.url }}". Ändere es in "{{ featured.url | within: collection }}".

Das gilt jetzt nur für das Minimal Theme 12.4.0, aber grundsätzlich dürfte es bei anderen Themes ähnlich sein, außer dass das Snippet anders heißen kann und da z.B. auch "product.url" statt "featured.url" stehen könnte. Es wird wohl auch in irgendeiner Form "product" im Snippetnamen stehen, den es geht um den Aufruf einer Produktseite. 

Wichtig ist dabei, dass diese Änderung dazu führt, dass Shopify dann non-canonical Links bei der Shopnavigation benutzt, weil sich die Breadcrumb Navigation darauf bezieht - sonst kann die Breadcrumb Navigation nicht funktionieren. Das wollen viele nicht, weil sie dann fürchten, dass Google diese Seiten anstatt der canonical Links rankt. Es geht im Endeffekt darum, dass eben ein Produkt in vielen Collections sein kann und Shopify dafür viele Urls erzeugt. Es gibt aber eine "wahre" canonical Url für ein Produkt und die rankt dann u.U. nicht bzw. konkurriert mit den vielen non-canonical Links. Diese non-canonical Links werden aber, wenn ich es richtig verstanden habe, ohnehin erzeugt und wenn Google sie ranken will, dann tun sie das auch so. Es gibt aktuell keine (einfache) Lösung um beides zu haben, nur canonical Links und gleichzeitig funktionierende Breadcrumbs. 

Ich hoffe das hilft weiter. Ich hab ja im Prinzip nur das wiederholt, was ich weiter oben schon geschrieben hatte. Insofern nein, ich habe keine Lösung gefunden, wie man die Breadcrumbs zusammen mit den reinen canonical Links zum Laufen bekommt – mir waren einfach die non-canonical Collection Links egal ;o)

Viele Grüße 

Matthias

Faltfabrik
Tourist
9 0 8

Hi Mr-Flo,

naja ich will eben, dass die Breadcrumbs funktionieren, weil ich sie praktisch finde und der Rest ist mir erstmal egal. Ich verstehe die Problematik mit den vielen non-canonical Urls und den daraus resultieren SEO- oder auch Sitemap-Fragen. Solange es keine alternative und deutlich komplexere Lösung für die Breadcrumbs gibt, muss man entweder mit den non-canonical (collection) Urls leben oder sollte die Breadcrumbs ganz entfernen, weil sie sonst einfach nicht funzen. 

Viele Grüße

Matthias