2 minutes September 30, 2024

So aktivieren Sie die Auswahloption in der Inline-Edit-Funktion der Admin-Liste in Shopware 6

Beim Verwalten einer Administratorliste kann es vorkommen, dass Sie mehrere Status mithilfe der Inline-Bearbeitungsfunktion bearbeiten müssen. Die standardmäßige Inline-Bearbeitung bietet hierfür jedoch keine Auswahlmöglichkeit. Um dieses Problem zu beheben, können Sie die Standardeinstellung überschreiben sw-data-grid-inline-edit Komponente in Shopware. Dieser Leitfaden führt Sie durch den Prozess.

Vorstehendes Problem

Sie müssen einige Status (z. B. Ausstehend, Akzeptiert, Abgelehnt) über die Inline-Bearbeitungsfunktion in der Shopware-Administratorliste aktualisieren.

Solution for Inline Edits in Shopware 6

Um eine Auswahloption in der Inline-Bearbeitungsfunktion hinzuzufügen, führen Sie die folgenden Schritte aus:

Schritt 1: Überschreiben Sie die sw-data-grid-inline-edit Komponente

Überschreiben Sie die sw-data-grid-inline-edit JavaScript-Datei im Administrator unter folgendem Pfad:

app/administration/src/app/component/data-grid/sw-data-grid-inline-edit.index.js

1	app/administration/src/app/component/data-grid/sw-data-grid-inline-edit.index.js

Nachfolgend finden Sie den zu verwendenden Code:

Vorlage importieren aus './sw-data-grid-inline-edit.html.twig';

const { Component } = Shopware;

/**
 * @Paketadministrator
 *
 * @Privat
 */
Component.override('sw-data-grid-inline-edit', {
    Vorlage
});

Vorlage importieren aus './sw-data-grid-inline-edit.html.twig';

const { Component } = Shopware;

/**

* @Paketadministrator

* @Privat

Component.override('sw-data-grid-inline-edit', {

Vorlage

});

Schritt 2: Ändern Sie die Vorlage für die Auswahloption

Nach dem Überschreiben der sw-data-grid-inline-edit Ändern Sie die importierte Twig-Datei so, dass sie die Auswahloptionslogik enthält. Fügen Sie den folgenden Codeblock in Ihr ein sw-data-grid-inline-edit.html.twig Datei:

 {% block sw_data_grid_inline_edit_type_select %}
    <sw-select-field 
        v-else-if="column.inlineEdit === 'select'"
        key="select"
        v-model:value="aktuellerWert"
        name="sw-field--currentValue"
    >
        <Option 
            v-for="Option in Column.selectOptions" 
            :key="option.value" 
            :value="option.value"
        >
            {{ option.label }}
        </option>
    </sw-select-field>
{% endblock %}

{% block sw_data_grid_inline_edit_type_select %}

<sw-select-field

v-else-if="column.inlineEdit === 'select'"

key="select"

v-model:value="aktuellerWert"

name="sw-field--currentValue"

<Option

v-for="Option in Column.selectOptions"

:key="option.value"

:value="option.value"

</option>

</sw-select-field>

{% endblock %}

Dadurch wird ermöglicht, dass das Auswahlfeld im Inline-Bearbeitungsbereich angezeigt wird, wenn inlineBearbeiten eingestellt ist wählen für eine bestimmte Spalte.

Schritt 3: Übergeben Sie die Auswahloptionswerte

Um die ausgewählten Optionswerte (wie „Ausstehend“, „Akzeptiert“, „Abgelehnt“) zu übergeben, müssen Sie sie im definieren Daten() Funktion und weisen Sie sie mithilfe der berechneten Eigenschaft der jeweiligen Spalte zu.

So übergeben Sie die ausgewählten Optionswerte:

data() {
    zurückkehren {
        selectOptions: [
            { value: 'pending', label: 'Pending' },
            { value: 'accepted', label: 'Accepted' },
            { value: 'rejected', label: 'Rejected' },
            { value: 'hold', label: 'Hold' },
        ],
    };
},
berechnet: {
    columns() {
        zurückkehren [
            {
                Eigenschaft: 'status',
                dataIndex: 'status',
                Etikett: 'Status',
                inlineEdit: 'select',
                selectOptions: this.selectOptions,
            },
        ];
    },
},

data() {

zurückkehren {

selectOptions: [

{ value: 'pending', label: 'Pending' },

{ value: 'accepted', label: 'Accepted' },

{ value: 'rejected', label: 'Rejected' },

{ value: 'hold', label: 'Hold' },

};

berechnet: {

columns() {

zurückkehren [

{

Eigenschaft: 'status',

dataIndex: 'status',

Etikett: 'Status',

inlineEdit: 'select',

selectOptions: this.selectOptions,

];

In diesem Code:

Der selectOptions Das Array enthält die Optionen, die im Auswahlfeld angezeigt werden.
Der Spalten Die berechnete Eigenschaft definiert, welche Spalte die Inline-Bearbeitungsfunktion mit den Auswahloptionen verwendet.

Abschluss

Durch Überschreiben des sw-data-grid-inline-edit Komponente hinzufügen und ein benutzerdefiniertes Auswahlfeld in der Vorlage hinzufügen, können Sie ganz einfach eine Auswahloption in der Inline-Bearbeitungsfunktion der Admin-Liste implementieren und für Expertenunterstützung bei solchen Anpassungen können Sie sich an wenden Shopware-Agentur um eine nahtlose Integration und optimierte Funktionalität zu gewährleisten.

Recent help desk articles

Grüße! Ich bin Aneesh Sreedharan, CEO von 2Hats Logic Solutions. Bei 2Hats Logic Solutions widmen wir uns der Bereitstellung von technischem Fachwissen und der Lösung Ihrer Probleme in der Welt der Technologie. Unsere Blog-Seite dient als Ressource, in der wir Einblicke und Erfahrungen teilen und wertvolle Perspektiven auf Ihre Fragen bieten.

Aneesh Sreedharan

Gründer & CEO, 2Hats Logic Solutions

Abonnieren Sie unseren Newsletter