Frontend

Die Storefront-Seite besteht aus zwei erweiterten Twig-Templates und einer kleinen JavaScript-Datei. Beide hängen an den Listen-Elementen des Basis-Plugins LeopardenBusinessTransactions. Die Wirkung für Besucher steht unter Vertreter im Kundenkonto, der Überblick unter Entwickler.

Erweiterte Templates

Beide Templates liegen unter src/Resources/views/storefront/element/ und erweitern das gleichnamige Template des Basis-Plugins mit sw_extends. Die Listen werden im Browser von einer Vue-Komponente des Basis-Plugins gerendert; deshalb steht in den Templates {% verbatim %} um die Ausdrücke, die erst im Browser ausgewertet werden.

cms-element-transactions.html.twig (Vorgangsliste)

Überschrieben wird der Block transaction_number. Nach {{ parent() }} fügt das Template ein span mit v-if ein:

<span v-if='transaction.customer.customerNumber != "{{ context.customer.customerNumber }}"'>
    {{ 'plugin.leoparden.BusinessSalesRepresentative.transactionFromCustomer'|trans }}
    {% verbatim %} {{ transaction.customer.customerNumber }} {% endverbatim %}
</span>

Die Kundennummer des angemeldeten Kunden wird beim Rendern auf dem Server eingesetzt (context.customer.customerNumber), die des Vorgang-Besitzers im Browser (transaction.customer.customerNumber). Der Hinweis erscheint nur, wenn beide verschieden sind. Damit transaction.customer im Browser vorhanden ist, muss die Assoziation customer mitgeladen werden (siehe unten).

cms-element-articles-on-order.html.twig (Positionsliste)

Überschrieben werden zwei Blöcke. Beide rufen zuerst {{ parent() }} auf und hängen dann eine Zelle an:

Block	Ergänzung
`header_shipping_date`	Kopfzelle `th` (`scope='col'`) mit einem `<button type='button'>`, der `data-field='transaction.customer.customerNumber'` und `data-sortable-key` trägt und den Snippet-Text ausgibt
`body_shipping_date`	Zelle `td` mit `line.transaction.customer.customerNumber`

Die Zusatzspalte steht damit hinter der Spalte, die das Basis-Template in diesen Blöcken ausgibt.

JavaScript

src/Resources/app/storefront/src/main.ts sucht alle Elemente mit dem Attribut data-transactions und registriert dort einen Listener für das Ereignis onBeforeFetch. Der Listener erweitert event.detail.associations um customer: {}; vorhandene Assoziationen bleiben erhalten. Dadurch fordert die Listen-Anfrage den Kunden des Vorgangs mit an, und transaction.customer.customerNumber steht im Template zur Verfügung.

Die Datei importiert den Typ BodyType aus @leoparden/plugin-tools-storefront/shims.d.ts. Das gebaute Bündel liegt im Plugin unter src/Resources/app/storefront/dist/storefront/js/leoparden-business-sales-representative/.

Das Basis-Template setzt am Container das Attribut data-{{ element.type }}. Der Selektor data-transactions trifft daher nur Elemente vom Typ transactions, also die Vorgangsliste. Für die Positionsliste lädt der Subscriber die Assoziation transaction.customer serverseitig, ohne dass dieses Skript beteiligt ist.

Snippets

Schlüssel	de-DE	en-GB	Datei
`plugin.leoparden.BusinessSalesRepresentative.transactionFromCustomer`	`Von Kunde`	`From Customer`	`src/Resources/snippet/de_DE/messages.de-DE.json`, `src/Resources/snippet/en_GB/messages.en-GB.json`

Das Plugin liefert keine Snippets für die Administration.

Last modified: 08 November 2026