Hallo liebe Community,
ich arbeite aktuell an einem erweiterten Produkt-Listing-Block für unseren Shop, der zwei Bereiche integriert:
-
Ein anpassbarer Custom-Bereich zur individuellen Präsentation der ersten Produkte einer Kategorieseite.
-
Ein dynamischer Bereich für alle restlichen Produkte der Kategorie mit Standard-Shopware-Features wie Filter und Sortierungen.
Ziele und Funktionen
1. Custom-Bereich für die ersten Produkte
• Ziel: Manuelle Auswahl und Darstellung der ersten Produkte im 4er-Grid.
• Funktionen:
• Hinzufügen beliebig vieler Custom-Zeilen mit je 4 Produkt-Slots.
• Produkte können per Drag-and-Drop sortiert werden.
• Vorschau im Backend zeigt das Layout wie in der Storefront.
• Produkte im Custom-Bereich werden im dynamischen Bereich automatisch ausgeschlossen.
• Besonderheit:
Wenn Filter oder Sortierungen aktiv sind, sollen Custom-Zeilen verschwinden und ihre Produkte in das dynamische Listing übernommen werden.
2. Dynamischer Bereich für alle restlichen Produkte
• Ziel: Automatisches Listing für alle nicht im Custom-Bereich verwendeten Produkte.
• Funktionen:
• Dynamisches Nachladen mit Button („Weitere Produkte laden“).
• Unterstützung aller Shopware-Standardfilter (Preis, Eigenschaften, Hersteller etc.).
• Sortierungen wie „Preis aufsteigend“ oder „Neuheiten“ funktionieren automatisch.
• Wichtig:
Custom-Produkte dürfen nicht doppelt angezeigt werden.
3. Erweiterung im Backend – Benutzerfreundlichkeit
• Ziel: Einfache Bedienbarkeit, auch für nicht-technische Nutzer.
• Funktionen:
• Drag-and-Drop-Bearbeitung des Custom-Bereichs.
• Vorschau im Backend stellt das Frontend-Layout 1:1 dar.
• Klare Trennung zwischen Custom- und dynamischem Bereich, um die Übersichtlichkeit zu gewährleisten.
Zusätzliche Layout-Optionen im Custom-Bereich
Für jede Custom-Zeile soll ein Dropdown-Menü verschiedene Layouts bieten:
-
Normale 4er-Zeile: Standard-Grid mit 4 gleich großen Produkt-Slots.
-
4 Produkte links, Störer-Bild rechts: Links ein 4er-Produkt-Grid, rechts ein Bild oder eine Aktion (über 2 Spalten und 2 Zeilen).
-
Störer-Bild links, 4 Produkte rechts: Spiegelverkehrt zur zweiten Option.
Meine Fragen zur Umsetzung:
- Wie kann ich das Standard-Produkt-Listing in den Erlebniswelten so erweitern, dass neue Felder in der Konfiguration möglich sind?
• Beispiel: Ein Dropdown-Menü für Layout-Optionen und ein Bereich für Drag-and-Drop-Slots.
-
Welche Dateien müssen überschrieben werden ( sw-cms-el-config-product-listing.vue**,** index.js etc.)?
-
Gibt es Best Practices, um ein Override für die Konfiguration umzusetzen, ohne den Core zu verändern?
-
Wie kann ich sicherstellen, dass der Custom-Bereich im Frontend nicht durch Shopware-Filter beeinflusst wird?
-
Gibt es Code-Beispiele oder Hinweise, wie man ein Drag-and-Drop-System für CMS-Komponenten umsetzt?
-
Wie verhindere ich effizient Duplikate, indem ich IDs der Custom-Produkte im dynamischen Listing ausschließe?
Ich freue mich über Tipps, Code-Beispiele oder Erfahrungsberichte und danke euch schon im Voraus für eure Unterstützung! 
Beste Grüße
A.R.