Wie deaktiviere ich ein benutzerdefiniertes Feld in Shopware 6 basierend auf dem Status eines anderen?

In Shopware 6 kommt es häufig vor, dass Sie den aktiven Schalter eines benutzerdefinierten Felds ändern müssen, indem Sie den Schalter eines anderen benutzerdefinierten Felds überprüfen. Eine solche Situation tritt sehr häufig auf, wenn Sie widersprüchliche Konfigurationen vermeiden oder sicherstellen möchten, dass sich gegenseitig ausschließende Optionen ausgewählt werden. Dieser Artikel ist eine Anleitung, wie Sie dies mithilfe von JavaScript-Overrides in Shopware 6 erreichen.

Problem 

Es geht darum, den Wert eines benutzerdefinierten Felds abhängig vom Status eines anderen zu ändern. Genauer gesagt: Ändern Sie ein benutzerdefiniertes API-Kontrollkästchen („custom_api_checkbox_two“), wenn ein anderes Kontrollkästchen („custom_api_checkbox_one“) aktiviert ist, und umgekehrt.

Lösung

Wir werden diese Funktionalität in JavaScript-Overrides bei Shopware hinzufügen. Mithilfe von JavaScript-Überschreibungen können wir die Codefunktionalität erweitern oder ändern, ohne die Kerndateien direkt zu ändern.

Sehen Sie sich ein Beispielcode-Snippet an, das zeigt, wie Sie dies erhalten:

```javascript
Shopware.Component.override('sw-inherit-wrapper', {
    methods: {
        setupCheckboxEventListeners() {
            const checkboxOne = document.querySelector('[name="custom_api_checkbox_one"]');
            const checkboxTwo = document.querySelector('[name="custom_api_checkbox_two"]');
            
            if (checkboxOne) {
                checkboxOne.addEventListener('change', this.handleCheckboxTwo);
            }
            
            if (checkboxTwo) {
                checkboxTwo.addEventListener('change', this.handleCheckboxOne);
            }
        },
        handleCheckboxTwo(event) {
            const checkboxTwo = document.querySelector('[name="custom_api_checkbox_two"]');
            if (event.target.checked) {
                if (checkboxTwo && checkboxTwo.checked) {
                    checkboxTwo.checked = false;
                    const event = new Event('change');
                    checkboxTwo.dispatchEvent(event);
                }
            }
        },
        handleCheckboxOne(event) {
            const checkboxOne = document.querySelector('[name="custom_api_checkbox_one"]');
            if (event.target.checked) {
                if (checkboxOne && checkboxOne.checked) {
                    checkboxOne.checked = false;
                    const event = new Event('change');
                    checkboxOne.dispatchEvent(event);
                }
            }
        }
    },
    mounted() {
        this.setupCheckboxEventListeners();
    }
});
```

Wie es funktioniert

1. Erweitern Sie „sw-inherit-wrapper“.

Erweitern Sie das Verhalten der Komponente „sw-inherit-wrapper“, die sehr häufig zur Verwaltung vererbbarer Einstellungen verwendet wird.

2. Erstellen Sie Ereignis-Listener

 Wir erstellen die Ereignis-Listener in der Methode „setupCheckboxEventListeners“, um Änderungen in unseren beiden benutzerdefinierten Kontrollkästchen zu erkennen.

3. Behandeln Sie das Kontrollkästchen „Ändern“.

„handleCheckboxOne“ und „handleCheckboxTwo“ verarbeiten die Änderungen der Kontrollkästchen. Bei einem Schalter wird die Auswahl des anderen Schalters aufgehoben und ein Änderungsereignis ausgelöst, um die Konsistenz aufrechtzuerhalten.

Implementierungsschritte

Schritt 1: Kopieren Sie das bereitgestellte JavaScript-Code-Snippet.

Schritt 2. Navigieren Sie zum benutzerdefinierten Theme oder Plugin Ihres Shopware 6-Projekts, wo Sie Zugriff auf JavaScript-Überschreibungen haben.

Schritt 3: Fügen Sie den Code in eine entsprechende JavaScript-Datei ein (z. B. „src/Resources/app/administration/src/overrides/customFieldOverrides.js“).

Schritt 4. Stellen Sie sicher, dass die Datei korrekt in Ihrem Shopware 6-Verwaltungsbereich enthalten und geladen ist.

Schritt 5. Leeren Sie ggf. den Cache und laden Sie den Administrationsbereich neu, um die Änderungen zu übernehmen.

Abschluss

Wenn Sie diese Schritte befolgen und den bereitgestellten Code implementieren, stellen Sie sicher, dass Ihre benutzerdefinierten API-Kontrollkästchen entsprechend funktionieren und deaktivieren Sie eines, wenn das andere aktiviert ist. Dadurch wird das Benutzererlebnis verbessert und unnötige Konfigurationskonflikte innerhalb Ihrer Shopware 6-Umgebung vermieden. Wenn Sie auf andere Probleme stoßen oder Hilfe in anderen Bereichen benötigen, beauftragen Sie einfach einen Shopware-Entwickler , der diese Aufgaben einfacher erledigt.