Frontend

Dieses Kapitel beschreibt die Client-Seite der Linie für Shopware 6.7: die Storefront-Plugins, die Twig-Vorlagen mit Vue-Direktiven, die Administrations-Bausteine und den Weg, auf dem andere Plugins darauf aufbauen.

Die Storefront-Plugins

src/Resources/app/storefront/src/main.ts registriert fünf JavaScript-Plugins am Shopware-PluginManager. Jedes hängt an einem Datenattribut, das die Twig-Vorlage des CMS-Elements setzt:

Plugin	Selektor	Datei	CMS-Element
`Transactions`	`[data-transactions]`	`plugin/transactions.plugin.ts`	`transactions`
`Processes`	`[data-processes]`	`plugin/processes.plugin.ts`	`processes`
`ArticlesOnOrder`	`[data-articles-on-order]`	`plugin/articles-on-order.plugin.ts`	`articles-on-order`
`RecentlyDelivered`	`[data-recently-delivered]`	`plugin/recently-delivered.plugin.ts`	`recently-delivered`
`MostBoughtByCustomer`	`[data-most-bought-by-customer]`	`plugin/most-bought-by-customer.plugin.ts`	`most-bought-by-customer`

Alle fünf erweitern AbstractEntityListingPlugin aus @leoparden/plugin-tools-storefront. Die Basisklasse schickt die Anfrage an die Store-API-Route aus der Option url. Die Vorlagen nutzen von ihr setLimit(), die Seitennavigation pagination und download(). Jedes Plugin steuert drei Dinge bei:

createBody() liefert den Criteria-Body der Anfrage: Filter, Beziehungen, Sortierung, bei MostBoughtByCustomer zusätzlich die Aggregation terms über productNumber (Limit 100).
processResponse() macht die SEO-Pfade der Antwort absolut (toAbsoluteUrl) und ruft ProcessTransactionResponseFunction auf.
static options nennt die Optionen mit ihren Vorgabewerten: typesToShow, group, type und archive bei Transactions; types und archive bei Processes; openCategories bei ArticlesOnOrder; invoiceCategories bei RecentlyDelivered und MostBoughtByCustomer.

Die Standardsortierfelder sind documentDate (Transactions, Processes), transaction.shippingDate (ArticlesOnOrder) und productNumber (RecentlyDelivered).

Hilfsbausteine

Datei	Inhalt
`lib/Filters.ts`	`seoUrls`: Beziehungsfilter auf SEO-URLs des aktuellen Verkaufskanals und der aktiven Sprache (`window.salesChannelId`, `window.activeLanguageId`). `lineItemFilter`: schließt Positionen ohne Artikelbezug aus.
`lib/ProcessTransactionResponse.Function.ts`	Setzt nach der Antwort die Sortierrichtung als `data-sorting-direction` an die sortierbaren Spaltenköpfe und als `aria-sort` an die Kopfzelle `th` der sortierten Spalte (nur dort, die anderen werden zurückgesetzt) und fügt dem Element die Klasse `show` hinzu.

window.salesChannelId und window.activeLanguageId setzt die Vorlage layout/meta.html.twig im Block layout_head_javascript_router.

Twig-Vorlagen

Die Vorlagen liegen unter src/Resources/views/storefront/element. Das Gerüst heißt transactions_base_element.html.twig. Es setzt die Optionen domain und accessKey (Zugangsschlüssel des Verkaufskanals) und rendert Kopfzeile, Liste, Zähler und Seitennavigation. Anders als in der Linie 6.6 setzt es keine Option accessToken. Die Listen füllt Vue im Browser; Twig reicht die Vue-Ausdrücke über {% verbatim %} unverändert durch.

Die Blöcke des Gerüsts:

Block	Inhalt
`container`	Äußerer Rahmen; hier setzen die Elemente ihre Optionen
`plugin`	Innerer Aufbau aus Kopfzeile, Inhalt, Zähler und Seitennavigation
`header`, `title`, `help_text`	Kopfzeile, Titel, Info-Symbol mit Hilfetext
`download_button`	Schaltfläche für den CSV-Download
`limit_select`	Auswahl der Seitengröße
`content`	Liste oder Tabelle; leer im Gerüst
`counter`, `pagination`	Zähler und Seitennavigation

Titel und Hilfetext kommen aus den Snippets plugin.leoparden.BusinessTransactions.page.<Elementtyp> und ….<Elementtyp>-help-text; das Element processes setzt sie aus seiner Konfiguration.

Die fünf Element-Vorlagen erweitern das Gerüst mit {% sw_extends %}, überschreiben container und content und setzen im Block container die Optionen für das JavaScript-Plugin:

{% sw_extends '@BusinessTransactions/storefront/element/transactions_base_element.html.twig' %}
{% block container %}
    {% set options = options|merge({
        states: states,
        url: url('store-api.business-transactions.transactions'),
        types: element.data.types,
        archive: element.data.archive
    }) %}
    <div class="cms-element-{{ element.type }} business-transactions-plugin" data-{{ element.type }}
         data-{{ element.type }}-options='{{ options|json_encode }}'>
        {{ block('plugin') }}
    </div>
{% endblock %}

Der Auszug stammt aus cms-element-processes.html.twig. Im HMR-Betrieb (isHMRMode) biegen die Vorlagen die URL von http://localhost:8000 auf http://localhost:9998 um.

Die überschreibbaren Blöcke der Element-Vorlagen:

Vorlage	Blöcke
`cms-element-transactions`	`header`, `transaction_type_select`, `title`, `content`, `transaction_item`, `transaction_number`, `transaction_date`, `transaction_state`, `shipping_date`, `no_transactions_warning`, `more_transactions_button`, `pagination`, `counter`
`cms-element-processes`	`content`, `header_name_number`, `header_description_shipping`, `header_order_number_date`, `header_shipping_date` und die vier `body_…`-Gegenstücke
`cms-element-articles-on-order`	`limit_select`, `transaction_type_select`, `content`, `header_product_number`, `header_transaction_number`, `header_name`, `header_amount`, `header_shipping_date` und die fünf `body_…`-Gegenstücke
`cms-element-recently-delivered`	`content`, `header_product_number`, `header_transaction_number`, `header_name`, `header_amount` und die vier `body_…`-Gegenstücke
`cms-element-most-bought-by-customer`	`content`, `header_product_number`, `header_name`, `header_amount`, `body_product_number`, `body_name`, `body_amount`, `counter`, `limit_select`, `pagination`

Die Spaltenköpfe tragen data-field (Feldpfad für den CSV-Export und die Sortierung) und, wenn sortierbar, data-sortable-key. Ein sortierbarer Kopf ist ein <button type='button'> und kein span, damit er sich per Tastatur erreichen und mit Enter oder Leertaste bedienen lässt; die Bibliothek reagiert auf den Klick, den der Button dabei auslöst. Der Stil für Button und Tastaturfokus steht in scss/base.scss.

Weitere Vorlagen:

page/account/transactions/index.html.twig bindet die Elemente für die Gruppen ein, detail.html.twig zeigt einen einzelnen Vorgang.
page/account/sidebar.html.twig ergänzt das Kontomenü.
component/transactions/state.html.twig gibt den Status eines Vorgangs oder einer Position aus.

Andere Plugins erweitern die Elemente

BusinessCustomProducts (Liste der eigenen Artikel) macht es vor. Ein Plugin, das auf diese Bausteine aufsetzt:

Setzt dieses Plugin voraus (leoparden/business-transactions in require), da es Dateien daraus lädt.
Erweitert das Gerüst in seiner eigenen Element-Vorlage mit {% sw_extends '@BusinessTransactions/storefront/element/transactions_base_element.html.twig' %}, setzt im Block container die eigenen Optionen (mindestens url) und überschreibt content.
Importiert die Bausteine aus dem Storefront-Quelltext dieses Plugins, über einen Pfad in der tsconfig.json: @leoparden/business-transactions-storefront/*. Das webpack-Build und die Jest-Konfiguration lösen jeden Pfad mit dem Präfix @leoparden aus compilerOptions.paths als Alias auf:
import {seoUrls} from "@leoparden/business-transactions-storefront/lib/Filters"; import ProcessTransactionResponseFunction from "@leoparden/business-transactions-storefront/lib/ProcessTransactionResponse.Function";
Leitet eine Klasse von AbstractEntityListingPlugin ab, implementiert createBody() und processResponse() und registriert sie am PluginManager.
Greift serverseitig über die Kriterien-Ereignisse in die Abfragen der Routen ein (siehe Backend), wenn die Store-API-Routen dieses Plugins mitgenutzt werden. BusinessSalesRepresentative geht so vor.

Administration

src/Resources/app/administration/src/main.ts registriert die Komponenten und die CMS-Elemente. Die Schlüssel der Elemente folgen einem festen Muster, das main.ts als Hilfsfunktionen exportiert:

Hilfsfunktion	Schlüssel
`componentKey(name)`	`sw-cms-el-component-<name>`
`previewKey(name)`	`sw-cms-el-preview-<name>`
`configKey(name)`	`sw-cms-el-config-<name>`

Jedes Element besteht aus Komponente und Vorschau (Ordner component/ und preview/ unter module/sw-cms/elements/<name>); transactions und processes haben zusätzlich eine Konfigurationskomponente (config/) und eine defaultConfig. Registriert wird mit cmsService.registerCmsElement({ name, label, component, previewComponent, … }).

Komponente	Zweck
`leoparden-business-transactions-main`, `-group`, `-type`	Liste, Gruppen- und Typformular des Einstellungsmoduls
`leoparden-business-transactions-detail`, `leoparden-business-transaction-detail`	Detailansicht eines Vorgangs
`leoparden-business-transactions-customer-group-to-type-mapper`	Konfigurationsfeld für die Zuordnung Kundengruppe → Typen
`leoparden-plugin-settings-icon`	Symbol der Kachel in den Einstellungen; in der Linie 6.7 die gemeinsame Komponente aus `@leoparden/plugin-tools-administration`, die `main.ts` importiert (die Linie 6.6 hat eine eigene)
`sw-customer-detail-business-transactions` und `…-detail`	Seiten des Kundenreiters
`sw-customer-detail` (Override)	Ergänzt den Reiter „Bisherige Vorgänge"
`sw-custom-field-set-detail-base` (Override)	Fügt „Vorgänge" zu den wählbaren Entitäten eines Zusatzfeld-Sets hinzu

In der Linie 6.7 verwenden die Formulare Meteor-Komponenten (mt-text-field, mt-number-field, mt-button, mt-card, sw-meteor-card); die Listenseite des Moduls liegt in einer sw-meteor-card mit Reitern. Die Karte leoparden-business-transaction-detail hat in dieser Linie eine Schaltfläche Speichern, die den Vorgang über sein Repository speichert.

Die Routen des Kundenreiters (sw.customer.detail.business-transactions und ….business-transactions-detail) hängt die routeMiddleware des Moduls an die Route sw.customer.detail an. Die Texte der Administration stehen in module/business-transactions/snippet/de-DE.json und en-GB.json.

Die gebauten Dateien liegen im Plugin. Nach einer Quelländerung bauen Sie die Administration und die Storefront mit den Skripten des Shops neu (bin/build-administration.sh, bin/build-storefront.sh).

Last modified: 08 November 2026