dfvariantswatch — Varianten-Foto-Swatches & Bestand

Überblick

dfvariantswatch ersetzt die Kombinations-Dropdowns auf PrestaShop-Produktseiten durch klickbare visuelle Swatches (Fotos, Farben oder Text), zeigt beim Überfahren eine Vorschau der Variante in der Hauptgalerie und den Bestand jeder Variante direkt auf dem Swatch an.

Das Modul erweitert die nativen PrestaShop-Widgets per JavaScript: Es ersetzt kein Theme-Template, was es mit Classic, Hummingbird und den meisten Premium-Themes kompatibel hält.

Installation

1. Backoffice → Module → Modul-Manager → Modul hochladen
2. Ziehen Sie das Archiv dfvariantswatch.zip hinein und klicken Sie auf Installieren
3. Klicken Sie auf Konfigurieren, um die Einstellungen zu öffnen

Die Installation erstellt die Tabelle df_variant_swatch, den Bildordner img/dfvariantswatch/ und die Standard-Konfigurationswerte. Keine Theme-Änderung erforderlich.

Wie Swatches gewählt werden

Für jedes Attribut wählt das Modul die Swatch-Quelle in dieser Prioritätsreihenfolge:

1. Im Backoffice hochgeladenes Bild für dieses Attribut (Reiter Swatches pro Attribut)
2. Hex-Farbcode, im Backoffice definiert
3. Automatisch abgeleitetes Bild aus der ersten Kombination mit diesem Attribut
4. Native PrestaShop-Farbe des Attributs (Farbfeld der Gruppe)
5. Text-Chip mit dem Attributnamen

Die Absicherung für undifferenzierte Gruppen

Die automatische Ableitung wird nur beibehalten, wenn sich die Bilder zwischen den Attributen der Gruppe tatsächlich unterscheiden oder die Gruppe in PrestaShop als Farbgruppe markiert ist. Praktisch: Bei einem Produkt mit einer Größengruppe (S, M, L, XL), deren Kombinationen dieselben Fotos teilen, bleiben die Größen als Text-Chips, statt viermal dasselbe Foto zu zeigen.

Konfiguration

Allgemeine Einstellungen

• Modul aktivieren — schaltet das Front-Rendering ab, ohne zu deinstallieren
• Galerie beim Überfahren wechseln — Varianten-Vorschau beim Hover über einen Swatch
• Bestandsabzeichen anzeigen — Verfügbarkeitsstatus unter jedem Swatch
• Ausverkaufte Varianten ausblenden — blendet erschöpfte Swatches vollständig aus, statt sie durchzustreichen
• Form — rund, quadratisch oder Pille; Größe in Pixeln
• Schwellenwert geringer Bestand — darunter wechselt das Abzeichen in den Zustand geringer Bestand
• Bestandsbeschriftungen — alle drei Texte sind anpassbar und über Lokalisierung → Übersetzungen übersetzbar
• Datenlademodus — Inline (empfohlen) oder AJAX, siehe unten
• Nicht als Swatches dargestellte Gruppen — ausgewählte Gruppen behalten ihr natives Widget

Swatches pro Attribut

Dieser Reiter listet alle Attributgruppen des Shops. Für jeden Wert können Sie ein Bild hochladen (jpg, png, webp oder gif, maximal 2 MB, 200 mal 200 Pixel empfohlen) oder einen Farbcode im Format #RRGGBB eingeben, den aktuellen Swatch in der Vorschau ansehen und einen bestehenden löschen.

Datenlademodi

Inline (Standard, empfohlen): Die Variantendaten werden beim Rendern in die Seite eingebettet. Kein AJAX-Aufruf beim Laden, sofortige Swatch-Anzeige, maximale Robustheit.

AJAX: Die Daten werden nach dem Seitenladen abgerufen. Reservieren Sie diesen Modus für Shops hinter aggressivem Full-Page-Caching, bei denen die Aktualität des angezeigten Bestands wichtiger ist als die Anzeigegeschwindigkeit.

Tastaturzugänglichkeit

Der Selektor implementiert das WAI-ARIA-Radiogroup-Pattern: Tab fokussiert die ausgewählte Variante der Gruppe (ein einziger Tab-Stopp pro Gruppe), die Pfeiltasten navigieren und wählen innerhalb der Gruppe mit Umlauf aus und überspringen nicht verfügbare Varianten, Leertaste oder Enter bestätigt den fokussierten Swatch. Die Zustände werden Screenreadern über aria-checked angekündigt, die Tooltips respektieren prefers-reduced-motion.

CSS-Anpassung

Die verfügbaren CSS-Variablen erlauben Anpassungen aus dem CSS Ihres Child-Themes, ohne das Modul zu berühren:

.dfvs-swatch {
    --dfvs-size: 56px;   /* Swatch-Größe */
}
.dfvs-swatch.dfvs-active {
    box-shadow: 0 0 0 2px #b8860b; /* Ring der aktiven Variante */
}

Um die Hover-Vorschau bei einem bestimmten Produkt zu deaktivieren, fügen Sie im Produkt-Template ein Element mit dem Attribut data-dfvs-disable-hover hinzu.

Fehlerbehebung

Swatches erscheinen nicht

• Prüfen Sie, dass das Modul in seiner Konfiguration aktiviert ist
• Öffnen Sie die Browser-Konsole: Das Modul protokolliert seine Schritte mit dem Präfix [dfvariantswatch] — Sie sehen die Anzahl der gerenderten Gruppen oder den Grund, warum nichts gerendert wurde
• Das Produkt muss Kombinationen haben; ein einfaches Produkt zeigt nichts an, das ist erwartet

Größen erscheinen als Text, nicht als Fotos

Das ist das erwartete Verhalten der Absicherung: Die Werte der Gruppe teilen dieselben Kombinationsfotos. Laden Sie dedizierte Bilder pro Größe im Reiter Swatches pro Attribut hoch, wenn Sie Visuals wünschen (zum Beispiel Größen-Piktogramme).

Der native Block erscheint nach einem Klick wieder

Das Modul wendet das Ausblenden nach jedem PrestaShop-AJAX-Update erneut an. Falls ein stark angepasstes Theme die Standard-Events umgeht, kontaktieren Sie den Support mit der URL der betroffenen Produktseite.

Deinstallation

Die Deinstallation entfernt die Tabelle des Moduls, die nach img/dfvariantswatch/ hochgeladenen Bilder und alle Konfigurationsschlüssel. Die Fotos Ihrer Kombinationen bleiben selbstverständlich unberührt.