Hallo,
für einen Kunden erstellen wir gerade mehrere Einkaufswelten, wobei uns einige Probleme begegnet sind, die sich wie folgt eingrenzen ließen:
- Zum einen bräuchten wir Einstellungen pro Zeile, die bisher nicht möglich sind. Beispielsweise eine Hintergrundfarbe für die ganze Zeile lässt sich u.E. bisher nicht umsetzen.
- Desweiteren würden wir gerne Zellen in den Zeilen auf die gleiche Höhe bringen, um eine vertikale Zentrierung zu ermöglichen. Dies lässt sich aber mit dem von Ihnen verwendenten Float-Layout nicht umsetzen, ein Umstieg auf CSS-Flexbox dagegen würde dies ohne weiteres gewährleisten.
- Und letztlich wären CSS-Einstellungen pro Zelle sehr hilfreich, um beispielsweise je Zelle unterschiedliche Paddings zu vergeben.
Haben Sie eines oder mehrere dieser Features schon auf dem Schirm und eventuell sogar schon in einer Roadmap einsortiert? Eine Information dazu wäre für uns sehr hilfreich.
Vielen Dank und freundliche Grüße,
Christian Jung
Hallo,
direkt nativ gibt es keine Möglichkeit aktuell auf einen Flexbox Aufbau in den Einkaufselten zu setzen, jedenfalls nicht von offizieller Seite. Es gibt aber ein Bootstrap basierendes Theme für Shopware, siehe hier: https://de.shopware.com/news/shopware-bootstrap-theme-jetzt-open-source/
Man müsste eben mit Bootstrap arbeiten, aber damit müsste es gehen.
Außerdem kann man jedem Einkaufswelten-Element CSS Klassen geben. Damit sind auch unterschiedliche Abstände möglich.
Es gäbe prinzipiell noch die Möglichkeit bei den Einkaufswelten das Layout auf „Zeilen“ umzustellen. Dann ist jede Zeile so groß wie der Inhalt. Die inneren Elemente könnten dann Flexbox Elemente sein (durch die oben erwähnten Klassen).
MFG
derwunner
1 „Gefällt mir“
@derwunner schrieb:
direkt nativ gibt es keine Möglichkeit aktuell auf einen Flexbox Aufbau in den Einkaufselten zu setzen, jedenfalls nicht von offizieller Seite. Es gibt aber ein Bootstrap basierendes Theme für Shopware, siehe hier: https://de.shopware.com/news/shopware-bootstrap-theme-jetzt-open-source/
Schon mal vielen Dank für die rasche Reaktion. Ein anderes Theme ist leider zum jetzigen Projektzeitpunkt für uns nicht mehr drin, aber ich schaue es mir dennoch einmal an.
Außerdem kann man jedem Einkaufswelten-Element CSS Klassen geben. Damit sind auch unterschiedliche Abstände möglich.
Es gäbe prinzipiell noch die Möglichkeit bei den Einkaufswelten das Layout auf „Zeilen“ umzustellen. Dann ist jede Zeile so groß wie der Inhalt. Die inneren Elemente könnten dann Flexbox Elemente sein (durch die oben erwähnten Klassen).
Classes heißt halt immer, dass wir das vorbestimmen müssen und der Kunde nur aus einem festen Set an Classes auswählen kann. Einfacher wäre ein Freitextfeld für CSS, damit würden man einiges an Flexibilität gewinnen. Dazu gibt’s aber vermutlich dann keine Pläne, oder?
Classes heißt halt immer, dass wir das vorbestimmen müssen und der Kunde nur aus einem festen Set an Classes auswählen kann. Einfacher wäre ein Freitextfeld für CSS, damit würden man einiges an Flexibilität gewinnen. Dazu gibt’s aber vermutlich dann keine Pläne, oder?
Ich habe in meinen Agenturalltag noch keinen Kunden erlebt, der sein CSS selber pflegt. Viele schaffen es sogar nicht, in einer Word-ähnlichen Oberfläche Texte einzugeben… Wie auch immer, man hätte folgende Möglichkeiten das zu realisieren:
-
Freitextfelder für die Einkaufswelten definieren, damit der Kunde pro Einkaufswelt sein CSS reinkloppen kann. Das Freitextfeld kann man dann ja einfach im Smarty Template auf der emotion Seite mit ausgeben. Das sollte die deutlich einfachere Variante sein im Vergleich zu der 2. Methode:
-
Jedes Einkaufswelten Element erweitern und im jeden ein weiteres Textfeld für die CSS Eigenschaften einfügen. ist deutlich komplizierter und dürfte auch nur für die Standard-Widgets gehen. Widgets, die durch Plugins kommen sind davon ausgenommen.
1 „Gefällt mir“
@derwunner schrieb:
- Freitextfelder für die Einkaufswelten definieren, damit der Kunde pro Einkaufswelt sein CSS reinkloppen kann. Das Freitextfeld kann man dann ja einfach im Smarty Template auf der emotion Seite mit ausgeben. Das sollte die deutlich einfachere Variante sein im Vergleich zu der 2. Methode:
Variante 1 ist tatsächlich sehr elegant, das schaue ich mir mal an. Besten Dank für den Tipp!