Metafeld in Beschreibung ausgeben

[befla]

Hallo.

Ich habe ein Kategorien-Metafeld hinzugefügt und als Typ "Eine Kategorie" hinzugefügt. Nun würde ich gerne diesen Wert in der Kategoriebeschreibung ausgeben, am liebsten mit Kategoriebild.

Ziel ist es, wie im Screenshot, die Subkategorien Cosméticos, Cuidados com os ouvidos, Cuidados com os cabelos, Massagem & Relaxamento in der Beschreibung der Hauptkategorie "Cuidados pessoais" auszugeben.

Vielen Dank im voraus.

[Gabe]

Hey @befla 

Danke für die Bilder und das sind tolle Fotos! 

UM das zu machen was du erreichen möchtest wird es etwas Coding verlangen. Wenn du es selber auf deiner Kategorieseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Das folgende ist ohne Gewähr und sollte nur in einer Testumgebung getestet werden, sprich, nur ein Beispiel und ggf. kann dir ein Experte wie @Finer hier besser beraten.

Du kannst z. B. um das Kategorien-Metafeld in der Kategoriebeschreibung auszugeben, muss man einige Änderungen im Code vornehmen. Hier sind die Schritte, die man befolgen könnte aber in einer Testumgebung zuerst:

1. Gehe zum Theme -> "Actions" -> "Duplizieren" -> "Code bearbeiten".
2. Navigiere zu "Sections" und gehe in den "collection-template.liquid" (Theme-Abhängig).
3. Suche nach dem Code, der die Kategoriebeschreibung ausgibt. Dieser Code könnte etwas wie {% if collection.description != blank %} sein.
4. Füge die folgende IF-Statement unterhalb des vorhandenen Codes ein:

{% if collection.metafields.category_image %}
  <img src="{{ collection.metafields.category_image | img_url }}" alt="{{ collection.title }}" />
{% endif %}

{% if collection.metafields.category %}
  <p>{{ collection.metafields.category }}</p>
{% endif %}

Dieser Code prüft, ob ein Kategorien-Metafeld mit dem Schlüssel "category_image" vorhanden ist. Wenn ja, wird das Bild mit dem Alt-Text ausgegeben. Danach wird geprüft, ob das Kategorien-Metafeld mit dem Schlüssel "category" vorhanden ist. Wenn ja, wird der Wert in einem Absatz ausgegeben.

Speichere die Änderungen und aktualisiere die Seite, um die Ausgabe zu überprüfen.

Um die Subkategorien in der Beschreibung der Hauptkategorie "Cuidados pessoais" auszugeben, sollte man diese in das Kategorien-Metafeld eintragen. Gehe dazu zur Kategorieliste in Shopify und wähle die Kategorie "Cuidados pessoais" aus. Füge dann die Namen der Subkategorien in das Kategorien-Metafeld mit dem Schlüssel "category" ein, getrennt durch Kommas. Beispiel:

Cosméticos, Cuidados com os ouvidos, Cuidados com os cabelos, Massagem & Relaxamento

Speichere und aktualisiere die Seite wiederholt, um die Ausgabe nochmal zu überprüfen.

Wie gesagt, diese Beispiele sind nur Beispiele und dienen dazu dich mit einem Experten in die richtige Richtung zu weisen! Bei weiteren Fragen bitte einen Experten konsultieren... 😉

[befla]

Hey @Gabe . Vielen Dank für deine Antwort.

Der Ansatz ist schonmal gut. Was mich stört, ist, dass das leider nur mit Textfeld funktioniert.

Was spräche denn dagegen das Textfeld der Kategoriebeschreibung variabel-fähig zu machen, so dass ich direkt im Editor mit den entsprechenden Variabeln arbeiten könnte? Auch hätte ich somit den Vorteil die Ausgabe besser mit CSS gestalten zu können.

[Gabe]

@befla 

Ja, dieses Feld ist derzeit nicht HTML-fähig und das ist auch Theme-abhängig und du hast nicht erwähnt welches Theme du verwendest. Hast du auch andere Themes getestet die das etwas besser können? Wir haben einige und du kannst sie gerne zum Shop hinzufügen als Testumgebungen. Das einzige Feld dass das scheinbar oder womöglich in deinem Theme kann ist das benutzerdefinierte Liquid Feld .

VG,

[befla]

Ich benutze das Dawn-Theme. Das Feld ist ja HTML-fähig, nur kann ich darin keine Variabeln verwenden.

[Gabe]

Tschuldigung mein fehler, nicht HTML sondern Variablen. 😉

[befla]

Gibt es denn kein Snippet, um das Textfeld in der Kategoriebeschreibung variabel-fähig zu machen?

Ist dieses Textfeld der Kategoriebeschreibung wirklich Theme-abhängig? Sprich: in anderen Themes könnte ich hier Variabeln einfügen während Dawn diese Variabeln nichts ausgibt?

[Gabe]

Hmm, du kannst das Liquid-Template-System von Shopify verwenden um dynamische Inhalte in der Kategorie Seite zu integrieren. Im collection.liquid suche nach dem HTML-Textfeld für die Kategoriebeschreibung, in dem derzeit nur HTML-Code vorhanden ist und ersetze den Code durch Liquid-Tags, um die Variablen einzufügen. Man kann hier beispielsweise auf Shopify-Variables wie {{ collection.title }} oder {{ collection.image.src }} zurückgreifen und dynamischen Inhalt hinzufügen.

Beispiel:

<div class="category-description">
  <h2>{{ collection.title }}</h2>
  <img src="{{ collection.image.src }}" alt="{{ collection.title }}">
  <p>{{ collection.description }}</p>
</div>

Dieses Beispiel fügt die Titel-, Bild- und Beschreibungsvariablen der aktuellen Sammlung in das HTML-Textfeld der Kategoriebeschreibung ein.

Hier etwas HTML und JavaScript vielleicht um ein Textfeld zu erstellen mit der ID "text-input" und einen Absatz mit der ID "output". Mit JavaScript eine Event-Listener-Function hinzufuegen, die auf Änderungen des Textfeldinhalts reagiert und den Inhalt in Großbuchstaben im Absatz mit der ID "output" ausgibt.

<label for="text-input">Eingabefeld:</label>
<input type="text" id="text-input">
<p id="output"></p>

<script>
  const textInput = document.getElementById("text-input");
  const output = document.getElementById("output");

  textInput.addEventListener("input", () => {
    output.innerText = textInput.value.toUpperCase();
  });
</script>

[befla]

Ich glaube jetzt hatte ich mich etwas unverständlich ausgedrückt.

Im Screenshot oben siehst du ja meinen html-Code in der Kategoriebeschreibung:

<div class="card">
<a title="Cosméticos" href="../collections/cosmeticos"><img src="https://cdn.shopify.com/s/files/1/0702/3283/4366/files/2880.jpg" alt="Cosméticos"></a>Cosméticos</div>

Anstatt manuell "Cosméticos" in title und alt eingeben zu müssen würde ich das gerne dynamisch mit {{ collection.metafields.title }} machen. Das Gleiche mit dem Bild. Anstatt die Bildadresse manuell einzugeben, das dynamisch mit {{ collection.metafields.category_image | img_url }} machen.

[Gabe]

@befla 

Ok, schauen wir uns dein neues Beispiel an da das vorher nicht klar war. Jetzt sehe ich auch dass es sich um den Rich Text Editor (RTE) im Produkt Stamm handelt. Solche Angaben sind immer gut gleich zu Anfang oben zu posten, so dass es weniger hin-und-her und weitere Klärungs-Fragen gibt.

Beispiel: ich bin jetzt immer von den Rich Text und Custom HTML Abschnitte sowie dem Theme Liquid ausgegangen (siehe deinen ersten Beitrag und Bild).

Leider hat der RTE einen Hard Limit zu HTML (auch aus System-Stabilitäts- und Sicherheitsgründen) und alles was da möglich ist wird in unserem Help Doc hier aufgelistet. Sprich, u.a. die folgenden Elemente:

• Font size - change between different heading and body text size.
• Bold
• Italics
• Underline
• Bulleted List
• Numbered List
• Remove Indent
• Add Indent
• Alignment - left, right, center.
• Text Colour
• Link - highlight text to assign a link to it.
• Insert Table
• Insert Image
• Insert Video

Somit musst du zum Theme Liquid Code selber greifen um da deine Bedingungs-Logik einzubauen leider.

[Gabe]

@befla 

Hast du etwas machen oder das lösen können?

[befla]

Hey @Gabe 

Ich habe das nun folgendermaßen gelöst:

main-collection-banner.liquid

{%- if collection.metafields.custom.number_sub1 != blank -%}
<div class="card">
<a title="{{ collection.metafields.custom.name_sub1 }}" href="{{ collection.metafields.custom.number_sub1 }}" style="text-decoration:none; color:inherit;"><img src="https://cdn.shopify.com/s/files/1/0702/3283/4366/files/{{ collection.metafields.custom.number_sub1 }}.jpg" alt="{{ collection.metafields.custom.name_sub1 }}">{{ collection.metafields.custom.name_sub1 }}</a></div>
{%- endif -%}

Um leere Felder auszublenden verwende ich

{%- if collection.metafields.custom.number_sub1 != blank -%}

Sicherlich könnte man

<img src="https://cdn.shopify.com/s/files/1/0702/3283/4366/files/{{ collection.metafields.custom.number_sub1 }}.jpg"

noch sauberer gestalten, indem man mit der Variable für den image path arbeitet. Habe es aber nicht hinbekommen 2 Variabeln ineinander zu fügen.

Ein anderer Nachteil ist, dass ich mit zwei Textfeldern für den Link zur Kategorie und den Kategorienamen arbeiten muss, weil der Referenztyp "Kategorie" nicht korrekt ausgegeben wird. 

[Gabe]

@befla 

Ok das klingt schon mal als wärst du einen Schritt weiter und es ist gut dynamisch die Titel und Bilder deiner Kategorien in der Kategoriebeschreibung auszugeben denke ich mal. Ich kann es nicht bestätigen, aber wenn du ein Kategorien-Metafeld mit dem Typ "Eine Kategorie" erstellt hast, dann könntest du vielleicht auf das collection-Objekt zugreifen, um Informationen über die Kategorie zu erhalten. Vielleicht die folgenden Liquid-Tags in deiner Kategoriebeschreibungsdatei verwenden, um den Titel und das Bild der Kategorie anzuzeigen:

{{ collection.title }} <!-- Gibt den Titel der Kategorie aus -->
<img src="{{ collection.image | img_url }}" alt="{{ collection.title }}"> <!-- Gibt das Bild der Kategorie aus -->

Du kannst diese Tags in deine Kategoriebeschreibung einfügen, um den Titel und das Bild der aktuellen Kategorie anzuzeigen. Beachte jedoch, dass das Bild der Kategorie möglicherweise nicht verfügbar ist, wenn es kein Bild für die Kategorie gibt oder das Bild fehlerhaft ist.

Wenn du Subkategorien in der Kategoriebeschreibung auflisten möchtest, musst du auf die subcollections-Eigenschaft des collection-Objekts zugreifen. Hier ist eine IF-Statement, mit der du ggf. eine Liste der Subkategorien der aktuellen Kategorie erstellen könntest:

{% if collection.subcollections.size > 0 %}
  <h2>Subkategorien</h2>
  <ul>
    {% for subcollection in collection.subcollections %}
      <li><a href="{{ subcollection.url }}">{{ subcollection.title }}</a></li>
    {% endfor %}
  </ul>
{% endif %}

Es prüft, ob die subcollections-Eigenschaft des collection-Objekts vorhanden ist und wenn ja, wird eine Überschrift und eine Liste aller Subkategorien erstellt.

Weiss nicht ob das helfen kann ¯\_(ツ)_/¯