Entwickler-Ressourcen

Nützliche Funktionen für Shopware 6 Entwickler

Conditonal Config Fields

Standardmäßig lassen sich Plugin-Einstellungen, die über eine config.xml oder customConfig.xml definiert sind, nicht nach Bedingungen steuern.

Beispiel: Eine Plugin-Einstellung ist abhängig von einer anderen, d.h. sie soll nur dann im Admin-UI angezeigt werden, wenn die übergeordnete Einstellung "true" ist.

Die "Conditional Config Fields" in der norisk Foundation erweitern den Standard hier mit den dafür notwendigen Markern und Attributen.

1. Opt-in Signal in config.xml eintragen

Um das "Conditional Config Fields"-System generell zu aktivieren, fügst du in genau einem <card>-Block den Signal-Marker noriskToggleProvider ein.

<card>
    <component name="norisk-toggle-provider">
        <name>noriskToggleProvider</name>
    </component>
    <!-- weitere Felder -->
</card>

2. Abhängige Felder markieren

Über das Attribut <noriskConditionalField> knüpfst du nun Felder an Bedingungen, wie in diesem Beispiel verdeutlicht:

<!-- Einfach: nur sichtbar wenn "active" true ist -->
<input-field type="text">
    <name>apiKey</name>
    <noriskConditionalField>active</noriskConditionalField>
</input-field>

<!-- AND: beide müssen true sein -->
<noriskConditionalField>active+showDetails</noriskConditionalField>

<!-- OR: mindestens eines muss true sein -->
<noriskConditionalField>modeA;modeB</noriskConditionalField>

<!-- Kombiniert: AND hat Vorrang vor OR → (a AND b) OR c -->
<noriskConditionalField>active+showDetails;legacyMode</noriskConditionalField>

Operatoren

Operator	Bedeutung	Priorität
+	AND	höher
;	OR	niedriger

Einschränkungen

• Kein Wertevergleich möglich, nur Truthy/Falsy (!!value)

• Keine Klammerung, komplexe Ausdrücke ggfs. über ein Zwischentoggle-Feld lösen

• Felder bleiben im DOM (v-show, nicht v-if), Werte werden auch bei ausgeblendeten Feldern gespeichert

Config Section Headings

Zur Strukturierung und Gliederung umfangreicher Konfigurationsmasken, können Bereichsüberschriften innerhalb von Cards eine gute Wahl sein.

Mit den "Config Section Headings" der norisk Foundation teilst du Cards mit fett formatierten Abschnittsüberschriften und Trennlinien in visuell getrennte Abschnitte auf.

Füge dazu eine norisk-config-heading-Komponente an beliebiger Stelle innerhalb eines -Blocks ein. Alle nachfolgenden Felder gehören visuell zu diesem Abschnitt.

Hinweise

• Die erste Überschrift einer Card hat keine obere Trennlinie, jede folgende Überschrift erhält eine durchgehende Trennlinie darüber.

• Verwende <heading> statt <label> sw-system-config entnimmt Labels bei benutzerdefinierten <component>-Elementen und übergibt sie an den umgebenden Inherit-Wrapper; ein Label würde daher stets leer ankommen.

• Die Komponente ist rein darstellend und speichert keinen Konfigurationswert.

Loading Spinner

norisk Foundation v1.2.0

Die Komponente norisk-loading-spinner wrapped den SW-nativen mt-loader und gibt die Möglichkeit, einen optionalen Text unter dem animierten Loading-Indikator auszugeben.

Verwendung

Prop	Typ	Default	Beschreibung
isLoading	Boolean	true	false → Komponente wird nicht gerendert
label	String	''	Text unterhalb des Spinners. Wird ignoriert wenn der Default-Slot befüllt ist
size	String	'48px'	Größe des Spinners, z.B. '16px', '32px', '48px'
minHeight	String	''	Min-Höhe des Containers, z.B. '320px'. Standard ist padding-basiert

Slot	Beschreibung
default	Inhalt unterhalb des Spinners. Fällt auf label-Prop zurück wenn leer

Beispiele

Nur Spinner

<norisk-loading-spinner v-if="isLoading" />

Spinner mit Label

<norisk-loading-spinner v-if="isLoading" :label="$tc('my-plugin.loading')" />

Steuerung per Prop statt v-if

<norisk-loading-spinner :is-loading="isLoading" :label="$tc('my-plugin.loading')" />

Fixe Höhe (z.B. in einer Listing-Area)

<norisk-loading-spinner v-if="isLoading" min-height="320px" />

Custom Slot-Inhalt (z.B. mit Abbrechen-Button)

<norisk-loading-spinner v-if="isLoading">
    <p>{{ $tc('my-plugin.loading') }}</p>
    <mt-button @click="cancel">{{ $tc('global.default.cancel') }}</mt-button>
</norisk-loading-spinner>