Product compare
Der Vergleich ermöglicht es Kunden, mehrere Produkte in einer Merkmalstabelle nebeneinanderzustellen. Das erleichtert die Auswahl, besonders in Shops mit einem großen Angebot.
Modul aktivieren
Section titled “Modul aktivieren”Gehen Sie zu WooCommerce > Polski > Storefront Modules und aktivieren Sie die Option Product Compare. Auf den Produkten erscheint dann eine Vergleichsschaltfläche.
Merkmalstabelle
Section titled “Merkmalstabelle”Nachdem Produkte zum Vergleich hinzugefügt wurden, sieht der Kunde eine Tabelle mit einer Spalte für jedes Produkt. Die Tabellenzeilen enthalten:
- Produktbild
- Name mit Link
- Preis (unter Berücksichtigung von Aktionen und der Omnibus-Richtlinie)
- Bewertung (Sterne)
- Kurzbeschreibung
- Verfügbarkeitsstatus
- Produktattribute (Farbe, Größe usw.)
- Lieferzeit (falls festgelegt)
- Schaltfläche In den Warenkorb
Zeilen, in denen alle Werte identisch sind, können automatisch ausgeblendet werden - aktivieren Sie dazu die Option Hide identical features in den Moduleinstellungen. So wird die Aufmerksamkeit des Kunden auf die Unterschiede zwischen den Produkten gelenkt.
Maximale Anzahl an Produkten
Section titled “Maximale Anzahl an Produkten”Standardmäßig kann der Kunde bis zu 4 Produkte gleichzeitig vergleichen. Dieses Limit lässt sich in den Einstellungen oder mit einem Filter ändern:
add_filter('polski/compare/max_items', function (): int { return 6;});Nach Erreichen des Limits wird die Schaltfläche Add to compare deaktiviert und eine Meldung über das erreichte Limit angezeigt. Der Kunde muss zuerst eines der Produkte entfernen.
Automatischer Austausch
Section titled “Automatischer Austausch”Wenn die Option Auto-replace aktiv ist, ersetzt das Hinzufügen eines Produkts über das Limit hinaus automatisch das älteste Produkt im Vergleich durch das neue. Der Kunde erhält eine Toast-Benachrichtigung über den Austausch.
Aktivieren Sie dies in den Einstellungen: WooCommerce > Polski > Storefront Modules > Compare > Auto-replace.
Oder programmatisch:
add_filter('polski/compare/auto_replace', '__return_true');AJAX-Verhalten
Section titled “AJAX-Verhalten”Der Vergleich funktioniert ohne Neuladen der Seite. AJAX-Aktionen:
| Aktion | Beschreibung |
|---|---|
polski_compare_add | Ein Produkt hinzufügen |
polski_compare_remove | Ein Produkt entfernen |
polski_compare_get | Die Produktliste abrufen |
polski_compare_clear | Den Vergleich leeren |
Die Vergleichsdaten werden in der WooCommerce-Sitzung (WC()->session) gespeichert, sodass sie sowohl für Gäste als auch für angemeldete Benutzer funktionieren.
Shortcode [polski_compare]
Section titled “Shortcode [polski_compare]”Der Shortcode zeigt die Vergleichstabelle an beliebiger Stelle im Shop an.
Parameter
Section titled “Parameter”| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
columns | string | all | Anzuzeigende Merkmale (durch Komma getrennt) |
hide_similar | string | no | Zeilen mit identischen Werten ausblenden |
show_remove | string | yes | Schaltfläche zum Entfernen des Produkts zeigen |
Anwendungsbeispiel
Section titled “Anwendungsbeispiel”[polski_compare columns="image,name,price,rating,stock" hide_similar="yes"]Verwendung auf einer eigenen Seite
Section titled “Verwendung auf einer eigenen Seite”Erstellen Sie eine Seite, z. B. Produktvergleich, und fügen Sie den Shortcode ein:
[polski_compare]Verweisen Sie dann in den Moduleinstellungen auf diese Seite als Comparison page. Die Schaltfläche View comparison im Popup leitet auf diese Seite weiter.
Vergleichsschaltfläche
Section titled “Vergleichsschaltfläche”Die Schaltfläche wird auf der Produktkarte (Kategorieseite) und auf der Einzelproduktseite angezeigt. Steuern Sie die Position mit einem Filter:
add_filter('polski/compare/button_position', function (): string { return 'after_add_to_cart';});Verfügbare Positionen: before_add_to_cart, after_add_to_cart, after_summary.
Schwebende Leiste
Section titled “Schwebende Leiste”Nach dem Hinzufügen des ersten Produkts zum Vergleich erscheint am unteren Bildschirmrand eine Leiste mit Miniaturansichten der ausgewählten Produkte und einer Schaltfläche Compare. Die Leiste ist responsiv - auf mobilen Geräten zeigt sie die Anzahl der ausgewählten Produkte anstelle von Miniaturansichten an.
Vergleich innerhalb einer Kategorie
Section titled “Vergleich innerhalb einer Kategorie”Standardmäßig kann der Kunde Produkte aus verschiedenen Kategorien vergleichen. Wenn Sie den Vergleich auf Produkte aus derselben Kategorie beschränken möchten:
add_filter('polski/compare/same_category_only', '__return_true');Beim Versuch, ein Produkt aus einer anderen Kategorie hinzuzufügen, sieht der Kunde eine Meldung über die Einschränkung.
CSS-Gestaltung
Section titled “CSS-Gestaltung”CSS-Klassen des Moduls:
.polski-compare-button- Schaltfläche zum Hinzufügen zum Vergleich.polski-compare-button--active- Produkt befindet sich im Vergleich.polski-compare-table- Vergleichstabelle.polski-compare-bar- untere Leiste.polski-compare-empty- Meldung bei leerem Vergleich
Fehlerbehebung
Section titled “Fehlerbehebung”Die Tabelle zeigt keine Attribute an - stellen Sie sicher, dass die Produktattribute im Produkteditor (Reiter Attribute) als Auf der Produktseite sichtbar gesetzt sind.
Die Schaltfläche reagiert nicht auf Klicks - prüfen Sie die Browser-Konsole auf JavaScript-Konflikte. Die häufigste Ursache ist ein doppeltes jQuery oder ein Konflikt mit einem Plugin zur JS-Optimierung.
Probleme melden: github.com/wppoland/polski/issues