Backend Kundenübersicht mehr Spalten anzeigen

Heldchen · 1. November 2021 um 07:03

Guten Morgen,

ich habe folgendes Problem - ich soll die Ansicht der Kunden im Backend um Spalten erweitern. Dazu sollen die Werte „company“ und „createdAt“ als weitere Spalten ausgegeben werden.
Zielplattform ist Shopware 6.3.5.4
Ich hab bisher folgenden Code dafür geschrieben:

main.js:

import './module/sw-customer/page/sw-customer-list';

index.js:

import template from './sw-customer-list.html.twig';

import deDE from '../../../../snippet/de-DE.json';
import enGB from '../../../../snippet/en-GB.json';

Shopware.Component.override('sw-customer-list',{
   template,

    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    },

   computed: {
       customerColumns() {
           let columns = this.getCustomerColumns();
           columns.push({
               property: 'company',
               dataIndex: 'company',
               label: 'sw-customer.list.columnCompany',
               allowResize: true,
               visible: true,
               useCustomSort: true,
               align: 'left'
           });

           return columns;
       }
   }
});

sw-customer-list.html.twig:

{% block sw_customer_list_grid_columns_actions %}
    {% parent %}

    <template #column-company="{ item, isInlineEdit, column }">
        {{ item.company }}
    </template>
{% endblock %}

Folgendes Problem taucht jetzt auf:
Ich baue die Administration mit „bin/build-administration.sh“ neu - der Shop ist in der .env mit „prod“ gekennzeichnet.
Der Code greift nicht, sprich: es tauchen keine weiteren Spalten mit den neuen Werten auf. Ändere ich den Block in der Template-Datei z.b. auf den Verkaufskanal, kann ich den Wert in der Column beeinflussen (z.B. „Danke“ für alle Datensätze ausgeben). Das zeigt, dass der Code greift für das Template und dadurch auch die index.js zum Überschreiben des Templates.
Im „localstorage“ jedoch finde ich die Spaltendefinition nicht dem „computed“-eil der index.js

Weiß da irgendwer Rat oder kann in die richtige Richtung deuten?

Mit viele Grüßen,

Heldchen

moschadr · 1. November 2021 um 09:29

ich glaube, Dein Twig stimmt nicht ganz. Du erweiterst den actions-Block aber nicht den {% block sw_customer_list_grid_columns %} oder habe ich etwas mißverstanden?

Heldchen · 1. November 2021 um 09:44

Selbst wenn ich {% block sw_customer_list_grid_columns %} als Erweiterungspunkt wählen würde, würde das Template nicht geparsed werden.
Der Block {% block sw_customer_list_grid_columns_actions %} habe ich aus einem anderen Plugin, das die Kundenansicht um eine Spalte erweitert (und zwar dieses Plugin hier: Merkzettel / Wunschlisten für Shopware6 | Shopware Store).

Ich habe das Gefühl, dass etwas im „computed“-Teil der index.js nicht funktioniert. Weil ich das Template für die Listenansicht verändern kann; demnach muss die main.js eingebunden werden und auch alles vor „computed“ in der index.js ausgeführt werden.

moschadr · 1. November 2021 um 10:03

Dein Angabe Deines <template #column muss in einen eigenen Block. Zudem der „action Block“ beinhaltet das, was an jedem Zeilenende in dem Editmenu erscheinen soll. Deine Spalte bekommst Du so nicht zu sehen. In der index.js kannst Du in singleQuotes mal ein eigens Label (ohne snippet) setzen. Passt die Angabe der property? Kommt company tatsächlich strait mit dem object mit?

Heldchen · 1. November 2021 um 10:30

Also, ich hab den Code wie folgt geändert:
index.js:

import template from './sw-customer-list.html.twig';

import deDE from '../../../../snippet/de-DE.json';
import enGB from '../../../../snippet/en-GB.json';

Shopware.Component.override('sw-customer-list',{
   template,

    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    },

   computed: {
       customerColumns() {
           let columns = this.getCustomerColumns();
           columns.push({
               property: 'company',
               dataIndex: 'company',
               label: 'Firma',
               allowResize: true,
               visible: true,
               useCustomSort: true,
               align: 'left'
           });

           return columns;
       }
   }
});

sw-customer-list.html.twig:

{% block sw_customer_list_grid_columns %}
    {% parent %}

    {% block sw_customer_list_grid_column_company %}
        <template #column-company="{ item, isInlineEdit, column }">
            {{ item.company }}
        </template>
    {% endblock %}
{% endblock %}

„bin/build-administration.sh“ läuft auch soweit durch, ich sehe, dass er die Extension injected und auch einen Entrypoint generiert; der Befehl läuft ohne Fehlermeldung durch.

„company“ ist ein Feld der „customer“-Entity, die mitgeladen wird; ich hab das das JSON über die Netzwerkanalyse einmal rausgeholt.

Was mich derzeit verwundert - ich hab im Sommer ein reines JS-Plugin/JS-Extension geschrieben, dass ohne viel Probleme eingebunden werden konnte; das hier massive Probleme auftreten ist mehr als verwunderlich.

Recherchen haben auch ergeben, dass es in der alten Dokumentation einen Artikel über das Hinzufügen von Columns gab, der nicht mehr zu finden ist. Hier hat Shopware definitv verschlimmbessert!

moschadr · 1. November 2021 um 10:36

In Bezug auf die Dokumentation gebe ich Dir recht. Da ist noch sehr viel Luft nach oben.

moschadr · 1. November 2021 um 10:40

Hilfreiche Infos findet man oft auch hier. https://academy.shopware.com

Heldchen · 1. November 2021 um 10:57

Bringt mir wenig, wenn die Infos in einem Kurs stecken, der zwar gratis ist, aber Zeit beansprucht.^^’

Ich hab jetzt einfach mal, rein aus Neugier folgendes probiert:
index.js:

import template from './sw-customer-list.html.twig';

import deDE from '../../../../snippet/de-DE.json';
import enGB from '../../../../snippet/en-GB.json';

Shopware.Component.override('sw-customer-list',{
   template,

    snippets: {
        'de-DE': deDE,
        'en-GB': enGB
    },

   computed: {
       customerColumns() {
           let columns = [];

           return columns;
       }
   }
});

Demenstprechend wären die Columns leer - aber nach dem Bau der Administration etc. pp. sieht die Ansicht immernoch gleich aus! Also scheint es so, als würde „computed“ entweder nicht ausgeführt zu werden oder keinen Effekt zu haben.

moschadr · 1. November 2021 um 11:23

Also, ich habe das jetzt aus internen Gründen mit der sw-order-list und der sw-product-list gemacht und beide listen um unterscheidliche Spalten erweitert. ganz ohne Probleme

Heldchen · 1. November 2021 um 11:37

Ich möchte hier echt niemanden verschaukeln - aber JETZT funktioniert es.
Spalte wird angezeigt, lässt sich einstellen über das Menü, verschieben, etc. - ich werde jetzt noch eine 2. Spalte hinzufügen (createdAt) und werde dann wissen, ob es jetzt ohne Probleme klappt.

Ich melde mich dann im Anschluss hier - aber eines Vorweg - der Code war nicht das Problem. o.O

moschadr · 1. November 2021 um 11:44

wenn das Ergebnis passt ist doch alles i.O.

Heldchen · 1. November 2021 um 12:25

Ok, jetzt habe ich 0 Probleme, neue Spalten einzufügen.
„createdAt“ als Spalte war wegen der date-Formatierung etwas fummelig, aber in der „sw-order-list“ im Shopware-Core ist das als Beispiel anzeigbar.
Ich danke dir vom Herzen moschadr
Du hast es geschafft, dass ich das Mini-Plugin heute fertig kriege und das noch im Zeitrahmen.
Wenn du nichts dagegen hast, würde ich mich bei einem erneut auftauchendem Problem gerne auch an dich wenden bzgl. JS im Backend - das ist weniger meine Stärke…

MfG

Heldchen

moschadr · 1. November 2021 um 12:33

Nur zu, wenn ich kann helfe ich Dir gern. Bin Entwickler mit verstärktem Einsatz im Backendbereich (nicht nur SW)

pd3233 · 1. November 2021 um 13:52

Hallo Zusammen,

da möchte ich mich mal direkt dranhängen Habe ein ähnliches Problem. Ich habe order-list erweitert und lasse ein customfield in der Liste anzeigen. Es ist ein Datumsfeld, das ich gerne sauber formatieren möchte. Dazu habe ich auch das Template erweitert. Spalte wird ausgegeben, aber nicht formatiert.

Ich hoffe ihr könnt mir helfen, vielen Dank vorab

import template from './core/component/sw-order-list-override/sw-order-list.html.twig';

const { Component } = Shopware;

Component.override('sw-order-list', {
    template,
    computed: {
        orderColumns() {
            const columns = this.$super('orderColumns');

            columns.push({
                property: 'customFields.custom_checkout_pdwe_test',
                dataIndex: 'customFields.custom_checkout_pdwe_test',
                label: 'Lieferdatum',
                inlineEdit: 'string',
                allowResize: true,
                align: 'left'
            });

            return columns;
        }
    }
});

{% block sw_order_list_grid_columns %}
{% parent %}
    {% block sw_order_list_grid_columns_delivery_date %}
    <template #column-customFields-custom_checkout_pdwe_test="{ item }">
        <sw-time-ago :date="item.customFields-custom_checkout_pdwe_test" />
    </template>
    {% endblock %}
{% endblock %}

moschadr · 1. November 2021 um 14:24

das hier könnte Dir eine Idee geben: <template #column-customFields-custom_checkout_pdwe_test="{ item }""> {{ item.item.customFields-custom_checkout_pdwe_test | date({hour: '2-digit', minute: '2-digit'}) }} </template>

moschadr · 1. November 2021 um 14:27

ansonsten → https://twig.symfony.com/doc/1.x/filters/date.html

pd3233 · 1. November 2021 um 14:50

Danke, das könnte gehen mit der Formatierung. Allerdings komme ich nicht so weit. Sobald ich das Feld über das Template ausgeben will (auch ohne Formatierung), kommt der Fehler „TypeError: item.customFields is null“. Wenn ich nichts ausgebe, ignoriert anscheinend das Template und gibt das Datum unformatiert aus (so wie in meinem Screenshot oben).

So sieht das Template jetzt aus:

{% block sw_order_list_grid_columns %}
{% parent %}
    {% block sw_order_list_grid_columns_delivery_date %}
    <template #column-customFields.custom_checkout_pdwe_test="{ item }">
       {{ item.customFields.custom_checkout_pdwe_test }}
    </template>
    {% endblock %}
{% endblock %}

moschadr · 1. November 2021 um 15:18

in deinem obigen Screenshot ist ja zu sehen, dass nicht alle Zeilen einen Eintrag in „Deiner Spalte“ haben. Und die Fehlermeldung sagt Dir ja auch, dass Dein item NULL ist. Also, vorher auf !Null prüfen

pd3233 · 1. November 2021 um 20:03

Ja, das hatte ich auch vorher geprüft. Es scheint beim item gar keine customFields zu geben. Ich habe zum Test mal nur „Daten vorhanden“ ausgegeben, um Formatierungsfehler auszuschließen. In der Tabelle sehe ich aber trotzdem nur das Datum unformatiert. Das spricht dafür, dass der Block im Template gar nicht ausgegeben wird, weil „item.customFields.custom_checkout_pdwe_test“ eben NULL ist…

Vielleicht stehe ich auch auf dem Schlauch …

{% block sw_order_list_grid_columns %}
    {% parent %}
    {% if item.customFields.custom_checkout_pdwe_test is defined and item.customFields.custom_checkout_pdwe_test is not null %}
        {% block sw_order_list_grid_columns_delivery_date %}
            <template #column-customFields.custom_checkout_pdwe_test="{ item }">
               Daten vorhanden
            </template>
        {% endblock %}
    {% endif %}
{% endblock %}

moschadr · 2. November 2021 um 07:32

warscheinlich überflüssig … ich frage trotzdem. Das twig-File bindest Du aber schon in der index.js (richtig) ein oder? Wenn es für Dich ok ist, poste doch mal die index.js

Thema		Antworten	Aufrufe
Shopware.Component.override crashed Kundenübersicht Programmierung	2	527	1. Januar 2021
Backend Bestellübersicht Tabelle Spalte hinzufügen mögliche Werte Programmierung programming	1	486	29. November 2022
Liste mit Promotion-Codes im Backend erweitern Shopware 6 (German)	1	101	5. Oktober 2023
Customer-View im Backend erweitern Programmierung	2	699	8. Mai 2019
Customer EXTJS Model erweitern Programmierung	0	587	13. Dezember 2017

Backend Kundenübersicht mehr Spalten anzeigen

Verwandte Themen