Mein erster onlineshop
mit shopware 5
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.
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.
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.tplWie 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.
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Ü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
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
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
vielen Dank!
Hast du ein aktuelles Beispiel wo wir uns das Ganze anschauen können?
Gruß
Alexander
Wie muss man das einbinden, um den Badge ebenso auf der Produktdetail Seite "auf" dem Bild zu haben?
dafür musst du das Freitextfeld im Template der Detailseite abfragen und anzeigen lassen.
Beste Grüße
Ewald
>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
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
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
hast du die ribbon.less in der all.less Datei deines Themes mit dem richtigen Pfad eingebunden?
Viele Grüße
Ewald
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
hat sich erledigt. Habs hinbekommen, sogar mit Verlinkung. :-)
Viele Grüße
Achim
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
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
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
in meinem Theme Ordner habe ich die Datei nicht. Oder ist gemeint das man diese mit dem Code Fuzel neu anlegt ? LG
genau, die Datei muss dementsprechend angelegt und mit neuem Code gefüllt werden.
Viele Grüße
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?
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
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
ist das für SW ab 5.2?
Mit meiner 5.1x gehts so nicht, leider.
Wie kann es für mich gehen?
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?