Theme-Kompatibilität

FutiStockBadge verändert die Storefront ausschließlich über einen einzigen, gezielten Twig-Override.

sw_extends auf badges.html.twig

Das Plugin erweitert per sw_extends die Datei @Storefront/storefront/component/product/card/badges.html.twig und überschreibt darin zwei Blöcke: component_product_badges_discount und component_product_badges_new. Alle übrigen Blöcke der Datei bleiben unverändert und werden per parent()-Vererbung normal ausgegeben.

Was passiert bei einem Theme-Override derselben Datei

Überschreibt Ihr Theme oder ein anderes Plugin dieselbe Datei (badges.html.twig) ebenfalls, entscheidet die Plugin- bzw. Theme-Ladepriorität von Shopware, welcher Override im Templating-Baum zuerst greift:

• Grundsätzlich gilt: später geladene Erweiterungen können früher geladene per sw_extends-Kette überschreiben, Blöcke einzelner Erweiterungen bleiben dabei additiv, solange sie unterschiedliche Blocknamen verwenden.
• Überschreibt eine andere Erweiterung denselben Blocknamen (component_product_badges_discount oder component_product_badges_new) komplett neu statt ihn per parent() zu erweitern, kann das die Ausgabe von FutiStockBadge unterdrücken oder ersetzen.

Konfliktsymptome

• Das Lagerbestand-Badge oder das Rabatt-Badge erscheint gar nicht, obwohl die Einstellungen korrekt sind
• Ein doppeltes Badge erscheint (zwei Plugins hängen unabhängig voneinander etwas an denselben parent()-Aufruf)
• Änderungen an der Plugin-Konfiguration zeigen keine Wirkung im Storefront

Prüfen Sie in diesem Fall, ob ein Theme oder ein weiteres Plugin ebenfalls badges.html.twig überschreibt, und passen Sie ggf. die Ladereihenfolge oder den betroffenen Theme-Code an. Details zur Fehlersuche unter Troubleshooting.

CSS-Klasse für eigenes Styling

Das Lagerbestand-Badge trägt die Klasse futi-badge-lowstock zusätzlich zur Standardklasse badge:

<span class="badge futi-badge-lowstock" style="background-color: #e2650c; color: #fff;">
  Nur noch 3
</span>

Möchten Sie das Badge optisch an Ihr Theme anpassen (z. B. Schriftgröße, Padding, Border-Radius), können Sie eigenes CSS gezielt über die Klasse futi-badge-lowstock ansprechen, ohne den Twig-Override selbst zu verändern.

Inline-Style und Spezifität

Die konfigurierte Hintergrundfarbe (lowStockColor) sowie die weiße Schriftfarbe werden als Inline-Style direkt am Element gesetzt. Inline-Styles haben eine sehr hohe CSS-Spezifität und überschreiben reguläre Klassen-Selektoren aus Ihrem Theme-Stylesheet. Möchten Sie die Farbe per Theme-CSS statt über die Plugin-Einstellung steuern, müssten Sie entweder !important verwenden oder die Farbe direkt über die Plugin-Konfiguration setzen — Letzteres ist der empfohlene Weg, siehe Konfiguration.