String Filter in Backend Customer- List

Shopware 6 (German) Programmierung
1

Servus,

ich versuche seit geraumer Zeit zu den Default- Filtern in der Kundenansicht weitere Filter hinzuzufügen ohne das Template zu überschreiben - im speziellen ein einfaches Input Feld welches dann z.B. explizit nur nach gewissen Städten / CustomFields / etc. filtert.

Bisheriger Code:

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

    data() {
        return {
            cityFilter: null,
            defaultFilters: [
                .....
                'city-filter',
                .....
            ],
        };
    },

computed: {
        listFilters() {
            return this.filterFactory.create('customer', {
               .............
                'city-filter': {
                    property: 'defaultBillingAddress.city',
                    label: 'test',
                    placeholder: 'test',
                },
                ................
            });
        }
    },

Es erfolgt auch eine Ausgabe im Quellcode aufgrund eines mir unbekannten Fehlers wird allerdings das Feld nicht gerendert bzw. kann nicht gerendert werden:

<div id="city-filter" class="sw-filter-panel__item"><sw-string-filter filter="[object Object]"></sw-string-filter></div>

Hat jemand eine Idee, wie das funktioniert bzw. welchen Fehler ich mache? Gibt es alternativere „bessere“ Varianten?

VG

2

Servus,

hast Du dafür eine Lösung bzw. die Ursache gefunden?
Habe ein ähnliches Problem, bei dem bei mir auch dieselbe Zeile angezeigt wird
und komme da leider nicht weiter.

VG Werner.

3

Servus Werner,

hinbekommen habe ich es soweit, kann mich aber nicht genau mehr erinnern woran es lag - da es scheinbar mehreren so geht mal so wie es jetzt bei mir ist als Code- Snippet aufgrund der direkten Auffüllung der Felder mit den Daten nicht unbedingt der beste Weg für Shops mit erhöhten Bestell- Volumen

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;

Component.override('sw-order-list', {
    template,

    data() {
        return {
            limit: 100,
            availableFirstNames: [],
            availableLastNames: [],
            availableStreets: [],
            availableZips: [],
            availableCities: [],
            availableCompanies: [],
            defaultFilters: [
                'company-filter',
                'firstname-filter',
                'lastname-filter',
                'street-filter',
                'zip-filter',
                'city-filter',
                'affiliate-code-filter',
                'campaign-code-filter',
                'document-filter',
                'order-date-filter',
                'order-value-filter',
                'status-filter',
                'payment-status-filter',
                'delivery-status-filter',
                'payment-method-filter',
                'shipping-method-filter',
                'sales-channel-filter',
                'billing-country-filter',
                'customer-group-filter',
                'shipping-country-filter',
                'customer-group-filter',
                'tag-filter',
                'line-item-filter',
            ],
        };
    },

    computed: {
        filterSelectCriteria() {
            const criteria = new Criteria(1, 1);
            criteria.addFilter(Criteria.not(
                'AND',
                [
                    Criteria.equals('affiliateCode', null),
                    Criteria.equals('campaignCode', null),
                    Criteria.equals('orderCustomer.firstName', null),
                    Criteria.equals('orderCustomer.lastName', null),
                    Criteria.equals('billingAddress.street', null),
                    Criteria.equals('billingAddress.zipcode', null),
                    Criteria.equals('billingAddress.city', null),
                    Criteria.equals('billingAddress.company', null),
                ],
            ));
            criteria.addAggregation(Criteria.terms('affiliateCodes', 'affiliateCode', null, null, null));
            criteria.addAggregation(Criteria.terms('campaignCodes', 'campaignCode', null, null, null));
            criteria.addAggregation(Criteria.terms('firstNames', 'orderCustomer.firstName', null, null, null, null));
            criteria.addAggregation(Criteria.terms('lastNames', 'orderCustomer.lastName', null, null, null, null));
            criteria.addAggregation(Criteria.terms('streets', 'billingAddress.street', null, null, null, null));
            criteria.addAggregation(Criteria.terms('zips', 'billingAddress.zipcode', null, null, null, null));
            criteria.addAggregation(Criteria.terms('cities', 'billingAddress.city', null, null, null, null));
            criteria.addAggregation(Criteria.terms('companies', 'billingAddress.company', null, null, null, null));

            return criteria;
        },
        listFilters() {
            if (this.feature.isActive('FEATURE_NEXT_7530')) {
                return this.filterFactory.create('order', {
                    'company-filter': {
                        property: 'billingAddress.company',
                        type: 'multi-select-filter',
                        label: this.$tc('itw-filter.company.label'),
                        placeholder: this.$tc('itw-filter.company.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableCompanies,
                    },
                    'firstname-filter': {
                        property: 'orderCustomer.firstName',
                        type: 'multi-select-filter',
                        label: this.$tc('itw-filter.firstname.label'),
                        placeholder: this.$tc('itw-filter.firstname.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableFirstNames,
                    },
                    'lastname-filter': {
                        property: 'orderCustomer.lastName',
                        type: 'multi-select-filter',
                        label: this.$tc('itw-filter.lastname.label'),
                        placeholder: this.$tc('itw-filter.lastname.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableLastNames,
                    },
                    'street-filter': {
                        property: 'billingAddress.street',
                        type: 'multi-select-filter',
                        label: this.$tc('sw-customer.list.columnStreet'),
                        placeholder: this.$tc('itw-filter.street.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableStreets,
                    },
                    'zip-filter': {
                        property: 'billingAddress.zipcode',
                        type: 'multi-select-filter',
                        label: this.$tc('sw-customer.list.columnZip'),
                        placeholder: this.$tc('itw-filter.zip.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableZips,
                    },
                    'city-filter': {
                        property: 'billingAddress.city',
                        type: 'multi-select-filter',
                        label: this.$tc('sw-customer.list.columnCity'),
                        placeholder: this.$tc('itw-filter.city.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableCities,
                    },
                    'sales-channel-filter': {
                        property: 'salesChannel',
                        label: this.$tc('sw-order.filters.salesChannelFilter.label'),
                        placeholder: this.$tc('sw-order.filters.salesChannelFilter.placeholder'),
                    },
                    'order-value-filter': {
                        property: 'amountTotal',
                        type: 'number-filter',
                        label: this.$tc('sw-order.filters.orderValueFilter.label'),
                        fromFieldLabel: null,
                        toFieldLabel: null,
                        fromPlaceholder: this.$tc('global.default.from'),
                        toPlaceholder: this.$tc('global.default.to'),
                    },
                    'payment-status-filter': {
                        property: 'transactions.stateMachineState',
                        criteria: this.getStatusCriteria('order_transaction.state'),
                        label: this.$tc('sw-order.filters.paymentStatusFilter.label'),
                        placeholder: this.$tc('sw-order.filters.paymentStatusFilter.placeholder'),
                    },
                    'delivery-status-filter': {
                        property: 'deliveries.stateMachineState',
                        criteria: this.getStatusCriteria('order_delivery.state'),
                        label: this.$tc('sw-order.filters.deliveryStatusFilter.label'),
                        placeholder: this.$tc('sw-order.filters.deliveryStatusFilter.placeholder'),
                    },
                    'status-filter': {
                        property: 'stateMachineState',
                        criteria: this.getStatusCriteria('order.state'),
                        label: this.$tc('sw-order.filters.statusFilter.label'),
                        placeholder: this.$tc('sw-order.filters.statusFilter.placeholder'),
                    },
                    'order-date-filter': {
                        property: 'orderDateTime',
                        label: this.$tc('sw-order.filters.orderDateFilter.label'),
                        dateType: 'date',
                        fromFieldLabel: null,
                        toFieldLabel: null,
                        showTimeframe: true,
                    },
                    'tag-filter': {
                        property: 'tags',
                        label: this.$tc('sw-order.filters.tagFilter.label'),
                        placeholder: this.$tc('sw-order.filters.tagFilter.placeholder'),
                    },
                    'affiliate-code-filter': {
                        property: 'affiliateCode',
                        type: 'multi-select-filter',
                        label: this.$tc('sw-order.filters.affiliateCodeFilter.label'),
                        placeholder: this.$tc('sw-order.filters.affiliateCodeFilter.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableAffiliateCodes,
                    },
                    'campaign-code-filter': {
                        property: 'campaignCode',
                        type: 'multi-select-filter',
                        label: this.$tc('sw-order.filters.campaignCodeFilter.label'),
                        placeholder: this.$tc('sw-order.filters.campaignCodeFilter.placeholder'),
                        valueProperty: 'key',
                        labelProperty: 'key',
                        options: this.availableCampaignCodes,
                    },
                    'document-filter': {
                        property: 'documents',
                        label: this.$tc('sw-order.filters.documentFilter.label'),
                        placeholder: this.$tc('sw-order.filters.documentFilter.placeholder'),
                        optionHasCriteria: this.$tc('sw-order.filters.documentFilter.textHasCriteria'),
                        optionNoCriteria: this.$tc('sw-order.filters.documentFilter.textNoCriteria'),
                    },
                    'payment-method-filter': {
                        property: 'transactions.paymentMethod',
                        label: this.$tc('sw-order.filters.paymentMethodFilter.label'),
                        placeholder: this.$tc('sw-order.filters.paymentMethodFilter.placeholder'),
                    },
                    'shipping-method-filter': {
                        property: 'deliveries.shippingMethod',
                        label: this.$tc('sw-order.filters.shippingMethodFilter.label'),
                        placeholder: this.$tc('sw-order.filters.shippingMethodFilter.placeholder'),
                    },
                    'billing-country-filter': {
                        property: 'billingAddress.country',
                        label: this.$tc('sw-order.filters.billingCountryFilter.label'),
                        placeholder: this.$tc('sw-order.filters.billingCountryFilter.placeholder'),
                    },
                    'shipping-country-filter': {
                        property: 'deliveries.shippingOrderAddress.country',
                        label: this.$tc('sw-order.filters.shippingCountryFilter.label'),
                        placeholder: this.$tc('sw-order.filters.shippingCountryFilter.placeholder'),
                    },
                    'customer-group-filter': {
                        property: 'orderCustomer.customer.group',
                        label: this.$tc('sw-order.filters.customerGroupFilter.label'),
                        placeholder: this.$tc('sw-order.filters.customerGroupFilter.placeholder'),
                    },
                    'line-item-filter': {
                        property: 'lineItems.product',
                        label: this.$tc('sw-order.filters.productFilter.label'),
                        placeholder: this.$tc('sw-order.filters.productFilter.placeholder'),
                        criteria: this.productCriteria,
                        displayVariants: true,
                    },
                });
            }

            return this.filterFactory.create('order', {
                'company-filter': {
                    property: 'billingAddress.company',
                    type: 'multi-select-filter',
                    label: this.$tc('itw-filter.company.label'),
                    placeholder: this.$tc('itw-filter.company.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableCompanies,
                },
                'firstname-filter': {
                    property: 'orderCustomer.firstName',
                    type: 'multi-select-filter',
                    label: this.$tc('itw-filter.firstname.label'),
                    placeholder: this.$tc('itw-filter.firstname.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableFirstNames,
                },
                'lastname-filter': {
                    property: 'orderCustomer.lastName',
                    type: 'multi-select-filter',
                    label: this.$tc('itw-filter.lastname.label'),
                    placeholder: this.$tc('itw-filter.lastname.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableLastNames,
                },
                'street-filter': {
                    property: 'billingAddress.street',
                    type: 'multi-select-filter',
                    label: this.$tc('sw-customer.list.columnStreet'),
                    placeholder: this.$tc('itw-filter.street.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableStreets,
                },
                'zip-filter': {
                    property: 'billingAddress.zipcode',
                    type: 'multi-select-filter',
                    label: this.$tc('sw-customer.list.columnZip'),
                    placeholder: this.$tc('itw-filter.zip.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableZips,
                },
                'city-filter': {
                    property: 'billingAddress.city',
                    type: 'multi-select-filter',
                    label: this.$tc('sw-customer.list.columnCity'),
                    placeholder: this.$tc('itw-filter.city.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableCities,
                },
                'affiliate-code-filter': {
                    property: 'affiliateCode',
                    type: 'multi-select-filter',
                    label: this.$tc('sw-order.filters.affiliateCodeFilter.label'),
                    placeholder: this.$tc('sw-order.filters.affiliateCodeFilter.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableAffiliateCodes,
                },
                'campaign-code-filter': {
                    property: 'campaignCode',
                    type: 'multi-select-filter',
                    label: this.$tc('sw-order.filters.campaignCodeFilter.label'),
                    placeholder: this.$tc('sw-order.filters.campaignCodeFilter.placeholder'),
                    valueProperty: 'key',
                    labelProperty: 'key',
                    options: this.availableCampaignCodes,
                },
                'document-filter': {
                    property: 'documents',
                    label: this.$tc('sw-order.filters.documentFilter.label'),
                    placeholder: this.$tc('sw-order.filters.documentFilter.placeholder'),
                    optionHasCriteria: this.$tc('sw-order.filters.documentFilter.textHasCriteria'),
                    optionNoCriteria: this.$tc('sw-order.filters.documentFilter.textNoCriteria'),
                },
                'order-date-filter': {
                    property: 'orderDateTime',
                    label: this.$tc('sw-order.filters.orderDateFilter.label'),
                    dateType: 'datetime-local',
                },
                'status-filter': {
                    property: 'stateMachineState',
                    criteria: this.getStatusCriteria('order.state'),
                    label: this.$tc('sw-order.filters.statusFilter.label'),
                    placeholder: this.$tc('sw-order.filters.statusFilter.placeholder'),
                },
                'payment-status-filter': {
                    property: 'transactions.stateMachineState',
                    criteria: this.getStatusCriteria('order_transaction.state'),
                    label: this.$tc('sw-order.filters.paymentStatusFilter.label'),
                    placeholder: this.$tc('sw-order.filters.paymentStatusFilter.placeholder'),
                },
                'delivery-status-filter': {
                    property: 'deliveries.stateMachineState',
                    criteria: this.getStatusCriteria('order_delivery.state'),
                    label: this.$tc('sw-order.filters.deliveryStatusFilter.label'),
                    placeholder: this.$tc('sw-order.filters.deliveryStatusFilter.placeholder'),
                },
                'payment-method-filter': {
                    property: 'transactions.paymentMethod',
                    label: this.$tc('sw-order.filters.paymentMethodFilter.label'),
                    placeholder: this.$tc('sw-order.filters.paymentMethodFilter.placeholder'),
                },
                'shipping-method-filter': {
                    property: 'deliveries.shippingMethod',
                    label: this.$tc('sw-order.filters.shippingMethodFilter.label'),
                    placeholder: this.$tc('sw-order.filters.shippingMethodFilter.placeholder'),
                },
                'sales-channel-filter': {
                    property: 'salesChannel',
                    label: this.$tc('sw-order.filters.salesChannelFilter.label'),
                    placeholder: this.$tc('sw-order.filters.salesChannelFilter.placeholder'),
                },
                'billing-country-filter': {
                    property: 'billingAddress.country',
                    label: this.$tc('sw-order.filters.billingCountryFilter.label'),
                    placeholder: this.$tc('sw-order.filters.billingCountryFilter.placeholder'),
                },
                'shipping-country-filter': {
                    property: 'deliveries.shippingOrderAddress.country',
                    label: this.$tc('sw-order.filters.shippingCountryFilter.label'),
                    placeholder: this.$tc('sw-order.filters.shippingCountryFilter.placeholder'),
                },
                'customer-group-filter': {
                    property: 'orderCustomer.customer.group',
                    label: this.$tc('sw-order.filters.customerGroupFilter.label'),
                    placeholder: this.$tc('sw-order.filters.customerGroupFilter.placeholder'),
                },
                'tag-filter': {
                    property: 'tags',
                    label: this.$tc('sw-order.filters.tagFilter.label'),
                    placeholder: this.$tc('sw-order.filters.tagFilter.placeholder'),
                },
                'line-item-filter': {
                    property: 'lineItems.product',
                    label: this.$tc('sw-order.filters.productFilter.label'),
                    placeholder: this.$tc('sw-order.filters.productFilter.placeholder'),
                    criteria: this.productCriteria,
                    displayVariants: true,
                },
            });
        },
    },

    methods: {
        loadFilterValues() {
            this.filterLoading = true;

            return this.orderRepository.search(this.filterSelectCriteria).then(({ aggregations }) => {
                this.availableAffiliateCodes = aggregations.affiliateCodes.buckets;
                this.availableCampaignCodes = aggregations.campaignCodes.buckets;
                this.availableFirstNames = aggregations.firstNames.buckets;
                this.availableLastNames = aggregations.lastNames.buckets;
                this.availableStreets = aggregations.streets.buckets;
                this.availableZips = aggregations.zips.buckets;
                this.availableCities = aggregations.cities.buckets;
                this.availableCompanies = aggregations.companies.buckets;

                this.filterLoading = false;

                return aggregations;
            }).catch(() => {
                this.filterLoading = false;
            });
        },
    }
});
4

Hi,
okay, vielen Dank.

Das Problem ist wohl, denke ich zumindest, daß der sw-string-filter komplett fehlt, habe den rudimentär selbst implementiert und bei mir im Plugin benutzt, ein anderer auf shopware slack hat das auch gemacht, kann aber natürlich nicht Sinn und Zweck von dem ganzen sein, daß das jeder selbst macht. Auf github gibt es auch ein issue:

sw-string-filter

Nun ja…

Viele Grüße,
Werner.