Liquid, JavaScript, Themes
Hallo
Ich möchte auf Produktseiten passende Blogartikel anzeigen. Zum Produkt die passenden Rezepte.
Die Variante über eine eigene Vorlage pro Produkt finde ich nicht so gut, weil dann muss ich bei Änderungen immer alle Vorlagen ändern.
Ich habe ein Metafeld (Ganze Zahl - Liste) beim Produkt hinzugefügt.
Nun möchte ich den Code so erweitern, dass diese Produkte mit Bild, Überschrift und Link angezeigt werden.
Die Lösung von dieser Seite funktioniert leider nicht. Es wird nur die Überschrift angezeigt. Es scheint so, als würde er die IDs nicht lesen können.
Bitte um Hilfe. (Ich verwende Dawn Theme 15.2)
Gelöst! Zur Lösung
Erfolg.
Ich konnte es nun mit diesem Code lösen. Dazu muss man sagen, dass ich bei einem Blog-Beitrag eine Produktliste als "Benutzerdefinierte Daten" hinterlegt habe.
{% assign specific_blog = blogs['rezepte'] %}
{% if specific_blog %}
<div class="related-blog-posts">
{% if shop.language == 'en' %}
<h2>Recipe ideas</h2>
{% else %}
<h2>Rezeptideen</h2>
{% endif %}
<div class="blog-articles">
{% for article in specific_blog.articles %}
{% if article.metafields.custom.produktliste != blank %}
{% assign related_products = article.metafields.custom.produktliste %}
{% assign product_ids = related_products | split: ',' %}
{% assign clean_product_ids = '' %}
{% for product_gid in product_ids %}
{% assign clean_id = product_gid | remove: 'gid://shopify/Product/' %}
{% assign clean_product_ids = clean_product_ids | append: clean_id | append: ',' %}
{% endfor %}
{% comment %} Entferne das letzte Komma {% endcomment %}
{% assign clean_product_ids = clean_product_ids | slice: 0, clean_product_ids.size | remove_last: ',' %}
{% comment %} Überprüfe, ob die Produkt-ID des aktuellen Produkts in der bereinigten Liste enthalten ist {% endcomment %}
{% if clean_product_ids contains product.id %}
<div class="blog-article">
<a href="{{ article.url }}">
{% if article.image != blank %}
<img src="{{ article.image | img_url: '500x300' }}" alt="{{ article.title }}">
{% else %}
<img src="https://via.placeholder.com/300" alt="Platzhalter-Bild">
{% endif %}
{% if shop.language == 'en' %}
<h3>{{ article.metafields.translations.title_en | default: article.title }}</h3>
{% else %}
<h3>{{ article.title }}</h3>
{% endif %}
</a>
<p>{{ article.excerpt }}</p>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% else %}
<p>Blog „Rezepte“ nicht gefunden.</p>
{% endif %}
Im oben-verlinkten Thread bietet @Gabe weitere Threads die weitere Lösungen anbieten. Eine ist die app von @Thomas_Lang1, wie z. B. das Beispiel:
Vielleicht einen Ansatz wie den folgenden (ohne Gewähr):
{% if product.metafields.custom.related_blogs != blank %}
<div class="related-blog-posts">
<h2>Blogartikel zum Produkt</h2>
<div class="blog-articles">
{% assign related_blog_ids = product.metafields.custom.related_blogs %}
{% for blog in blogs %}
{% for article in blog.articles %}
{% if related_blog_ids contains article.id %}
<div class="blog-article">
<a href="{{ article.url }}">
<img src="{{ article.image | img_url: 'medium' }}" alt="{{ article.title }}">
<h3>{{ article.title }}</h3>
</a>
<p>{{ article.excerpt }}</p>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
Oder:
{% if product.metafields.custom.related_blogs != blank %}
<div class="related-blog-posts" style="margin-top: 30px; padding: 20px; background-color: #f9f9f9;">
<h2>Blogartikel zum Produkt</h2>
<div class="blog-articles grid grid--2-col-tablet grid--3-col-desktop">
{% assign related_blog_ids = product.metafields.custom.related_blogs %}
{% for blog in blogs %}
{% for article in blog.articles %}
{% if related_blog_ids contains article.id %}
<div class="blog-article" style="margin-bottom: 20px; text-align: center;">
<a href="{{ article.url }}" style="text-decoration: none; color: inherit;">
{% if article.image != blank %}
<img src="{{ article.image | img_url: 'medium' }}" alt="{{ article.title }}" style="max-width: 100%; height: auto; border-radius: 8px;">
{% else %}
<img src="https://via.placeholder.com/300" alt="Platzhalter-Bild" style="max-width: 100%; height: auto; border-radius: 8px;">
{% endif %}
<h3 style="font-size: 18px; margin: 10px 0;">{{ article.title }}</h3>
</a>
<p style="font-size: 14px; color: #555;">{{ article.excerpt }}</p>
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
{% endif %}
Der Code prüft, ob das related_blogs-Metafeld des Produkts nicht leer ist (!= blank).
related_blog_ids enthält die Blog-IDs aus dem Metafeld (Liste).
Der Code iteriert über alle Blogs und deren Artikel und prüft, ob die Artikel-ID in related_blog_ids enthalten ist.
Ansonsten kann dir das ein Experte einbauen.
Danke für deine Antwort. Leider hat der Vergleich nicht funktioniert. Daher musste ich es umbauen, dass ich nicht bei einem Produkt die Blog-IDs hinterlege, sondern bei einem Blogbeitrag die Produkte.
Erfolg.
Ich konnte es nun mit diesem Code lösen. Dazu muss man sagen, dass ich bei einem Blog-Beitrag eine Produktliste als "Benutzerdefinierte Daten" hinterlegt habe.
{% assign specific_blog = blogs['rezepte'] %}
{% if specific_blog %}
<div class="related-blog-posts">
{% if shop.language == 'en' %}
<h2>Recipe ideas</h2>
{% else %}
<h2>Rezeptideen</h2>
{% endif %}
<div class="blog-articles">
{% for article in specific_blog.articles %}
{% if article.metafields.custom.produktliste != blank %}
{% assign related_products = article.metafields.custom.produktliste %}
{% assign product_ids = related_products | split: ',' %}
{% assign clean_product_ids = '' %}
{% for product_gid in product_ids %}
{% assign clean_id = product_gid | remove: 'gid://shopify/Product/' %}
{% assign clean_product_ids = clean_product_ids | append: clean_id | append: ',' %}
{% endfor %}
{% comment %} Entferne das letzte Komma {% endcomment %}
{% assign clean_product_ids = clean_product_ids | slice: 0, clean_product_ids.size | remove_last: ',' %}
{% comment %} Überprüfe, ob die Produkt-ID des aktuellen Produkts in der bereinigten Liste enthalten ist {% endcomment %}
{% if clean_product_ids contains product.id %}
<div class="blog-article">
<a href="{{ article.url }}">
{% if article.image != blank %}
<img src="{{ article.image | img_url: '500x300' }}" alt="{{ article.title }}">
{% else %}
<img src="https://via.placeholder.com/300" alt="Platzhalter-Bild">
{% endif %}
{% if shop.language == 'en' %}
<h3>{{ article.metafields.translations.title_en | default: article.title }}</h3>
{% else %}
<h3>{{ article.title }}</h3>
{% endif %}
</a>
<p>{{ article.excerpt }}</p>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
{% else %}
<p>Blog „Rezepte“ nicht gefunden.</p>
{% endif %}
Mit dem Lernpfad der Shopify Academy und dem Verified Skills-Badge Expanding Your Sho...
By Shopify Feb 7, 2025Den Verkauf im Großhandel steigern: In der Shopify Academy lernst du, wie das geht, zum...
By Shopify Feb 3, 2025Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024