Dieses Plugin fügt den Kategorien ein neues Produkt-Layout "Data Table" hinzu. Die Tabelle kann vollständig über eine Backend App konfiguriert werden. Sie können Spalten hinzufügen und entfernen, sowie die Inhalte und Labels festlegen. Sie können dazu sämtliche Schlüssel aus dem $sArticles array referenzieren.

Um die Tabelle zu rendern und zu aktualisieren wird das populäre jQuery plugin datatables verwendet.

Das Plugin ist nach der Installation vorkonfiguriert mit ein paar Spalten. Nutzen Sie diese um eine Idee zu erhalten wie Spalten angelegt und verwaltet werden können.

Sie finden eine Demo hier.

• Voll konfigurierbare Tabelleninhalte über die Backend App
• Hinzufügen, entfernen, verschieben von beliebig vielen Spalten
• Nutzen Sie das neue Produkt-Layout, um die Tabellenansicht ausschließlich in spezifischen Kategorien darzustellen
• Ajax Pagination und Suche
• Nutzen Sie JavaScript um die Inhalte der Tabelle anzupassen und zu erweitern

Die Backend App zur Anpassung der Tabelle finden Sie unter dem Menüpunkt "Inhalte". Darüber können Sie Spalten hinzufügen, entfernen, bearbeiten und per Drag and Drop verschieben. Wenn Sie eine Spalte erstellen/bearbeiten finden Sie drei Eingabefelder vor:

• Label: Wird im Kopf der Tabelle über der Spalte angezeigt. Nach dem ersten Seitenaufruf der Tabelle wird das Label in einem Textbaustein mit dem Namespace frontend/plugins/frosh/datatablelayout/column gespeichert. Der Name des Textbausteins ist identisch zum Label. Sie können in der Folge diesen Textbaustein zur Übersetzung in andere Sprechen bearbeiten.
• Eigenschaft: Die Datenquelle für die Spalte. Entspricht einem Schlüssel des $sArticle array, z.B. ordernumber. Sie können verschachtelte Werte referenzieren, indem Sie Schlüssel durch ein . verbinden, z.B. image.thumbnails.0.sourceSet
• Render Script: Optional können Sie JavaScript verwenden, mit dem Sie den auszugebenden Wert verändern oder erweitern können. Dazu muss der anzuzeigende Wert mit einem return Befehler ausgegeben werden. Sehen Sie dazu bitte das folgende Beispiel.

Thumbnail eines Artikels in einer spalte anzeigen:

Eigenschaft: image.thumbnails.0.sourceSet
Render Script:

    return '<img style="margin:0 auto;max-height:30px" title="' + row.articleName + '" srcset="' + data + '">';
    

Das Plugin wird von der Github Organization FriendsOfShopware entwickelt.  Maintainer des Plugins ist: David Neustadt

Das Github Repository ist zu finden hier