Shopware 6 Template Override
In diesem Beitrag beschreibe ich kurz die Möglichkeit der Designanpassung von Shopware 6.
Schritt 1: Neues Theme Installieren
Als Erstes ein neues Theme Installieren, am besten das FlatResponsiveTheme.
https://store.shopware.com/emz7011603224493f/flat-responsive-theme.html?number=Emz7011603224493f
Schritt 2: Shopware Basis Template
Benötigte Dateien aus dem Basistemplate kopieren und unter Beibehaltung des Pfades ab View
Das Basistemplate liegt in:
vendor/shopware/storefront/Resources/views/storefront
Schritt 3 Dateien Anpassen
Schritt 4 Dateien Hochladen
custom/plugins/EmzPlatformFlatResponsiveTheme/src/Resources <- bis hier ist der Pfad vorhanden
views/storefront muss neu erstellt werden.
Icons
Übersicht aller Icons: https://www.8mylez.com/shopware-6-iconset/
Einbinden: {% sw_icon 'search' style { 'size': 'xs', 'pack': 'solid', 'color': 'light'} %}
Beispiele
/vendor/shopware/storefront/Resources/views/storefront/page/product-detail
Ausgabe
Textfelder
{{ page.product.translated.customFields.download_1 }} <- download_1 = Systemname des Feldes
Bespiele
If / else
Beispiel mit If Else Abfrage
{% set byurl = page.product.translated.customFields.custom__ %}
Eigene JS Datein einbinden
Die JS Datei muss unter /custom/plugins/dein_Plugin/src/Resources/app/storefront/dist/storefront/js/ abgelegt werden
und unter /custom/plugins/dein_Plugin/src/Resources/theme.json -->
"style": [
"@Storefront",
"app/storefront/src/scss/base.scss",
"app/storefront/src/scss/custom.scss",
"app/storefront/src/scss/component/_cms-block.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/custom.js"
],
in der base.html.twig muss einml die Zeile
{% set isHMRMode = app.request.headers.get('hot-reload-mode') %}
zu
{% set isHMRMode = true %}
geändert werden, danach über die Administration den Cache löschen und das Frontend aufrufen.
Jetzt muss die Änderung in der Datei base.html.twig wieder rückgängig gemacht werden.
Eigene Formulare
Copy file platform/src/Storefront/Resources/views/storefront/element/cms-element-form/form-types/contact-form.html.twig to your plugin, then override it or replace with your code.
Eigene Schriftarten (Fonts) in Shopware 6
Eine kleine Anleitung eigene Schriften/Fonts in Shopware 6 einzubinden und zu nutzen, und zwar ohne die Nutzung eines zusätzlichen Plugins.
Einbinden von Google Fonts und anderen Externen Schriftquellen
Zum Einbinden der entsprechenden Schriften muss „nur“ die Base.scss des eigenen Themes bearbeitet werden.
Einbinden der Fonts Lokal
Zum Einbinden der Fonts Lokal ist etwas mehr Arbeit notwendig.
Zuerst müssen die Fonts woff + woff2 in das eigene Theme custom/plugins/[EigenesTheme]/src/Resources/app/storefront/src/assets/fonts hochgeladen werden.
Im Schritt zwei muss dann noch die base.scss ergänzt werden.
@font-face{font-family:'Raleway';font-style:italic;font-weight:300;src:url(../assets/fonts/raleway/font-a6c1c4ca.woff2) format('woff2') , url(../assets/fonts/raleway/font-a4a03eac.woff) format('woff')}
Einbinden von Frontendplugins
Wenn man bei der Erstellung des eigenen Templateoverrides z.B. auch die Datei base.html.twig überschreibt werden mitunter die gekauften Zusatzplugins nicht mehr angezeigt. Um dieses Problem zu lösen muss man das Plugin untersuchen welches nicht angezeigt wird und im Verzeichnis /plugins/[Pluginname]/src/Resources/views/storefront nach der Datei base.html.twig suchen. In dieser Datei ist der Quelltext enthalten welcher dann in das eigene Override übernommen werden muss.
Comments
No Comments