Neues Theme erstellen

Ein Theme legt fest, wie ein Storefront aussieht und sich verhält. Du kannst jedes Twig-Template überschreiben, eigenes SCSS bereitstellen, CMS-Elemente hinzufügen und Einstellungen für die Administration verfügbar machen, ohne den hostware-Kern anzufassen. Jeder Verkaufskanal verwendet ein Theme, sodass eine einzige hostware-Installation auf jedem Storefront völlig unterschiedlich aussehen kann.

Um ein neues Theme zu erstellen, legst du ein Verzeichnis unter custom/themes/<vendor>/<name> mit einer composer.json an, aktivierst es über die Befehlszeile und weist es anschließend einem Verkaufskanal zu.

Wo ein Theme liegt

Jedes Theme befindet sich unter custom/themes/<vendor>/<name>. Die Segmente für Vendor und Name bilden die Identität des Themes und erscheinen in Asset-URLs. Verwende für Themes von Drittanbietern deinen eigenen Vendor-Slug; der Vendor hw ist für das hostware-Team reserviert.

Im Theme-Verzeichnis ist nur composer.json erforderlich. Alles andere ist optional:

custom/themes/hw/mytheme/
├── composer.json           required
├── config.xml              admin-configurable options (optional)
├── public/
│   ├── css/
│   │   ├── style.scss      SCSS entry the compile pipeline reads
│   │   └── style.min.css   fallback for storefronts before the first admin save
│   ├── js/                 theme JavaScript, served at /themes/<vendor>/<name>/js/*
│   └── img/                theme images, served at /themes/<vendor>/<name>/img/*
├── resources/
│   └── views/
│       └── storefront/     mirror any core template path to override it
└── Cms/
    └── Elements/           custom CMS elements (optional)

Die composer.json

Zwei Dinge machen ein Verzeichnis zu einem Theme: der Typ laravel-theme und ein Block extra.theme. Alles andere sind Metadaten, die die Administration auf der Theme-Karte anzeigt.

{
  "name": "hw/mytheme",
  "description": "My theme for hostware storefront",
  "type": "laravel-theme",
  "version": "1.0.0",
  "license": "proprietary",
  "extra": {
    "theme": {
      "parent": "",
      "active": true
    }
  }
}

Setze extra.theme.parent auf vendor/name eines anderen Themes, um alle zugehörigen Dateien zu übernehmen und darauf aufzubauen. Lass den Wert für ein eigenständiges Theme leer.

Registrieren und aktivieren

hostware entdeckt ein Theme durch das Scannen von Composer-Dateien, erstellt aber erst nach der Aktivierung einen Datenbankeintrag und ermöglicht es Verkaufskanälen, das Theme auszuwählen.

1. Führe php artisan theme:list aus. Wenn dein Theme fehlt, ist die composer.json ungültig oder der Typ falsch.

2. Führe php artisan theme:activate <vendor>/<name> aus. Für das obige Beispiel lautet der Befehl php artisan theme:activate hw/mytheme.

3. Führe php artisan theme:cache nur aus, wenn neue Twig-Dateien unter resources/views/ nicht aufgelöst werden.

Das Theme einem Verkaufskanal zuweisen

Ein Theme hat keine Wirkung, bis es von einem Verkaufskanal ausgewählt wird. Öffne Administration > Verkaufskanäle, bearbeite den gewünschten Kanal, wechsle zum Tab „Theme“, wähle das Theme aus und speichere. Beim Speichern wird die SCSS-Kompilierung sofort ausgelöst.

Was du als Nächstes erstellen kannst

Das Theme-System bietet pro Funktionalität einen Einstiegspunkt. Lies den Abschnitt, der zu dem passt, was du erstellst.

• Templates. Struktur der Namespaces und wie der Resolver eine Version auswählt. Eine Template-Datei erweitern für das blockweise Überschreibungsmuster.

• Farben, Schriftarten und Radien. Theme-SCSS mit Markeneinstellungen kompilieren für die SCSS-Pipeline und die Integration des Branding-Formulars.

• Einstellungen für die Administration. Theme-Konfiguration über config.xml für Tabs, Felder und die Verarbeitung der gespeicherten Werte durch Templates.

• Ausgewählte Markenvoreinstellungen. Anpassungspakete für die Option „Standardeinstellungen wiederherstellen“ mit einem Klick.

• CMS-Inhaltsblöcke. Ein CMS-Element aus einem Theme hinzufügen für eigene wiederverwendbare Seitenbereiche.

• Bilder, JavaScript, Schriftarten. Bilder, JavaScript und andere Theme-Assets bereitstellen für die URL-Konventionen und den Cache-Buster.

• Referenz. Von einem Theme verwendete Twig-Hilfsfunktionen listet die Funktionen und Kontextvariablen auf, die in jedem Template verfügbar sind.

• Entwicklungszyklus. Ein Theme lokal entwickeln und debuggen behandelt den SCSS-Watcher, das Leeren des Caches und die häufigsten Fehler, durch die Änderungen verborgen bleiben.