Erscheinungsbild
Theme-Integration
In den meisten Fällen funktioniert das Plugin ohne Anpassung mit Ihrem Theme. Position, Farbe und Größe ändern Sie über die Plugin-Einstellungen.
Diese Seite ist relevant, wenn:
- Sie ein Theme einsetzen, das den Hinweis an einer Bildfläche nicht zeigt.
- Ihr Theme-Anbieter die technische Einbindung ergänzen soll.
Welche Flächen gekennzeichnet werden
Das Plugin hängt sich an die Standardstellen von Shopware: Produktgalerie samt Zoom-Ansicht, Listing-Karten, Warenkorb, Suchvorschläge, Schnellansicht sowie die Bild-Elemente des Erlebniswelten-Baukastens (Bild, Bild-Slider, Bildergalerie, Block-Hintergrundbild). Jedes Theme, das der Standardstruktur von Shopware folgt, ist damit ohne Anpassung abgedeckt.
Themes mit eigenen Bild-Elementen
Manche Themes bringen eigene Slider, Banner, Kategorie-Kacheln oder ein zweites Produktbild beim Überfahren einer Karte mit. Solche Flächen sind nicht Teil von Shopwares Standardausgabe und müssen einzeln unterstützt werden. Das Plugin bindet bereits mehrere verbreitete Zusatzflächen an.
Fehlt der Hinweis an einer solchen Stelle, senden Sie Theme-Name, Theme-Version und die betroffene Seite an ms@indigo7.de. Ob der Alt-Text-Zusatz trotzdem erscheint, hängt ebenfalls von der Bildausgabe des Themes ab.
Badge fehlt? So grenzen Sie es ein
Testen Sie die betroffene Stelle einmal mit dem Standard-Theme von Shopware. Erscheint das Badge dort, liegt es an Ihrem Theme — dann hilft entweder ein Update des Plugins oder die Drop-in-Lösung unten. Kontakt: ms@indigo7.de.
Wenn der Hinweis fehlt
Ersetzt ein Theme die Bildausgabe vollständig, kann es zugleich die Stelle entfernen, an der das Plugin seinen Hinweis ergänzt.
Bitten Sie Ihren Theme-Anbieter, an der betroffenen Bildausgabe den folgenden Twig-Baustein einzubinden und dabei die dort verwendete Medienvariable zu übergeben:
twig
{% if isPluginActive('Indigo7AiLabel') %}
{% sw_include '@Indigo7AiLabel/storefront/component/ai-badge.html.twig' with {
media: media,
mode: 'full'
} %}
{% endif %}CSS-Variablen (für Theme-Entwickler)
Wenn Ihr Theme-Anbieter die Darstellung über ein eigenes Stylesheet steuern möchte, stehen dafür folgende CSS-Variablen zur Verfügung:
scss
:root {
--i7-ai-badge-bg: rgba(0, 0, 0, 0.7);
--i7-ai-badge-fg: #fff;
--i7-ai-badge-radius: 999px;
--i7-ai-badge-font-size: 0.75rem;
--i7-ai-badge-padding-x: 0.5rem;
--i7-ai-badge-padding-y: 0.25rem;
--i7-ai-badge-z: 5;
--i7-ai-badge-compact-size: 22px;
}Reihenfolge der Stile
Die Plugin-Einstellungen werden im Storefront-<head> als <style>-Block nach dem kompilierten Theme-Stylesheet ausgegeben. Bei gleicher CSS-Spezifität gewinnt daher die Plugin-Einstellung.
Soll das Theme Vorrang haben, erhöhen Sie die Spezifität, statt nur :root zu verwenden — zum Beispiel html:root { --i7-ai-badge-bg: … }. Die Variable --i7-ai-badge-z wird von den Plugin-Einstellungen nicht gesetzt und bleibt vollständig dem Theme überlassen.