Artikel Badge erstellen

Artikel Badge erstellen

Ewald Gering 20. Dezember 2016 11

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 ausserdem, 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. Im 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.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

11 Kommentare

  • 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
© 2017 by 8mylez. Powered by Goltfisch GmbH.