Wie erstelle ich in Shopware einen Artikel Badge?

Wie erstelle ich in Shopware einen Artikel Badge?

Ewald Gering 20. Dezember 2016 24

Es gibt von Shopware aus die Badges Tipp, Sale und Neu.
Wäre es nicht toll, wenn man eigene Badges hinzufügen kann?

Heute erklären wir euch wie ihr neue Badges im Theme erstellen könnt. Als Beispiel erstellen wir ein Versandkostenfrei Badge.

Natürlich kann man noch weitere erstellen für z. B. eine Ab18 Kennzeichnung oder für einen Abverkauf.
Ihr könnt eurer Kreativität freien lauf lassen!

Info: Die Freitextfeld-Verwaltung gibt es erst ab Shopware 5.2!

Das ganze sieht in unserem Beispiel so aus.

shopware_versandkostenfrei_badge

Als Erstes erstellen wir ein eigenes Freitextfeld in Backend um bei jedem Artikel die neuen Badges auswählen zu können.

Dafür gehen wir auf Einstellungen... Freitextfeld-Verwaltung und im Normalfall sollte oben die Tabelle für Artikel ausgewählt sein "Artikel (s_article_attributes)".
Hier können wir einfach ein neues hinzufügen.

Jetzt kann man den Spaltennamen wählen wie z. B. "badge_versandkostenfrei". Später sollen wir nur eine Checkbox anklicken, also den Spaltentyp dementsprechend wählen.

shopware_freitextfeld_erstellen

Das können wir nun abspeichern und uns in der Artikelübersicht einen Artikel raussuchen und finden unten unter Freitextfelder unser eben erstelltes Versandkostenfrei Badge. Dieses haken wir ab und speichern den Artikel.

Soweit zu den Freitextfeldern, nun geht es an die Programmierung.
Dafür geht es in unser Theme, genauer gesagt:

themes/Frontend/DEINTHEME/frontend/listing/product-box/product-badges.tpl

Wie immer wird von der Originalen Datei abgeleitet. Die neuen Badges sollen als letzte angezeigt werden, also ganz unten.

In der Originalen Datei sieht man, dass die ESD-Badges die letzten sind. Also nehmen wir den Block und fügen unsere danach ein.

{extends file="parent:frontend/listing/product-box/product-badges.tpl"}

{block name='frontend_listing_box_article_esd'}
  {$smarty.block.parent}
    {if $sArticle.badge_versandkostenfrei}
      <div class="product--badge badge--free-shipping">{s namespace='frontend/listing/box_article' name="ListingBoxShippingCosts"}Versandkostenfrei{/s}</div>
  {/if}
{/block}

Man sieht hier außerdem, dass wir einen neuen Textbaustein erstellen und direkt mit Inhalt füllen.
Die Abfrage prüft unser vorhin erstelltes Freitextfeld. Wenn ihr neue erstellt, immer darauf achten, dass der Spaltenname stimmt.

Wenn ihr jetzt das Theme neu kompiliert, sieht man natürlich nur den Text bei den Artikeln.
Es fehlt noch das Design. In folgendem Verzeichnis erstellen wir die "product-box.less".

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules
.product--box
	.product--badges {
		.badge--free-shipping {
			color: #FFFFFF;
			background: #0B489D;
	}
}

Wichtig: Natürlich muss die neue Less Datei noch in der all.less eingebunden werden.

@import "_modules/product-box";

Schon sieht die Badge wie die anderen auch aus. Wenn der Cache gelöscht und das Theme neu kompiliert ist, wird das neue Badge sichtbar.
Wir wünschen viel Spaß beim Ausprobieren und ihr könnt uns gerne mal schreiben, wofür ihr Badges erstellt habt.

Weitere Links

24 Kommentare

  • Hallo Ewald,

    vielen Dank für diesen Beitrag. Konnte dies Problemlos umsetzen. Eine ergänzende Frage habe ich allerdings noch. Wie kann ich das Badge auf der englischen Website übersetzen. Das Freitextfeld ist als übersetzbar markiert.

    Über eine kurze Antwort bin ich dir sehr dankbar.

    Beste Grüße

    Irene
  • Hallo Herr Gering,

    das ist wirklich eine ganz tolle Anleitung. Vielen Dank dafür.

    Ich stehe momentan vor dem Problem, dass ich für ein Projekt 2 Grafiken auf die Bilder im Listing legen muss (Kollektions-Logo (hierfür habe ich einfach den Hersteller missbraucht) und ein Material-Logo). Ist das mit einer Abwandlung dieser Anleitung möglich? Bisher hat es leider nicht geklappt. Haben Sie evt. einen Tip für mich wie man hier am besten vorgeht?

    Vielen Dank
  • Hey Michel,

    vielen Dank!

    Hast du ein aktuelles Beispiel wo wir uns das Ganze anschauen können?

    Gruß
    Alexander
  • Hallo, hat super geklappt.
    Wie muss man das einbinden, um den Badge ebenso auf der Produktdetail Seite "auf" dem Bild zu haben?
  • Hey Yannik,

    dafür musst du das Freitextfeld im Template der Detailseite abfragen und anzeigen lassen.

    Beste Grüße
    Ewald
  • >Hey Yannik,
    >dafür musst du das Freitextfeld im Template der Detailseite abfragen und >anzeigen lassen.
    >Beste Grüße
    >Ewald

    Hallo Ewald,

    kannst du mir sagen wie? in welcher Datei und an welcher Stelle damit es wie in der Kategorie-ansicht auch "auf dem Bild" angezeigt wird?

    Grüße
    Yannik
  • Hey Yannik,

    da musst du dir die 'frontend/detail' Dateien anschauen. Aus dem Ärmel kann ich dir das leider auch nicht genau sagen. Ich denke in der image.tpl muss was angepasst werden. Falls du da Hilfe benötigst kannst du dich gerne an unseren Support wenden.

    Beste Grüße
    Ewald
  • Hallo,
    gibt es auch die Möglichkeit, Ribbons anzeigen zu lassen. Seit der 5.3. wurden die ja entfernt, sprich, die ribbon.less gibt es nicht mehr.
    Ich würde nämlich gerne auf der rechten Seite ein Ribbon anzeigen lassen, komme aber irgenwie nicht weiter. Die ribbon.less hab ich schon auf den Server geladen, aber irgendwie wird sie ignoriert.

    Könnt ihr helfen?

    Viele Grüße
    Achim
  • Hey Achim,

    hast du die ribbon.less in der all.less Datei deines Themes mit dem richtigen Pfad eingebunden?

    Viele Grüße
    Ewald
  • Hallo,

    ich Dummerchen. Ich hab die ribbon.less jetzt in mein Theme kopiert und auch in all.less eingebunden. Habs zum testen bei einem Produkt auf der Detailseite.
    Nun wirds auch angezeigt. Danke für den Tipp.

    Jetzt muss ich das nur noch ins Listing bekommen. Hast Du einen Tipp, welche Datei da die richtige ist?

    Viele Grüße
    Achim
  • Hallo,

    hat sich erledigt. Habs hinbekommen, sogar mit Verlinkung. :-)

    Viele Grüße
    Achim
  • Tolle Anleitung. Kann ich auch Icons per Url aufrufen und diese auf der rechten Seite nebeneinander ausgeben?
  • Hey Michael,

    das geht auch! Erfordert allerdings etwas mehr Anpassungen. Du brauchst dann ein zweites Freitextfeld fuer die URL. Um die Badges auf der rechten Seiten nebeneinander anzuzeigen kannst du dir display: flex; und justify-content: flex-end; anschauen. Ich denke das gibt dir eine gute Richtung vor.

    Viel Spaß beim Basteln :)

    Gruß
    Alexander
  • Guten Morgen ;-)
    Ich muss ja sagen mal wieder eine SUPER Anleitung....
    Ich habe aber folgendes Problem:
    Ich versuche grade 3 dieser Baget´s anzulegen aber es wird mir immer nur 1 angezeit obwohl im Artikel alle 3 aktiv sind.

    Hier mal meine produkt-baget.tpl
    {extends file="parent:frontend/listing/product-box/product-badges.tpl"}

    {block name='frontend_listing_box_article_esd'}
    {$smarty.block.parent}
    {if $sArticle.badge_versandkostenfrei}
    {s namespace='frontend/listing/box_article' name="ListingBoxShippingCosts"}Versandkostenfrei{/s}
    {/if}
    {/block}

    {block name='frontend_listing_box_article_esd'}
    {$smarty.block.parent}
    {if $sArticle.badge_beliebt}
    {s namespace='frontend/listing/box_article' name="ListingBoxBeliebt"}Beliebt{/s}
    {/if}
    {/block}

    {block name='frontend_listing_box_article_esd'}
    {$smarty.block.parent}
    {if $sArticle.badge_weg_weg}
    {s namespace='frontend/listing/box_article' name="ListingBoxWegWeg"}weg = weg{/s}
    {/if}
    {/block}

    hier meine product-box.less
    .product--box .product--badges {
    .badge--free-shipping {
    color: #FFFFFF;
    background: #FF8B00;
    }
    }

    .product--box .product--badges {
    .badge--beliebt {
    color: #FFFFFF;
    background: #85A601;
    }
    }

    .product--box .product--badges {
    .badge--weg_weg {
    color: #FFFFFF;
    background: #000000;
    }
    }

    Was mache ich Falsch?

    Gruß
    Sebastian
  • Hey Sebastian,

    du überschreibst den Block 'frontend_listing_box_article_esd' immer wieder. Daher wird nur das letzte genutzt. Du könntest die badges in diesen einen Block packen. Es sollte dann so aufgebaut sein:
    {Block}
    {parent block}

    Code Badge 1 (if abfrage + div + textbaustein)

    Code Badge 2 (if abfrage + div + textbaustein)

    Code Badge 3 (if abfrage + div + textbaustein)
    {/block}

    Viele Grüße
    Ewald

  • themes/Frontend/DEINTHEME/frontend/listing/product-box/product-badges.tpl

    in meinem Theme Ordner habe ich die Datei nicht. Oder ist gemeint das man diese mit dem Code Fuzel neu anlegt ? LG
  • Hey Daniele,

    genau, die Datei muss dementsprechend angelegt und mit neuem Code gefüllt werden.

    Viele Grüße
    Ewald
  • Hallo Ewald,

    ich bin begeisterter Blog Leser von 8mylez. Ich habe diesen wie auch zuvor schon einige andere in unserem Shop www.heimatwolle.de umgesetzt.
    Nun habe ich einen neuen Shop gebaut (www.porzelanmalerei-behringer.de) und hier scheinen die Badges irgendwie nicht zu funktionieren.
    Den Code habe ich 1:1 übernommen und ich kann keinen Fehler finden.
    Nach einiger Recherche habe ich im shopware Forum einen Artikel gefunden, der sich mit endlosem Scrollen und im Zusammenhang stehenden Problemen beim Laden einer Seite befasst. (sinngemäß wäre die Reihenfolge beim laden der Seite falsch, wodurch nicht die geänderte- sondern die originale product-box.tpl geladen wird).
    Fällt Dir dazu was ein?
  • Hey Fritz,

    das Neuladen über Ajax ist normalerweise kein Problem. Es wird unsere veränderte product-badges.tpl geladen. Es wird wohl an einer anderen Sache liegen. Schreib uns am besten eine E-Mail an support@8mylez.com und wir schauen was sich da machen lässt.

    Viele Grüße
    Ewald
  • bei uns sind die badges mit sprites realisiert und ich habe leider noch nicht geblickt oder die zeit gehabt, dass dahingehend anzupassen. Denkanstöße?
  • Hallo Steffen,

    du kannst die Sprites für die neuen Elemente genauso laden, wie bei den Standard Badges. Sprich die Sprites per Less als Background-image einbinden. Oder meinst du etwas anderes?

    Viele Grüße
    Ewald
  • Hallo,
    ist das für SW ab 5.2?

    Mit meiner 5.1x gehts so nicht, leider.
    Wie kann es für mich gehen?
  • Hallo Bob,

    die Freitextfeld-Verwaltung gibt es erst seit 5.2.
    In deinem Fall kann man ein Plugin entwickeln und ein neues Freitextfeld anzulegen. Wenn allerdings eins der vorgegebenen Freitextfelder noch frei ist, kannst du dieses nutzen. Die Variable lautet dann $sArticle.attr1 oder $sArticle.attr2 . Dann muss ma noch in der Detailansicht die Anzeige der Freitextfelder deaktivieren. Der Block hierfür ist in der Datei "frontend/detail/index.tpl" zu finden.

    Sollten noch Fragen auftauchen, helfe ich gerne weiter.

    Viel Spaß beim ausprobieren & Viele Grüße,
    Ewald

Was denkst du?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz