Vue Admin Modul weiße Seite

Hallo,

ich habe Schwierigkeiten damit ein Admin Modul anzulegen in Vue. Ich brauche prinzipiell nur ein Entity Listing, indem man das Entity ändern kann. Also zwei Views: Listing und Einzelansicht für Änderungen.

Es geht um die Zuordnung von Storefront Kunden zu eigens definierten Gruppen. Man soll den Kunden öffnen können in der Einzelansicht und die Gruppenzuordnung ändern können.

Nachfolgenden Code habe ich bisher schon. Das Modul wird bereits im Baum im Admin angezeigt. Doch sobald man auf das Modul klickt, erscheint eine weiße Seite:

Die main.js:

import './module/ws-calendar';

Die index.js:

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

Shopware.Module.register('ws-calendar', {
    color: '#ff3d58',
    icon: 'default-shopping-paper-bag-product',
    title: 'Kalendar',
    description: 'Verwalte die Kalender Berechtigungen hier',

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

    routes: {
        list: {
            component: 'ws-calender-user-list',
            path: 'list'
        },
        detail: {
            component: 'ws-calendar-detail',
            path: '/detail/:id',
            meta: {
                parentPath: 'ws.calendar.list'
            }
        }
    },

    navigation: [{
        label: 'ws-calendar.general.mainMenuItemGeneral',
        color: '#ff3d58',
        path: 'ws.calender.list',
        icon: 'default-shopping-paper-bag-product',
        position: 100
    }]
});

Das Listing (ws-calendar-index; index.js):

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
const utils = Shopware.Utils;
import template from './ws-calendar-index.twig';
import './ws-calendar-index.scss';

Component.register('ws-calendar-index', {
    template,
    inject: ['repositoryFactory'],
    mixins: [
        Mixin.getByName('listing'),
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    data() {
        return {
            page: 1,
            limit: 25,
            total: 0,
            repository: null,
            items: null,
            isLoading: true,
            filter: {
                customerId: null
            }
        }
    },

    computed: {
        columns() {
            return [
                {
                    property: 'firstName',
                    dataIndex: 'firstName',
                    label: 'ws-calendar.list.columns.firstName',
                    allowResize: true,
                },
                {
                    property: 'lastName',
                    dataIndex: 'lastName',
                    label: 'ws-calendar.list.columns.lastName',
                    allowResize: true,
                    primary: true
                },
                {
                    property: 'email',
                    dataIndex: 'email',
                    label: 'ws-calendar.list.columns.email',
                    allowResize: true,
                    routerLink: 'ws.calendar.detail'
                },
                {
                    property: 'groupName',
                    dataIndex: 'groupName',
                    label: 'ws-calendar.list.columns.groupName',
                    allowResize: true
                }
            ]
        },
        wsCalendarRepository() {
            return this.repositoryFactory.create('ws_calendar_user_group');
        }
    },

    methods: {
        getList() {
            this.isLoading = true;

            let criteria = new Criteria();
            criteria.addAssociation('customer');
            criteria.addAssociation('ws_calendar_groups');

            if (this.filter.customerId) {
                criteria.addFilter(Criteria.equals('customerId', this.filter.customerId));
            }

            return this.wsCalendarRepository.search(criteria, Shopware.Context.api)
                .then((searchResult) => {
                    this.items = searchResult;
                    this.total = searchResult.total;
                    this.isLoading = false;
                });
        },

        resetFilter() {
            this.filter = {
                customerId: null
            };

            this.getList();
        }
    },

    watch: {
        filter: {
            deep: true,
            handler: utils.debounce(function () {
                this.getList();
            }, 400)
        }
    }
});

Das index template:

        {{ $tc('ws-calendar.title') }}
    
    
        
            
                
                    {{ element }}
                
            

            
                
                    {{ $tc('ws-calendar.list.columns.action') }}

Die detail index.js:

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;
import template from './ws-calendar-detail.twig';
import './ws-calendar-detail.scss';

Component.register('ws-calendar-detail', {
    template,
    inject: ['repositoryFactory'],

    data() {
        return {
            customer: null,
            isLoading: false,
            isSuccessful: false,
            calendarGroups: null,
        }
    },

    created() {
        this.syncService = Shopware.Service('syncService');
        this.httpClient = this.syncService.httpClient;
        this.repository = this.repositoryFactory.create('ws_calendar');
        this.repository.get(this.$route.params.id, Shopware.Context.api).then(customer => {
            this.customer = customer;
        });
        this.calendarGroupsRepo = this.repositoryFactory.create('ws_calendar_groups');
        this.calendarGroupsRepo.get(null, Shopware.Context.api).then(calendarGroups => {
            this.calendarGroups = calendarGroups;
        });
    },

    methods: {
        openCustomer() {
            this.$router.push({
                name: 'sw.customer.detail',
                params: { id: this.customer.customerId }
            });
        },
        getCustomer() {
            this.repository
                .get(this.$route.params.id, Shopware.Context.api)
                .then(entity => {
                    this.customer = entity;
                });
        },
        onSaveClicked() {
            this.isLoading = true;
            this.repository
                .save(this.customer, Shopware.Context.api)
                .then(() => {
                    this.getCustomer();
                    this.isLoading = false;
                    this.processSuccess = true
                }).catch((exception) => {
                this.isLoading = false;
                this.createNotificationError({
                    title: this.$tc('ws-calendar.detail.error.errorTitle'),
                    message: exception
                });
            });
        },
        saveFinish() {
            this.processSuccess = false;
        }
    }
});

Das Detail template:

        {{ customer.firstName }} {{ customer.lastName }}
    

    
        
            {{ $tc('ws-calendar.detail.toolbar.customer') }}
        
        
            {{ $tc('ws-calendar.detail.toolbar.saveButtonText') }}

Die SCSS Dateien sind vorhanden, sind aber aktuell leer.

Über Hilfe, was daran nicht geht, wäre ich verbunden :slight_smile:

 

MFG

derwunner

Hi,

hast du schon was rausgefunden, habe im Prinzip das gleich Problem. Modul wird geladen, Daten sind als JSON vorhanden, aber es erfolgt im Admin keine Ausgabe. Die Twig-Strukur wird komplett ignoriert. Wenn ich im Template oben z.B. ein h2-Tag einfüge wird der Text darin beim Aufruf des Moduls ausgeben, aber das ganze Twig ignoriert.

Das gleiche Problem tritt bei mir auch auf, was mich als Shopware-Neuling besonders irritiert hat. Alles am Anfang der Template-Datei und außerhalb der `` wird angezeigt, auch komplexe DOM-Fragmente, die durchaus auch SW-Elemente enthalten können, z.B.

    {{ $tc('wao-io-cache-control.general.title') }}
    
        {{ $tc('wao-io-cache-control.general.clearCache') }}
    
    Überschrift und Button werden angezeigt.




    wird nicht angezeigt


wird auch nicht angezeigt

 

Wenn das ganze aber funktionieren würde, wo fände ich dann die Dokumentation der vorgesehen Slots (z.B.slot="content"), die ich für Admin-Seiten nutzen könnte?
Die habe ich bei der bisherigen Lektüre der Dokumentation leider noch nicht entdeckt.

 

Du findest hier fast alle Componenten und ihre Optionen

https://component-library.shopware.com/components/sw-page

1 Like

Das Plugin liegt zum Klonen hier bereit: GitHub - alpham8/calendar-example: Shopware Plugin Example

Der Workaround, alles _ohne_ Template Slots zu machen, funktioniert zwar, allerdings müsste ich dann auch sinnloserweise eigenes CSS schreiben, und das ganze ist ja auch nicht Sinn der Sache. Gibt es schon Erkenntnisse oder Lösungen dazu? Eventuell ein Update von Shopware, das das löst? Ich habe SW 6.1.3 stable, aus dem Development-Repo mit Stand vor ca. 2 Wochen.

Das Problem scheint mit Upgrade auf Shopware 6.1.4 behoben zu sein.

1 Like

@derwunner schrieb:

Die index.js:

import deDE from ‚./snippet/de-DE‘;
import enGB from ‚./snippet/en-GB‘;

Du hast vergessen die Seiten zu importieren:

import './ws-calendar-index';
import './ws-calendar-detail';
import deDE from './snippet/de-DE';
import enGB from './snippet/en-GB';

 

@AlexGalax‍ Ok, vielen Dank, das habe ich nun eingefügt im GitHub Projekt. Allerdings scheint das noch nicht die Lösung gewesen zu sein. Ich habe auch mal die anderen JS Dateien mit den meinen verglichen, sieht alles richtig aus. Woran kann es noch liegen?

Und kann man auch irgendwoher sehen, was man für Fehler gemacht hat? Gibt es dafür irgendwelche Logs oder Browser Addons?