Prüfen und ausliefern

Die drei Prüfbefehle

php artisan theme:doctor mein-theme

Liest das Theme: Kaufweg, Pflicht-Hooks, requires, Seeds, Block-Overrides (lesen sie ihre Optionen, lesen sie erfundene?), feste Farben im CSS, Einstellungen ohne Wirkung, Pflichtblöcke in der Kasse. Ergebnis Grün, Gelb (läuft, aber unvollständig) oder Rot (nicht ausliefern).

php artisan theme:smoke

Ruft Startseite, Produkt, Kategorie und Suche wirklich auf und misst den Inhaltsbereich. Der Doctor liest nur Dateien und sieht nicht, ob eine Seite leer rendert. Verlangt, dass das Theme aktiv ist.

php artisan builder:doctor

Meldet Block-Optionen, die keine Darstellung auswertet.

Dazu von Hand, weil kein Befehl es kann: einen Artikel wirklich in den Warenkorb legen und die Startseite auf Handybreite ansehen.

Im Adminbereich zeigt Themes → Abnahmebericht dieselben Ergebnisse im Klartext. Ein rotes Theme lässt sich nur mit Trotzdem aktivieren einschalten.

Ausliefern

1. Den Theme-Ordner als ZIP packen — theme.json liegt in der obersten Ebene des Ordners.
2. Im Ziel-Shop: Themes → Installieren → ZIP hochladen.
3. Ein hochgeladenes Theme ist zunächst nicht vertrauenswürdig: Es lässt sich weder aktivieren noch in der Vorschau ansehen, bis es auf seiner Kachel mit vertrauen freigegeben ist — auch seine Vorlagen sind ausführbarer Code.
4. Abnahmebericht ansehen, Vorschau, Aktivieren.

Eine neue Version desselben Themes wird genauso installiert; Inhalte im Builder bleiben erhalten.

Typische Fallen beim Stylen

Die Theme-Dateien werden kopiert. public/themes/{slug} ist eine Kopie. Nach CSS-Änderungen neu veröffentlichen (Schritt 5).

Blöcke bringen eigenes CSS mit. Es steht nach dem Theme-Stylesheet und gewinnt bei gleicher Spezifität. Abhilfe: Elementnamen davor (nav.mein-nav statt .mein-nav). Schreibt der Block einen Inline-Style, ist !important der einzige Weg — mit Kommentar, warum.

min-width: 0 lückenlos. Spalte → Hülle des Blocks → Block: Fehlt ein Glied, wächst es auf die Breite seines Inhalts und läuft aus der Spalte.

Ein zu breiter Block zoomt die ganze Seite heraus. Spaltenzahlen sind eine Obergrenze:

grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
@media (max-width: 820px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

Mobil ist eine eigene Komposition. Die Kopfzeile auf dem Handy zweizeilig (oben Menü, Logo, Symbole; darunter die Suche), Mega-Menüs eine Ebene nach der anderen. Ein Menü, ein Verhalten — nicht Schublade oben und Akkordeon unten.

Die Kopfzeile darf nicht von der Schriftbreite abhängen. Wird die Navigation mit der richtigen Schrift schon zweizeilig, springt sie beim Schrifttausch immer.

Kein Rechnen beim Laden. Skripte, die mehr als ein paar Millisekunden brauchen, starten erst bei Bedarf (Sichtkontakt, erste Berührung).

In der Builder-Vorschau laufen Einblende-Animationen nicht — Theme-JavaScript darf sich nicht darauf verlassen.