Leere Kategorie Nachrichten: Storefront

Darstellung der Nachricht in der Storefront: HTML-Aufbau, CSS-Klassen, Bildgrößen, Alt-Text, CSP-Kompatibilität und eigenes Styling.

English Version

Zurück zur Übersicht

Storefront

Wann die Nachricht erscheint

Das Plugin ersetzt auf Kategorieseiten die Meldung, die Shopware zeigt, wenn eine Produktliste leer ist. Ist für die Kategorie (oder über die Vererbung eine übergeordnete Kategorie) eine Nachricht hinterlegt, erscheint sie anstelle der Standardmeldung. Ohne Nachricht bleibt die Standardmeldung von Shopware unverändert.

HTML-Aufbau

<div class="mmd-empty-category-message deine-klasse">
    <div class="mmd-empty-category-image-wrapper mmd-empty-category-image-wrapper--align-center">
        <img class="mmd-empty-category-image mmd-empty-category-image--size-medium" ...>
    </div>
    <div class="mmd-empty-category-text mmd-empty-category-text--align-center">
        Deine Nachricht
    </div>
</div>

Der Bildbereich erscheint nur, wenn ein Bild gesetzt ist.

CSS-Klassen

Klasse	Varianten	Beschreibung
`mmd-empty-category-message`		Äußerer Container, enthält zusätzlich deine CSS-Klassen aus dem Feld CSS-Klassen
`mmd-empty-category-image-wrapper--align-{wert}`	`left`, `center`, `right`	Ausrichtung des Bildes
`mmd-empty-category-image--size-{wert}`	`small` (150px), `medium` (250px), `large` (400px)	Breite des Bildes, begrenzt auf 100 % der verfügbaren Breite
`mmd-empty-category-text--align-{wert}`	`left`, `center`, `right`	Ausrichtung des Textes

Die Werte aus dem Feld CSS-Klassen werden bereinigt: Es bleiben nur Buchstaben, Ziffern, Bindestriche, Unterstriche und Leerzeichen erhalten.

Bild

Das Bild wird mit der URL aus der Medienverwaltung ausgegeben.
Der Alt-Text lautet „Keine Produkte in {Kategoriename}“ (Snippet mmd.emptyCategory.imageAlt).
Das Bild trägt die Attribute width und height mit dem Wert der gewählten Größe sowie loading="eager" und fetchpriority="high".

CSP-Kompatibilität

Das Plugin verwendet keine Inline-Styles. Layout und Ausrichtung laufen vollständig über CSS-Klassen, sodass strikte style-src-Richtlinien der Content Security Policy keine Probleme machen.

Eigenes Styling

Ergänze das SCSS deines Themes:

.mmd-empty-category-message {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;

    .mmd-empty-category-image {
        margin-bottom: 1rem;
    }

    .mmd-empty-category-text {
        color: #666;

        h3 {
            color: #333;
            margin-bottom: 0.5rem;
        }
    }
}

Mehrsprachigkeit

Der Alt-Text des Bildes liegt als Snippet in Deutsch (de-DE) und Englisch (en-GB) vor. Die Nachricht selbst ist ein Zusatzfeld der Kategorie und wird von dir gepflegt.