Aneesh . 3 minutes

September 5, 2023

So erstellen Sie benutzerdefinierte Komponenten in der Shopware 6 Plugin-Konfiguration

Aufgrund der Komplexität erlaubt Shopware nicht die Anzeige aller Komponenten auf der Plugin-Konfigurationsseite. Stattdessen empfiehlt Shopware die Erstellung benutzerdefinierter Module, um diese Komponenten innerhalb von Plugins effektiv zur Geltung zu bringen. Obwohl die Erstellung unserer benutzerdefinierten Module eine Option ist, ist es wichtig zu beachten, dass dieser Ansatz zeitaufwändig sein kann. Alternativ können wir benutzerdefinierte Komponenten innerhalb der Plugin-Konfiguration verwenden, um die spezifischen Anforderungen unseres Plugins effizienter zu erfüllen. In diesem Blogbeitrag werden wir uns eingehend mit einer detaillierten Anleitung befassen, wie Sie mithilfe benutzerdefinierter Komponenten Nachrichten elegant anzeigen und API-Aufrufschaltflächen in der Plugin-Konfiguration implementieren können.

Gut aussehende Nachrichten

In unseren Plugins nutzen wir häufig Snippets, um Übersetzungen in Textelemente einzubinden. Um diese Snippets innerhalb des Plugins ansprechend und informativ darzustellen, können wir benutzerdefinierte Komponenten verwenden. Zuerst müssen wir wie unten beschrieben eine benutzerdefinierte Komponente zur Konfigurationsseite des Plugins hinzufügen.

&lt;card&gt;
       &lt;title&gt;Info&lt;/title&gt;
       &lt;title lang="de-DE"&gt;Info&lt;/title&gt;
       &lt;component name="snippet-info"&gt;
           &lt;name&gt;snippetInfo&lt;/name&gt;
       &lt;/component&gt;
&lt;/card&gt;

<card>

<name>snippetInfo</name>

</component>

</card>

Der nächste Schritt besteht darin, die Komponente in die Verwaltung zu importieren. Importieren Sie die Komponente in die Datei main.js im Ordner src/Resources/app/administration/src/.

import './component/snippet-info'

1	import './component/snippet-info'

Fügen Sie in der Datei snippet-info/index.js den unten genannten Code hinzu.

const { Component, Context } = Shopware;

import template from './snippet-info.html.twig';

import './snippet-info.scss';

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

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

Component.register('snippet-info', {

Template,

methods: {

goToSnippetManager() {

const adminPath = Context.api.uri;

const emailTemplatePath = `${adminPath}#/sw/settings/snippet/detail/general.message`;

window.open(emailTemplatePath, '_blank');

}

},

{

'de-DE': deDE,

'en-GB': enGB

},

}&lt;span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"&gt;&lt;/span&gt;

const { Component, Context } = Shopware;

import template from './snippet-info.html.twig';

import './snippet-info.scss';

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

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

Component.register('snippet-info', {

Template,

methods: {

goToSnippetManager() {

const adminPath = Context.api.uri;

const emailTemplatePath = `${adminPath}#/sw/settings/snippet/detail/general.message`;

window.open(emailTemplatePath, '_blank');

}

{

'de-DE': deDE,

'en-GB': enGB

}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

Wir können den benutzerdefinierten Komponenten Snippets und Stile hinzufügen und müssen sie importieren, um sie im Plugin zu verwenden. Wir können unsere Nachrichten zur Twig-Datei hinzufügen, sie als Vorlage importieren und bei der Komponente registrieren. Die Stile, die wir in der SCSS-Datei hinzugefügt haben, werden in dieser Vorlage verwendet, damit wir gut aussehende Nachrichten in Plugin-Konfigurationen anzeigen können. Unten finden Sie eine Vorlage für eine Twig-Datei.

&lt;div class="alert alert-success"&gt;
    
 &lt;div style="display:flex"&gt;
   &lt;div class="alert-icon"&gt;
      &lt;span&gt;!&lt;/span&gt;
   &lt;/div&gt;
   &lt;div&gt;
     &lt;strong&gt;{{$t(translations_info.translations')}}&lt;/strong&gt;
     &lt;p&gt;{{$t(translations_info.note')}} &lt;a href="javascript:;" @click="goToSnippetManager"&gt;{{$t(translations_info.link')}}&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;&lt;span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"&gt;&lt;/span&gt;

</div>

<div>

<strong>{{$t(translations_info.translations')}}</strong>

<p>{{$t(translations_info.note')}} <a href="javascript:;" @click="goToSnippetManager">{{$t(translations_info.link')}}</a></p>

</div>

</div><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span>

Jetzt müssen Sie die Administration mit dem Administrations-Build-Befehl erstellen, um die Änderungen zu sehen. Die Plugin-Konfiguration sieht wie im folgenden Screenshot aus. Wenn Sie auf das Snippet „Gehe zu“ klicken, wird zur Bearbeitungsseite des Snippets „ general.message “ weitergeleitet, das wir in den Komponenten-Snippets hinzugefügt haben.

API-Testschaltflächen

Mit den benutzerdefinierten Komponenten können wir API-Testschaltflächen in der Plugin-Konfiguration hinzufügen. Fügen Sie dazu in der Datei config.xml den folgenden Code hinzu.

&lt;component name="api-test-button"&gt;
           &lt;name&gt;ApiTest&lt;/name&gt;
&lt;/component&gt; &lt;span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"&gt;&lt;/span

<name>ApiTest</name>

</component> <span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1"></span

Importieren Sie in der Datei main.js unter /src/Resources/app/administration/src unseren Komponentenordner.
import ‘.component/api-test’;

Fügen Sie innerhalb der Komponente/api-test/api-test-button.html.twig die Vorlagendatei wie unten beschrieben hinzu

&lt;div style="display: block; margin-bottom: 20px;font-size:14px;text-align:right"&gt;
   &lt;sw-button-process
       :isLoading="isLoading"
       :processSuccess="isSaveSuccessful"
       @process-finish="saveFinish"
       @click="checkApi"&gt;
       {{ $t('general.test_api') }}
   &lt;/sw-button-process&gt;
&lt;/div&gt;

<sw-button-process

:isLoading="isLoading"

:processSuccess="isSaveSuccessful"

@process-finish="saveFinish"

@click="checkApi">

</sw-button-process>

</div>

Importieren Sie in der Datei main.js unter /src/Resources/app/administration/src unseren Komponentenordner.
import ‘.component/api-test’;

Fügen Sie innerhalb der Komponente/api-test/api-test-button.html.twig die Vorlagendatei wie unten beschrieben hinzu

const { Component, Mixin } = Shopware;
import template from './api-test-button.html.twig';
import deDE from '../snippet/de-DE';
import enGB from '../snippet/en-GB';


Component.register('wp-api-test-button', {
   template,
   mixins: [
       Mixin.getByName('notification')
   ],
   snippets: {
       'de-DE': deDE,
       'en-GB': enGB
   },
   data() {
       return {
           isLoading: false,
           isSaveSuccessful: false
       };
   },
   methods: {
       saveFinish() {
           this.isSaveSuccessful = false;
       },


       checkApi() {
           this.isLoading = true;


           var postApiUrl = 'https://jsonplaceholder.typicode.com/posts'; //dummy API URL
           this.sendGetRequest(postApiUrl)
               .then(data =&gt; {
                   if (data.length &gt; 0) {
                       this.createNotificationSuccess({
                           message: this.$tc('general.api_url_is_valid')
                       });
                   } else {
                       this.isLoading = false;
                       this.createNotificationWarning({
                           message: this.$tc('general.api_url_is_not_valid')
                       });
                   }
               });
       },
       sendGetRequest(url) {
           return fetch(url)
               .then(response =&gt; {
                   if (!response.ok) {
                       this.isLoading = false;
                       this.createNotificationError({
                           message: this.$tc('general.api_url_is_not_valid')
                       });
                   } else {
                       return response.json();
                   }
               })
               .catch(error =&gt; {
                   this.isLoading = false;
                   this.createNotificationError({
                       message: this.$tc('general.api_url_is_not_valid')
                   });
               });
       }
   }

const { Component, Mixin } = Shopware;

import template from './api-test-button.html.twig';

import deDE from '../snippet/de-DE';

import enGB from '../snippet/en-GB';

Component.register('wp-api-test-button', {

template,

mixins: [

Mixin.getByName('notification')

snippets: {

'de-DE': deDE,

'en-GB': enGB

data() {

return {

isLoading: false,

isSaveSuccessful: false

};

methods: {

saveFinish() {

this.isSaveSuccessful = false;

checkApi() {

this.isLoading = true;

var postApiUrl = 'https://jsonplaceholder.typicode.com/posts'; //dummy API URL

this.sendGetRequest(postApiUrl)

.then(data => {

if (data.length > 0) {

this.createNotificationSuccess({

message: this.$tc('general.api_url_is_valid')

});

} else {

this.isLoading = false;

this.createNotificationWarning({

message: this.$tc('general.api_url_is_not_valid')

});

}

});

sendGetRequest(url) {

return fetch(url)

.then(response => {

if (!response.ok) {

this.isLoading = false;

this.createNotificationError({

message: this.$tc('general.api_url_is_not_valid')

});

} else {

return response.json();

}

})

.catch(error => {

this.isLoading = false;

this.createNotificationError({

message: this.$tc('general.api_url_is_not_valid')

});

}

Hier sendet die SendGetRequest-Funktion die API-Anfragen und gibt die Antwort zurück. Durch die Überprüfung der Antworten können wir Benachrichtigungen mit den Funktionen createNotificationSuccess oder createNotificationError anzeigen. Wir müssen die Administration mit dem Administrations-Build-Befehl erstellen, um die Änderungen zu sehen.

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.