Design Theme in Magento 2 (M2 ) selbst erstellen

0

Magento 2 und Design Template: individuelles Theming auch für Einsteiger

Per Design Template lassen sich recht simpel attraktive Themes in Magento 2 erstellen. Davon profitieren Shopbetreiber und Einstiegsentwickler erheblich.

Natürlich lassen sich rasch einmal generische Design Templates erwerben, etwa von TemplateMonster, um sie dann im eigenen Magento Store zu installieren – aber: Entsprechende Themes enthalten oft veraltete Module ohne Support. Zudem blähen sich jene Themes oft erheblich auf. Insgesamt kompromittieren allgemeine Design Templates die kritische Updatefähigkeit.

Weiter sind generische Templates oft nicht besonders performant, was niedrige Page Speeds bedeutet. Entsprechend langsame Interaktion mit Store-Seiten bewegt viele Besucher zum Verlassen des Shops.

Obendrein enthalten jene Templates nicht selten etliche Funktionen ohne Bedeutung für eigene Zwecke. Diese obsolete Funktionalität stiehlt den benötigten Funktionen knappe Systemressourcen.

Alternativ zu solchen Allzweck-Templates eignen sich passgenau erstellte Themes erheblich besser für den Eigenbedarf. Entsprechende Produktion aus eigener Hand gelingt zudem recht einfach.

Einfache Eigenentwicklung

Effizientes Theming gelingt mit einem Parent-Theme, von dem benötigte Themes wesentliche Eigenschaften bequem erben. Bereits wenige, simple Schritte führen zu praxisrelevanten Ergebnissen.

1) Ordner und File-Struktur

Zunächst lässt sich ein Theme-Ordner anlegen:

app/design/frontend/Vendor/Theme

Hier entsteht beispielsweise:

app/design/frontend/mein-theme/default

Dazu braucht es folgende Files:

 

Im Ordner legen wir theme.xml an. Diese Datei definiert den Namen unseres Themes. Zugleich legen wir hier das vererbende Ursprungstheme fest.

 

theme.xml mit Magento 2

– Knoten <title> meint den Theme-Namen
– Knoten <parent> bestimmt das vererbende Theme. Als Standards gelten hier Magento/blank und Magento/luma.

Im gleichen Ordner legen wir auch Registration.php an. Dieses File registriert unser neues Theme in unserem bereits bestehenden System. So ergibt sich:__code_REGISTRATION.XML

2) Aktivieren unseres Themes

Der Kern unseres Themes existiert jetzt bereits. Also löschen wir den Cache und setzen in der Console ein

– setup:static-content:deploy

ab. Dann sehen wir unser Theme bereits im Backend, um es zu aktivieren.

Unter

Content→Design→Configuration

finden wir eine Tabelle mit Stores. Dort wählen wir „Edit“ zum gewünschten Store.

Auf der Folgeseite sehen wir das aktuelle Theme unter Applied Theme. Wir wählen unser Theme und bestätigen „Save configuration“.

Jetzt löschen wir nochmals den Cache und sehen unser Theme im Frontend. Selbstredend erscheint dort nichts besonders Individuelles: Wir haben noch keine Modifikationen vorgenommen.

Unser eigenes Theme: erste Änderungen

Grundlegend arbeiten wir mit zwei diversen Dateiarten:

– selbst gefertigte Dateien
– Magento-Dateien aus dem Parent-Theme, die wir überschreiben

1) Überschreiben von Magento-Dateien

Als Beispiel wählen wir „Listenansicht“ auf einer Katalogseite. Die entsprechende Datei zählt zum Magento-Standard aus „blank“ und „luma“.

Jetzt legen wir in unserem Theme-Ordner das Äquivalent zur Datei „Listenansicht“ an:

Magento_Catalog/templates/product/list.phtml

Aus dem Ursprungspfad

…/magento/module-catalog/view/frontend/…

wird

Magento_Catalog/.

Der übrige Teil des Pfades bleibt unverändert:

/templates/product/list.phtml

So lässt sich auch jede andere Datei überschreiben. Allgemein folgt der Pfadaufbau letztlich diesem simplen Muster:

[Modul]/[template/layout/web]

Insgesamt ergibt sich als unser Theme

In der erzeugten Datei nehmen wir dann alle Modifikationen vor, die wir uns für die Katalogseite wünschen. Im Anschluss löschen wir den Cache, um die Änderungen zu sehen.

2) Anlegen eigener Dateien

Oft möchten wir eigene Dateien in eines unserer Magento-Projekte einbinden. Dazu legen wir in unserem Theme einen Web-Ordner an. Er wiederum erhält die Unterordner

css/, fonts/, images/ und js/.

Abhängig vom Typ des einzubindenden Files gehört es in den jeweiligen Ordner. Diese Files lassen sich dann auf verschiedene Weisen einbinden:

– Fonts via css/less
– css/less via: xml, require
– images via: css, template
– js via xml

Wie stets folgt nach derartigen Modifikationen: Cache löschen, um die jeweiligen Änderungen zu sehen.

Fazit: Magento 2 und Design Template als starke Werkzeuge

Ansprechende Themes in Magento 2 realisieren sich zügig und simpel per Design Template. So gestalten auch Einstiegsentwickler entsprechende Shopseiten effizient.

Empfehlen.

Über den Autor

Hinterlasse eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.