FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Related Blog Posts auf Produktseite anzeigen

Gelöst

Related Blog Posts auf Produktseite anzeigen

Roland
Entdecker
18 2 2

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.

Bildschirmfoto 2025-01-17 um 13.23.39.png

 

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.

 

https://community.shopify.com/c/technische-fragen-antworten/produktseite-blogartikel-per-tag-verlink...

 

Bitte um Hilfe. (Ich verwende Dawn Theme 15.2)

1 AKZEPTIERTE LÖSUNG

Roland
Entdecker
18 2 2

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 %}

 

Lösung in ursprünglichem Beitrag anzeigen

4 ANTWORTEN 4

Ben310
Astronaut
1538 184 276

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:

  • Du verkaufst Produkt X und hast einen Blogbeitrag zum Thema „Anfängerfehler beim Kauf von Produkt X“ oder "Tolle Rezepte für Produkt X". Nur auf der PDP wo Produkt X verkauft wird, sprich, nicht Produkt Y oder Z, wird dieser Blogartikel über das Tagging dann angezeigt mit einem Section Titel wie "Blogartikel zum Produkt".

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.

  • Für jeden passenden Blogartikel wird ein HTML-Block erstellt, der ein Bild (article.image), den Titel (article.title), und den Link (article.url) enthält. Zusätzlich wird der Artikel-Auszug (article.excerpt) angezeigt.

Ansonsten kann dir das ein Experte einbauen.

Roland
Entdecker
18 2 2

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.

Roland
Entdecker
18 2 2

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 %}

 

Ben310
Astronaut
1538 184 276

giphy