Hallo,
wie genau kann ich in SW6 denn ein eigenes Theme mit eigener Konfiguration erstellen, hochladen (welche Ordnerstruktur?) und installieren? Leider gibts dazu ja noch wenig Doku.
Du musst ein Plugin erstellen (https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-quick-start) und dort den Inhalt vom Ur-Theme reinschieben (/vendor/shopware/storefront/Resources/views)
Hallo @brettvormkopp,
ich muss also das komplette Theme erstmal kopieren und dann abändern? Geht das nicht mehr so wie bei SW5, dass man nur die benötigten Blöcke im eigenen Theme hat?
Was, wenn das Ur-Theme von Shopware ein Update bekommt? Das müsste ich ja dann Stück für Stück in meins kopieren …?
Du packst nicht den gesamten Inhalt in dein Plugin, sondern extendes die views ganz normal. Hast du dir hier die Doku schon angesehen?
Und wie man die views extended => https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to
Wie man die styles sauber extended frage ich mich allerdings immer noch. Aktuell sieht meine main.scss so aus, ob das richtig ist - Keine Ahung. Gibt dazu leider keine Doku.
meinplugin/src/Resources/storefront/style/base.scss
@import "./../../../../../../../platform/src/Storefront/Resources/src/style/variables";
@import 'skin/meintheme/abstract/variables';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/vendor/bootstrap';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/base';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/reboot';
@import './../../../../../../../platform/src/Storefront/Resources/src/style/base/ie11-fixes';
/*
* Skins
* ---------- */
//@import './../../../../../../../platform/src/Storefront/Resources/src/style/skin/shopware/base';
@import "skin/meintheme/page/home"; // mein skin usw.
.....
Moin! Du musst nur die Sachen mit reinnehmen, die du auch wirklich geändert hast. Das Plugin kannst du mit bin/console theme:create erstellen. Dokumentation dazu findest du hier: https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins
Dankte euch! Die Doku hatte ich ehrlich gesagt durchsucht aber nichts zu Themes gefunden… 
Moin! Du musst nur die Sachen mit reinnehmen, die du auch wirklich geändert hast. Das Plugin kannst du mit bin/console theme:create erstellen. Dokumentation dazu findest du hier: https://docs.shopware.com/en/shopware-platform-dev-en/internals/plugins/plugin-themes?category=shopware-platform-dev-en/internals/plugins
Wie sieht das allerdings mit den styles aus? Siehe meinen Beitrag. Machen wir das falsch? Ohne den Import der core Dateien fehlen die ganzen mixins, core variablen usw.
Ich würde den kompletten Inhalt reinnehmen gerade weil man dan komplett unabhängig ist vom Ur-Theme. Wenn du allerdings nur eine handvoll Dateien extenden willst, dann macht der komplette Klon kein Sinn.
@Shopwareianer reicht es nicht nur den Hauptpfad einmal zu nehmen. Irgendwo hab ich gelesen dass er von allein die css Dateien aufgabelt und rendert. Aber darauf will ich keine Garantie geben.
@brettvormkopp wenn ich das komplette Theme dupliziere, was mach ich dann, wenn im Ur-Theme ein Update passiert? Das bekomm ich ja nicht mit. Und selbst wenn, dann müsste ich Datei für Datei prüfen und die entsprechenden Blöcke rüberkopieren, was dann u. U. wieder nicht mit meinen Änderungen zusammenpasst. Updatesicher ist anders. Besonders wenn man mehr als einen Shop betreut…
Die Frage bei Themes ist ja: Brauchst du immer zeitnah ein Update aus dem Ur-Theme? Ich habe beispielweise ein unabhängiges SW5 Theme. Es gab einmal Updates wo etwas weggenommen/hinzugefügt wurde. Durch die Unabhängigkeit blieb bei mir alles wie vorher. Das wird erst dann zu einem Problem wenn ein Controller wegfällt.
Ob die Dateien sich verändert haben kannst du überprüfen indem du da Theme hash-st oder es gibt ja auch genügend Tools womit man Versionen vergleichen kann.
@brettvormkopp ich will aber nicht bei jedem Update 10 oder mehr Shops auf Unterschiede beim Update vergleichen. Noch dazu Shops die ggf. auf unterschiedlichen Versionen laufen aber mit einem ähnlichen/selben Theme. Das ist nicht praktikabel und so sollten automatische Updates nicht sein. Wenn Shopware irgendwo einen neuen Button, neues Feld, neuen Link oder anderes Feature im Theme integriert dann will ich das auch direkt haben.
Bestes Beispiel ist das aktuelle Problem mit Cookie-Banner vs. Cookie-Consent Formular im Banner. Wenn Shopware das einbaut, dann will ich das auch instant imit dem Update in jedem Shop haben und nicht erst wer-weiß-wie-viele Dateien vergleichen und händisch in mein Theme “updaten”.
was @Shopwareianer da erwähnt, interessiert mich aber auch. Doku gibts ja keine
@Shopwareianer reicht es nicht nur den Hauptpfad einmal zu nehmen. Irgendwo hab ich gelesen dass er von allein die css Dateien aufgabelt und rendert. Aber darauf will ich keine Garantie geben.
Wenn du nur die main.scss importierst, funzt es auch nicht. Ich muss meinen Beitrag berichtigen, hatte mein git Repo nicht geupdatet.
Sowie ich es aktuell habe - Ich habe mir den vendor Ordner in mein Theme kopiert für die core bootstrap und tiny slider Dateien.
@import 'skin/meintheme/abstract/variables'; // variablen anpassungen
/*
* Vendors
* ------- */
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';
// meine skin dateien
@import "skin/meintheme/page/product-detail/product-detail";
Ob das so richtig ist, weiß ich allerdings immer noch nicht. Aber zumindest importiere ich mir so keine dutzenden Dateien.
In meiner theme.json
"style": [
"@Storefront",
"Resources/storefront/style/base.scss"
],
Die core .twig Datein kopierst du dir nicht - Die extendest du nur. Ganz normal wie bei Shopware 5. Sowie hier beschrieben => https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block?category=shopware-platform-dev-en/how-to&\_ga=2.33974505.93462419.1570343136-1142481706.1567356213
ich versuche gerade eine SASS-Variable aus dem Core zu überschreiben
$border-radius: 3px;
habe die selbe Variable in meiner eigenen SCSS-Datei überschrieben
$border-radius: 0px;
aber es ändert sich nichts… auch nicht mit !important (andere Änderungen mit direkten CSS-Selektoren greifen)
wie mach ich das korrekt?
Wie sieht denn deine base.scss aus?
@Shopwareianer
ich hab nur testweise was ausprobiert und includiere deshalb in der base.scss zwei Dateien
@import "variables/general";
@import "modules/navigation";
in der modules/navigation.scss hab ich einfach mal testweise das versucht
.nav-main {
background: red;
}
–> klappt
in der variables/general.scss steht nur das
$border-radius: 0px!important;
$border-radius-lg: $border-radius!important;
$border-radius-sm: $border-radius!important;
–> klappt nicht, es bleiben trotzdem 3px wie im original Theme
In SW5 mit LESS konnte man Variablen an jeder Stelle im eigenen Theme einfach überschreiben…
ich würd das Setting für Border-Radius auch gern in die Theme-Config packen, aber leider gibt es dort nur die Feldtypen color, media und fontFamily …
Ja das ist das Problem - Weil die core Dateien nicht importiert sind und er daher die Variablen gar nicht kennt.
Daher wie ich oben geschrieben hatte:
@import 'skin/meintheme/abstract/variables'; // variablen anpassungen
/*
* Vendors
* ------- */
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';
....
So funktioniert es zumindest, ob es richtig ist - Kein Ahnung. Da gibts keine Docs zu und auch irgendwie kein Infos von Shopware.
Wenn du jetzt in deine navigation.less die $border-radius Var verwendest, wirst vermutlich einen Fehler bekommen - Da er eben die core variablen gar nicht drin hat.
@Shopwareianer leider weiß ich nicht, wie ich deinen Kommentar mit dem Code interpretieren soll… ist das der Inhalt deiner base.scss?
@import 'vendor/bootstrap';
@import 'vendor/tiny-slider';
$border-radius: 0px;
$border-radius-lg: $border-radius;
$border-radius-sm: $border-radius;
–> wenn ich das in meine base.scss übernehme funktioniert das mit dem Radius trotzdem nicht.
ich hab auch das in der JSON
"style": [
"@Storefront",
"Resources/storefront/style/base.scss"
],
ps: wenn ich die Definition der Variable $border-radius und die Includes weglasse und $border-radius einfach verwendet, bekomme ich keinen Compilerfehler. Es funktioniert aber halt auch nicht.
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”) weißt du zum Thema der Variablen etwas? Wie kann man die im eigenen Theme überschreiben?
Hast du denn die beiden Dateien aus dem Vendor Ordner vom original Theme in deins kopiert? => https://github.com/shopware/platform/tree/master/src/Storefront/Resources/src/style/vendor
Und deine Variablen kommen dann über die importieren Vendor Files. So habe ich s zumindest.
achso… ich muss also doch wieder Daten aus dem original Theme kopieren… das ist das was du oben meintest…
[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski “Moritz Naczenski”) eine Äußerung von Shopware wäre cool… muss man das wirklich so machen?