Verwandte Produkte mittels Produkt Metafeld Referenz Liste ausgeben

[UA-HandCrafts]

Hallo zusammen,

ich kämpfe seit Tagen mit folgendem Problem:

• in einem Custom Liquid Block sollen mehrere Verwandte Produkte angezeigt werden
• diese Verwandten Produkte sollen mittels eines Metafeldes verknüpft
• das Metafeld wurde als Produkt-Metafeld -> Referenz -> Produkt-LISTE definiert
  
• dann wurden mit einem Beispielprodukt insgesamt drei Produkte im Metafeld verknüpft
  

1. Zur Übung habe ich das selbe gemacht, nur mittels Metafeld mit EINEM Produkt

Für Ausgabe habe ich folgenden Code ins Custom Liquid geschrieben und erwartungsgemäß wurden mir ausgegeben:

• Produktbild
• Produktname
• Preis

{% assign related_product_handle = product.metafields.custom.verwandte_produkte2 %}
{% assign related_product = all_products[related_product_handle] %}

<h3>Auch erhältlich als... Metafeld ein Wert</h3>
<div class="related-products">
    <img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
    <p>{{ related_product.title }}</p>
    <p>{{ related_product.price | money }}</p>
</div>

2. Das habe ich auch mit der Version mit Produkt-LISTE versucht und kriege es leider nicht hin.

Das DIV wird zwar erstellt und ich sehe die Überschrift, alles darunter ist leer.

Hier der Code, den ich verwende. Sorry, falls es völlig falsch ist - bin noch ganz am Anfang meiner Lernphase und für jeden Hinweis Richtung Lösung TOTAL DANKBAR!

{% comment %}
  Schritt 1: Extrahieren der Produkt-Handles aus dem Metafeld
{% endcomment %}
{% assign related_product_handles = product.metafields.bezug.produkt_verwandte_produkte %}

<h3>Auch erhältlich als...LISTE</h3>

{% comment %}
  Schritt 2: Für jeden Produkt-Handle das zugehörige Produkt finden und anzeigen
{% endcomment %}
{% for product_handle in related_product_handles %}
  {% assign related_product = all_products[product_handle] %}
  {% if related_product %}
    <div class="related-products">
      <img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
      <p>{{ related_product.title }}</p>
      <p>{{ related_product.price | money }}</p>
    </div>
  {% else %}
    <p>Produkt mit Handle {{ product_handle }} nicht gefunden.</p>
  {% endif %}
{% endfor %}

Vielen Dank und viele Grüße

Dimitrij

[Gabe]

Hey Dimitrij! @UA-HandCrafts 

Das sieht nicht schlecht aus was du gemacht hast. Der 🐛 könnte dennoch in den Produkthandles sitzen die aus den Metafeldern abgerufen oder durchlaufen werden.

Stelle sicher, dass das Metafeld und die Handles, die du in product.metafields.bezug.produkt_verwandte_produkte verwendest, existieren und korrekt sind. Überprüfe insbesondere, ob bezug und produkt_verwandte_produkte korrekte Namensraum- bzw. Schlüsselbezeichnungen sind.

Versichere auch, dass product.metafields.bezug.produkt_verwandte_produkte eine Liste von Produkt-Handles und nicht eine Liste von Produkt-Objekten oder eine einzelne Zeichenkette zurückgibt. Du könntest dies überprüfen, indem du die Ausgabe direkt in deinem Template ausgibst, z.B. mit {{ product.metafields.bezug.produkt_verwandte_produkte | json }}.

Limitationen bei der Verwendung vonall_products: Sei bewusst, dass die Verwendung von all_products einige Limitationen hat, insbesondere in Bezug auf die Anzahl von Anfragen, die du pro Seite machen kannst. Shopify erlaubt nur eine bestimmte Anzahl von Aufrufen von all_products pro Seite. Wenn du also eine große Anzahl von verwandten Produkten hast, könntest du damit dieses Limit überschreiten.

Hier eine kommentierte FOR-Loop, die du 👁️ kannst:

{% assign related_product_handles = product.metafields.bezug.produkt_verwandte_produkte %}

<!-- Debug: Zeige die rohen Metafeld-Daten an -->
<p>Debug: {{ related_product_handles | json }}</p>

<h3>Auch erhältlich als...LISTE</h3>

{% for product_handle in related_product_handles %}
  <!-- Debug: Zeige den aktuellen Handle an -->
  <p>Verarbeite: {{ product_handle }}</p>

  {% assign related_product = all_products[product_handle] %}
  
  {% if related_product %}
    <div class="related-products">
      <img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
      <p>{{ related_product.title }}</p>
      <p>{{ related_product.price | money }}</p>
    </div>
  {% else %}
    <p>Produkt mit Handle {{ product_handle }} nicht gefunden.</p>
  {% endif %}
{% endfor %}

Wenn nach dem Debugging immer noch Probleme auftreten, versuche so spezifisch wie möglich zu sein, welche Ausgabe du erhältst, und prüfe eventuelle Fehlermeldungen, die in deinem Shopify-Adminbereich unter 'Online-Store' -> 'Themes' -> 'Aktionen' -> 'Fehlerprotokoll anzeigen' auftreten könnten.

Wenn die Produkte nicht in einer Liste, sondern beispielsweise als kommagetrennte Zeichenkette zurückgegeben werden, könnte es notwendig sein, die Zeichenkette in eine echte Liste umzuwandeln, bevor sie in der Schleife verwendet werden kann, z. B. mit dem split Filter:

{% assign related_product_handles = product.metafields.bezug.produkt_verwandte_produkte | split: ',' %}

Geht das immer noch nicht, sende das ganze samt allen obigen Sachverhalt an unseren Support. Sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

[UA-HandCrafts]

Hallo @Gabe 

herzlichen Dank für deine unermüdliche Hilfestellungen, so auch in diesem Fall!!!

Ich versuche deine Hinweise und Ratschläge der Reihe nach abzuarbeiten. Ich poste die Ergebnisse hier, vielleicht wird es jemandem behilflich sein...

❗ich werde soweit es geht die Prüfungen jeweils für beide Metafeld-Varianten machen, um ein Vergleich ziehen zu können:

1. Metafeld / Referenz / Produkt / EIN Produkt
2. Metafeld / Referenz / Produkt / Produkt-LISTE 

1. Limitation von all_products

Ich habe nur DREI Produkte im Metafeld verknüpft. 

2. Überprüfung auf  Existenz, Korrektheit sowie Inhalt der Metafelder

Der von dir vorgeschlagene Code {{ product.metafields.bezug.produkt_verwandte_produkte | json }} zur Überprüfung liefert im Custom Liquid Block bei beiden Metafeldern gleiches Ergebnis:

{"error":"json not allowed for this object"}

Ich habe folgenden Code zum Überprüfen verwendet:

<!-- Überprüfung des Metafeldinhalts -->
<p>Metafeldinhalt: {{ product.metafields.bezug.produkt_verwandte_produkte }}</p>

{% assign related_product_handles = product.metafields.bezug.produkt_verwandte_produkte %}

<!-- Überprüfung der Handles -->
{% for product_handle in related_product_handles %}
  <p>Verarbeite Handle: {{ product_handle }}</p>
{% endfor %}

Für Metafeld A ist die Rückgabe:

Metafeldinhalt: gid://shopify/Product/8614107382085

Für Metafeld B ist die Rückgabe:

Metafeldinhalt: ["gid://shopify/Product/8614107382085","gid://shopify/Product/8594671468869","gid://shopify/Product/8580979228997"]

In beiden Fällen sind die Werte in den Metafeldern die GIDs. Fall A zeigt auch, dass der von mir oben gepostete Code das auch sauber rendern kann.

Im Fall B sehe ich, dass es sich um eine einzelne Zeichenkette an GIDs handelt, die in [] und "" stehen sowie mit Komma voneinander separiert sind.

In beiden Fällen sind es KEINE Handles.  

Mein Rückschluss - wenn die GIDs sauber gerendert werden können, muss ich in Variante B die Zeichenkette in eine GID Liste Umwandeln. Nach langem Fummeln habe ich es mit diesem Code hinbekommen:

<!-- Metafeld B: Produktliste -->
{% assign raw_related_product_gids_string = product.metafields.bezug.produkt_verwandte_produkte | remove: "[" | remove: "]" | remove_first: '"' | remove_last: '"' %}
{% assign raw_related_product_gids = raw_related_product_gids_string | split: '","' %}

<h3>Liste der GIDs</h3>
<ul>
{% for gid in raw_related_product_gids %}
  <li>{{ gid }}</li>
{% endfor %}
</ul>

Hier die Rückgabe für Metafeld B:

Liste der GIDs
gid://shopify/Product/8614107382085
gid://shopify/Product/8594671468869
gid://shopify/Product/8580979228997

Also habe ich mit diesem Code versucht it der "sauberen" GID Liste es analog zu Variante A zu machen - leider erfolglos. Die DIV wird erzeug, ist auch so groß, dass alle drei verwandte Produkte dargestellt werden, aber die Inhalte sind nicht da - keine Bilder, keine Produkttitel und Preise.

<!-- Metafeld B: Produktliste -->
{% assign raw_related_product_gids_string = product.metafields.bezug.produkt_verwandte_produkte | remove: "[" | remove: "]" | remove_first: '"' | remove_last: '"' %}
{% assign raw_related_product_gids = raw_related_product_gids_string | split: '","' %}

<h3>Auch erhältlich als...LISTE</h3>

{% for gid in raw_related_product_gids %}
  {% assign related_product = all_products[gid] %}
  
  {% if related_product %}
    <div class="related-products">
      <img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
      <p>{{ related_product.title }}</p>
      <p>{{ related_product.price | money }}</p>
    </div>
  {% else %}
    <p>Produkt mit GID {{ gid }} nicht gefunden.</p>
  {% endif %}
{% endfor %}

Auch der von dir vorgeschlagene Code liefert leider kein Erfolg. Ich sehe nur die Fehlermeldung sowie die Überschrift:

Debug: {"error":"json not allowed for this object"}

Auch erhältlich als...LISTE

Den Button "Aktionen" in Onlineshop/Themes finde ich leider nicht.

Jetzt bin ich auch am Ende meiner Fantasie und weiß gar nicht mehr weiter.

Vielleicht bringen dich oder andere Mitglieder meine Ergebnisse auf einen Gedanken, der weiterhilft?

Danke und Grüße

Dimitrij

[Gabe]

@UA-HandCrafts 

Wow, ein super Ansatz und Debugging! Du hast viele wichtige Schritte unternommen und konkrete Tests durchgeführt aber vielleicht sitzt der 🐛 immer noch in der reinen Komplexität deiner Lösung ....Occam's Razor - die einfachste Lösung ist immer die beste! 😉 

Eine Frage aber: wieviel Zeit und Arbeit hast du jetzt in diese Sache investiert? Somit werde ich hier noch ein paar weitere Gedanken zu deinem Code abgeben, um dir zu helfen das zu lösen, so dass du dich wieder auf die Kernaktivitäten deines Shops konzentrieren kannst - das Aufbauen eines erfolgreichen Shops und Marketing Plans.

GIDs?

Die all_products arbeitet meistens mit Handles und nicht mit Global IDs (GIDs), die eigentlich, soweit ich weiss, nicht direkt in Liquid nutzbar sind, um auf Produktobjekte zuzugreifen. Der Zugriff auf ein Produkt über seine GID direkt im Liquid-Template ist also womöglich nicht möglich, ohne vielleicht eine App oder API-Call zu verwenden, die die GID in einen Handle umwandelt.

Du könntest eine App oder eine benutzerdefinierte Lösung bauen, die die GIDs in einer Weise abruft, um sie in verwendbare Strings/Handles umzuwandeln. Das könnte bedeuten, dass du eine Middleware oder App erstellen musst, die die GID pulled, um die dazugehörigen Informationen mittels Shopify API aufzurufen und dann den Produkt-Handle an dein Frontend zurückgibt. Danach solltest du dann die Handles im Liquid-Code verwenden können.

Du könntest auch, statt der GID, einen Produkt-Handle als zusätzliches Metafeld speichern, um diesen Prozess zu vereinfachen. Das würde den oben genannten Prozess umgehen und es dir ermöglichen, die Handles direkt in deinem Liquid-Code zu verwenden. Occam's Razor... 😉

Wenn du die Handles zur Verfügung hättest, könnte eine FOR-Loop ähnlich wie folgt aussehen:

{% assign related_product_handles = product.metafields.bezug.produkt_verwandte_handles %}

<h3>Auch erhältlich als...LISTE</h3>

{% for product_handle in related_product_handles %}
 {% assign related_product = all_products[product_handle] %}
 
 {% if related_product %}
   <div class="related-products">
     <img src="{{ related_product.featured_image | img_url: 'medium' }}" alt="{{ related_product.title }}">
     <p>{{ related_product.title }}</p>
     <p>{{ related_product.price | money }}</p>
   </div>
 {% else %}
   <p>Produkt mit Handle {{ product_handle }} nicht gefunden.</p>
 {% endif %}
{% endfor %}

Hierbei wird davon ausgegangen, dass produkt_verwandte_handles eine Liste von Produkt-Handles enthält. Somit aufgrund der Limitierungen im Shopify Theme Code mit GIDs umgehen zu können, könnte das die GIDs besser in eine nützliche Form umwandeln. 

[UA-HandCrafts]

@Gabevielen Dank für den Ansatz 👍

Du hast Recht, ich habe schon zu viel Zeit dran gelüftet. Und ich bin 1000% bei dir - einfache Lösungen sind die besten!

Deshalb ärgert 🤬 mich diese Situation auch so sehr - es sieht total einfach aus:

• Metafeld/Referenz/Produkt definieren
• Produkt in Metafeld verknüpfen
• Eine Codeschnipsel schreiben und fertig!

Das hat ja auch super mit der 1:1 Beziehung (Referenz zu EINEM Produkt) geklappt! Der Weg funktioniert ja auch mit der GID, wie in meinem ersten Post zu sehen.

ABER die 1:n Beziehung (Referenz zu Produktliste) klappt nicht.

Und das wurmt mich!

Warum klappt die 1:1 mit GID und die 1:n nicht? Was ist der Unterschied?

Wozu wurde diese Möglichkeit der Meta-Referenz als Liste geschaffen, wenn ich damit nicht Arbeit kann?

Fragen über Fragen...

Naja, jetzt ist erstmal Urlaub angesagt und danach gehe ich den Occam's Razor Weg...

Dennoch schreibe ich Shopify Support an und stelle diese interessante Frage - wozu diese Metafelder, die GIDs zurückliefern gedacht sind, was der Unterschied zwischen EIN Produkt und Produktliste ist und warum wird EIN problemlos gerendert und die Liste nicht.

Wenn ich eine Erkenntnis habe, teile ich diese natürlich hier.

Viele Grüße

Dimitrij

[Gabe]

Hey Dimitrij!

Ich wünsche dir erstmals einen tollen Urlaub und halte uns auf dem Laufenden was deine Recherche alles so ergibt! 

VG,

[UA-HandCrafts · Accepted solution]

Hallo @Gabe

vielen Dank - bin wieder zurück.

1. Da ich aktuell eine überschaubare Anzahl an "verwandten Produkten" habe, ist meine  Occam's Razor Lösung die folgende:
   • ich habe Metafeld/Text/Liste erstellt
   • in das MEtafeld schreibe ich die Handles der jeweiligen verwandten Produkte manuell rein
   • diese rendere ich dann auf der Produktseite mit dem angepassten o.g. Code - das funktionier sehr gut!
     Limit ist aktuell bei 20 Produkten / Seite.
   • muss nur noch mit CSS das Aussehen schleifen
2. Parallel habe ich mit dem ursprünglichen Metafeld rumexperimentiert und untersucht:
   • interessant ist, dass das Produktreferenz-Metafeld für EIN Produkt keinen String als Wert hat. Obwohl ich den Wert beispielsweise so sehe gid://shopify/Product/8614107382085 kann ich keine Zeichenanzahl abgreifen. Die Zeichenanzahl wird als "0" angegeben. Formatiere ich dann diesen Wert per Code als String, erhalte ich auch die Anzahl der Zeichen.
     Meine Vermutung ist deshalb, dass es sich um eine Art Verlinkung handelt. Das würde auch erklären, warum dieses Metafeld für EIN Produkt gerendert wird und für Produktliste, die als String ausgegeben wird nicht funktioniert
   • Ich habe diese Fragen an Shopify-Support gestellt. Vielleicht kommt da was greifbares, was für solche Anwendungsfälle verwendet werden kann.

Ich bleibe dran.

Viele Grüße

Dimitrij