Templating

Guppy verfolgt einen komponentenbasierten Ansatz, um eine saubere Trennung von Logik und Darstellung zu gewährleisten. Unser Ziel ist es, ein System zu schaffen, das sowohl wartungsfreundlich als auch zukunftssicher ist. Um dies zu erreichen, setzen wir auf dynamische und modulare Mechanismen, wie sie auch in der Gestaltung von Templates zum Einsatz kommen. Dies ermöglicht uns, individuelle Anpassungen vorzunehmen, ohne die Kernfunktionen von Shopware 6 zu beeinträchtigen. Durch diese Methodik bleibt Guppy vollständig updatefähig und reduziert langfristig Wartungsaufwand.

Warum dieser Ansatz?

Shopware 6 ist ein mächtiges Framework, dessen Updatefähigkeit und Flexibilität durch unser Vorgehen bestmöglich erhalten bleiben. Die dynamische Handhabung von Konfigurationen ermöglicht:

1. Maximale Anpassbarkeit: Unterschiedliche Anforderungen können durch gezielte Konfigurationen erfüllt werden, ohne den Kerncode zu modifizieren.
2. Modularität: Komponenten wie Footer, Header oder Widgets werden als eigenständige Module behandelt, was ihre Wiederverwendbarkeit erhöht.
3. Upgrade-Kompatibilität: Da wir uns an die Richtlinien von Shopware 6 halten und spezifische Anpassungen in separaten Dateien vornehmen, bleiben künftige Updates des Systems reibungslos anwendbar.
4. Barrierefreiheit: Durch modulare Templates lassen sich barrierefreie Anpassungen gezielt und flexibel integrieren, ohne globalen Code anzupassen.

Theme-Integration

Guppy nutzt die Theme-Konfiguration (theme.json) als zentrale Steuerungsinstanz für dynamische Anpassungen von Komponenten. Die Konfiguration ermöglicht es, spezifische Designentscheidungen direkt über die Theme-Einstellungen vorzunehmen, ohne tief in den Code eingreifen zu müssen.

Vorteile

Die Verwendung von theme.json erlaubt es, wichtige Einstellungen wie den Footer-Typ flexibel zu definieren. Dies bringt folgende Vorteile:

1. Klarheit und Struktur: Alle Anpassungen werden an einer zentralen Stelle verwaltet.
2. Wartungsfreundlichkeit: Änderungen können einfach durch Anpassungen der theme.json vorgenommen werden, ohne den Template-Code zu berühren.
3. Erweiterbarkeit: Neue Konfigurationsmöglichkeiten können einfach hinzugefügt werden, was das System zukunftssicher macht.
4. Upgrade-Kompatibilität: Anpassungen erfolgen auf Basis von Shopware-Konventionen, was Konflikte bei zukünftigen Updates minimiert.

Funktionsweise (am Beispiel des Footers)

Der Code für den Footer berücksichtigt die Einstellungen in der theme.json, indem er die Funktion theme_config() verwendet. Diese liest die in der theme.json definierten Werte aus.

Beispielcode:

{% if theme_config('guppy-footer') != "default" %}
    {% set configFooter = theme_config('guppy-footer') %}
{% endif %}

INFO

Erklärung Die Funktion theme_config('guppy-footer') überprüft, ob in der theme.json eine spezifische Footer-Konfiguration (guppy-footer) definiert wurde.

Ergänzung im Footer-Template:

{# src/Resources/views/storefront/base.html.twig #}

{% block base_footer %}
    <footer class="footer-main{% if configFooter %} footer-main-{{ configFooter }} pt-md-3 pt-4{% endif %}">
        {% block base_footer_inner %}
            {% if configFooter %}
                {% sw_include '@Storefront/storefront/layout/footer/footer-' ~ configFooter ~ '.html.twig' %}
            {% else %}
                {{ parent() }}
            {% endif %}
        {% endblock %}
    </footer>
{% endblock %}

Beispielhafte Konfiguration in theme.json:

// src/Resources/theme.json

{
  ...
  "config": {
    ...
    "fields": {
        ...
        "guppy-footer": {
            "label": {
                "en-GB": "Footer variant",
                "de-DE": "Footer Variante"
            },
            "type": "text",
            "value": "guppy-default",
            "custom": {
                "componentName": "sw-single-select",
                "options": [
                    {
                        "value": "default",
                        "label": {
                            "en-GB": "Shopware Default",
                            "de-DE": "Shopware Standard"
                        }
                    },
                    {
                        "value": "guppy-default",
                        "label": {
                            "en-GB": "Guppy Default",
                            "de-DE": "Guppy Standard"
                        }
                    }
                ]
            },
            "editable": true,
            "tab": "footer",
            "block": "layoutFooter",
            "order": 100
        }
    }
  }
}

Erweiterung der Template-Logik

Die in der theme.json ausgewählte Footer-Konfiguration guppy-default erfordert ein spezifisches Template mit dem Namen footer-guppy-default.html.twig. Dieses Template wird automatisch geladen, wenn der Wert guppy-default in der Theme-Konfiguration gesetzt wird. Das neue Template wird von der Standardvorlage footer.html.twig abgeleitet, um Änderungen spezifisch und modular zu halten.

Beispielcode für das Template:

{# src/Resources/views/storefront/layout/footer/footer-guppy-default.html.twig #}

{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}

// Hier Inhalt

INFO

Durch die Integration von Theme-Variablen wie theme_config('guppy-footer') bleibt Guppy hochgradig anpassbar und gleichzeitig kompatibel mit zukünftigen Shopware-Updates. Die Theme-Konfiguration erlaubt es Entwicklern und Admins, Änderungen schnell und effizient vorzunehmen, ohne tief in die Codebasis eingreifen zu müssen.