FROM CACHE - de_header

Kategorien in Blog darstellen (Dawn-Theme)

Yannick1510
Tourist
10 0 1

Hallo, ich habe folgendes Projekt:

Ich schreibe Blogartikel. Innerhalb dieser Artikel soll eine Kategorie, bzw. Produkte mit bestimmten Tags angezeigt werden. Bsp: Blog Artikel über das Thema Kirschholz -> innerhalb dieses Artikels sollen Produkte mit dem Tag Kirschholz angezeigt werden.

Ich möchte nicht einfach nur einen Link / Bilder oder Ähnliches in meinem Blog integrieren, sondern eine "echte" Kategorie anzeigen, wie eben die Kategorie-Raster im Dawn-Theme.

Ich habe bereits versucht, dies mit Metafeldern umzusetzen, leider ohne Erfolg.

Ich hoffe, ihr könnt mir helfen. LG

6 ANTWORTEN 6
Gabe
Shopify Staff
Shopify Staff
14420 2265 3452

Hey @Yannick1510 

 

Danke für die Fragen und das Schreiben von vielem Blog Inhalt ist eine tolle Sache für deine Kunden. Das Einbinden einer Kategorie oder von Produkten mit bestimmten Tags direkt in einen Blogartikel in Shopify erfordert dennoch etwas fortgeschrittene Bearbeitung von deine Theme Liquid.

 

Zunächst müsstest du die Produkte mit dem gewünschten Tag mit einer IF-Statement oder FOR-Loop durchsuchen und dann in einer Grid-Struktur (wie das Kategorie-Raster im Dawn-Theme) darstellen, sowohl auf Desktop als auch auf Mobile in einer Weise das auch gut für die Barrierefreiheiten ist, was das ganze noch viel kompliziert macht.

 

Ein Liquid-Code wie den folgenden könnte das im Blog Liquid Code ggf. machen an der Stelle, wo du die Produkte anzeigen möchtest, aber das kann ich nicht bestätigen und alle Theme arbeiten im Code ja anders:

 

{% assign tag_name = 'Kirschholz' %}
<div class="product-grid">
 {% for product in collections.all.products %}
   {% if product.tags contains tag_name %}
     <div class="product-item">
       <a href="{{ product.url }}">
         <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
         <p>{{ product.title }}</p>
         <p>{{ product.price | money_with_currency }}</p>
       </a>
     </div>
   {% endif %}
 {% endfor %}
</div>

 

Möglicherweise musst du das auch mit. etwas CSS anpassen, um das Product Grid so zu gestalten, dass es dem Dawn-Theme ähnelt, sowohl auf Desktop als auch auf Handy. Hier nur ein einfaches CSS Beispiel und muss ggf. angepasst werden:

 

.product-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 20px;
}

.product-item {
 text-align: center;
 border: 1px solid #eee;
 padding: 10px;
}

.product-item img {
 max-width: 100%;
 height: auto;
}

.product-item p {
 margin: 10px 0;
}

 

Der obige CSS-Code ist ein einfaches Grundgerüst, das sowohl auf Desktop- als auch auf Mobilgeräten funktionieren sollte. Das Grid-Layout mit grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); wird versuchen, so viele Elemente wie möglich nebeneinander zu platzieren, solange sie mindestens 200 Pixel breit sind, und sie sonst untereinander anordnen.

 

Allerdings könnten je nach dem genauen Design und den Anforderungen deines Themes weitere Optimierungen und Anpassungen für Mobilgeräte nötig sein. Zum Beispiel könntest du Media Queries verwenden, um spezifische Styles für verschiedene Bildschirmgrößen festzulegen.

Hier ist ein erweiterter CSS, der speziellere Anpassungen für mobile Geräte vornimmt:

 

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.product-item {
  text-align: center;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  max-width: 100%;
  height: auto;
}

.product-item p {
  margin: 10px 0;
}

/* Mobile-Anpassungen */
@media (max-width: 767px) {
  .product-grid {
    grid-template-columns: 1fr; /* Produkte nehmen auf mobilen Geräten die volle Breite ein */
    gap: 10px; /* Reduzierter Abstand zwischen den Produkten */
  }
  
  .product-item {
    padding: 5px; /* Reduzierter Padding für Produkte */
  }
}

 

Mit dieser Erweiterung nimmt jedes Produkt auf Mobilgeräten (mit einer Breite von bis zu 767 Pixel) die volle Breite ein, und es gibt einige kleinere Anpassungen, um das Layout enger und besser für kleinere Bildschirme zu gestalten.

Aber wie immer ist es wichtig, den Code in deinem speziellen Shop und auf verschiedenen Geräten zu testen, um sicherzustellen, dass er wie gewünscht funktioniert.

 

Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen! 😉

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

Yannick1510
Tourist
10 0 1

Hey @Gabe,

lieben Dank für Deine Hilfe! Das hat mir auf jeden Fall schon extrem geholfen. Ich habe den Code noch so modifiziert, dass der Tag automatisch aus dem Blog gezogen wird:

 

<div class="product-grid">
  {% assign tag_name = article.tags.first %}
  {% for product in collections.all.products %}
    {% if product.tags contains tag_name %}
      <div class="product-item">
        <a href="{{ product.url }}">
          <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
          <p>{{ product.title }}</p>
          <p>{{ product.price | money_with_currency }}</p>
        </a>
      </div>
    {% endif %}
  {% endfor %}
</div>

 

Zu den CSS: Dein Code funktioniert schon ganz gut. Gibt es denn die Möglichkeit, einfach die CSS Styles eines anderen Standard-Abschnittes zu übernehmen, wie " card-wrapper product-card-wrapper" (ich weiß nicht genau wie die Klasse der Standart Produkt-Karten heißt).

Yannick1510
Tourist
10 0 1

(doppelter Kommentar)

Gabe
Shopify Staff
Shopify Staff
14420 2265 3452

Hey @Yannick1510 

 

Super, freut mich, dass das geklappt hat! 😉

 

  • Gibt es denn die Möglichkeit, einfach die CSS Styles eines anderen Standard-Abschnittes zu übernehmen, wie " card-wrapper product-card-wrapper" (ich weiß nicht genau wie die Klasse der Standart Produkt-Karten heißt).

Ja, du kannst die genaue Klasse mit der Chrome Developer Console erkundigen indem du einen Rechtsklick genau auf die Stelle im Frontend machst -> "Inspect". Dann in der Console die CSS Class einsehen! Klicke in den .gif unten und warte bis es im Full Screen öffnet:

 

19-03-0avgd-8uohu

 

Hoffe das hilft dir weiter!

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

Yannick1510
Tourist
10 0 1

Danke nochmal für die Antwort. Aktuell klappt es bei mir  nur leider noch nicht. Die von dir erstellen Artikel-Karten sehen so aus:

Yannick1510_0-1697714798069.png


Sie sollen aber so aussehen:

Yannick1510_1-1697714828895.png




Und noch eine zweite Sache: Aktuell befindet sich der komplette Code in einem Custom-Liquid Block unter dem Blog-Text. Kann ich irgendwie auch den Liquid-Block inmitten meines Blog-Artikels schieben?

Danke !

Gabe
Shopify Staff
Shopify Staff
14420 2265 3452

Hey @Yannick1510 

 

Der Grund, warum die gesamten Beschreibungen der Artikel-Karten als blaue Hyperlinks erscheinen, liegt wahrscheinlich daran, dass sie sich innerhalb der <a>-Tags befinden was ich ganz oben vorgeschlagen hatte. Einfach den schließenden <a>-Tag da platzieren wie du ihn haben möchtest. Oder den <a href> ganz auslassen.

 

Und das Einfügen von Liquid-Code direkt in den Text des Blog-Artikels über das normale Shopify-Editor-Fenster ist nicht standardmäßig möglich. 

 

Du könntest ein eindeutiges Trennzeichen oder eine Platzhalterzeichenfolge in deinem Blogtext einfügen (z.B. [[INSERT_PRODUCTS_HERE]]). Wenn du dann das Blog-Artikel-Template bearbeitest, könntest du den Liquid-Code verwenden, um den Inhalt des Artikels bei diesem Trennzeichen zu teilen und den Produkt-Block dazwischen einzufügen:

 

{% assign article_parts = article.content | split: '[[INSERT_PRODUCTS_HERE]]' %}
{{ article_parts[0] | strip_html }}

<!-- Hier kommt dein Produkt-Code -->

{{ article_parts[1] | strip_html }}

 

Du könntest ein benutzerdefiniertes Metafeld erstellen, in dem du angibst, ob und wo der Produktblock eingefügt werden soll, und dann diesen Wert im Template verwenden, um den Block entsprechend einzufügen.

 

Beide Methoden erfordern jedoch einige manuelle Bearbeitungen und könnten nicht ideal sein, abhängig von deinem Workflow und der Anzahl der Artikel, die du bearbeitest. Ich empfehle an dieser Stelle dur au überlegen einen Shopify Experten und Programmierer zu heuern. Die findest du hier und eine E-Mail an die kostet ja nichts und spart dir viel Herzschmerz und Zeit.

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