Designs

Theme-Konfiguration über config.xml

Ein Theme kann Einstellungen bereitstellen, die der Admin pro Vertriebskanal anpasst, ohne dass du eine Admin-Ansicht schreiben musst. Lege eine config.xml im Theme-Stammverzeichnis ab, und die Branding-Seite erhält zusätzliche Tabs mit den von dir definierten Feldern. Templates lesen diese Werte mit theme_config('key', 'default') aus.

Das XML-Schema ist dasselbe, das Module verwenden. Daher funktioniert hier jedes Konfigurationsbeispiel aus einem Modul.

Eine config.xml-Datei hinzufügen

Erstelle config.xml neben composer.json. Gruppiere Felder innerhalb von <tab>-Elementen. Jeder Tab wird zu einem Tab auf der Theme-Konfigurationsseite des Vertriebskanals.

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">

    <tab>
        <title>Design</title>
        <title lang="de">Design</title>
        <icon>far fa-palette</icon>

        <input-field type="single-select">
            <name>variant</name>
            <label>Design variant</label>
            <label lang="de">Design-Variante</label>
            <defaultValue>default</defaultValue>
            <options>
                <option><id>default</id><name>Standard</name></option>
                <option><id>futuristic</id><name>Futuristic</name></option>
            </options>
        </input-field>
    </tab>
</config>

Einen Wert aus Twig auslesen

Verwende theme_config überall dort, wo der Storefront-Inhalt gerendert wird. Das zweite Argument ist der Fallback für Vertriebskanäle, die noch keinen Wert gespeichert haben.

<body class="design--{{ theme_config('variant', 'default') }}">
    ...
</body>

Die Funktion ermittelt automatisch den Vertriebskanal, der gerade gerendert wird. Außerhalb einer Storefront-Anfrage, zum Beispiel in einem CLI-Befehl oder einem Job, gibt sie den Standardwert zurück.

Wo Werte gespeichert werden

Die Werte befinden sich in der Zeile des Vertriebskanals in der JSON-Spalte theme_configs, mit theme.<name> als Schlüssel. Wenn du einen Kanal von einem Theme zu einem anderen wechselst, werden deren Einstellungen niemals vermischt, da jedes Theme seinen eigenen Schlüssel verwendet.

// sales_channels.theme_configs
{
  "theme.evolution": {
    "variant": "futuristic",
    "header_show_search": true
  }
}

Verfügbare Feldtypen

Die nützlichsten Felder sind text, textarea, number, bool, single-select, multi-select, media und color. Jedes Feld benötigt ein <name>, ein <label> und normalerweise ein <defaultValue>. Übernimm die Struktur aus der config.xml eines beliebigen Moduls, um ein funktionierendes Beispiel für jeden Typ zu erhalten.

Übersetzungen

Jedes <title>, <label> und <helpText> kann mit einem lang-Attribut mehrfach definiert werden. Der Admin sieht das Label, das seiner aktiven Sprache entspricht. Andernfalls wird auf die Version ohne lang-Attribut zurückgegriffen.

<label>Show search bar</label>
<label lang="de">Suchleiste anzeigen</label>

Eine boolesche Checkbox wird nur gespeichert, wenn sie aktiviert ist. Lies sie in Twig mit theme_config('key') is defined aus, nicht mit == true, es sei denn, du hast ihr ein <defaultValue> gegeben.

War das hilfreich?
War das hilfreich?