Gibt es die Möglichkeit in den Einkaufswelten den Zeilenabstand variabel pro Breakpoint zu setzen?
Also das es am Handy z.B. nur 10 sind und am Desktop erst 30?
Im Screenshot sieht man nochmal welchen Abstand ich meine.
Per Einstellungen vielleicht nicht, aber über CSS sollt es ggf. gehen.
Leider nein. Habe ich vergessen dazu zu schreiben. Es wird inline gesetzt und kann ich daher nicht über eine Klasse etc. überschreiben.
Du hast es noch nicht versucht. Beispiel:
<style>
[data-controllerurl="/widgets/emotion/index/emotionId/1/secret//controllerName/index"] .row--1 {
padding-bottom: 50px;
}
... oder ...
[data-controllerurl="/widgets/emotion/index/emotionId/1/secret//controllerName/index"] .row--1 .emotion--element {
padding-bottom: 100px !important;
}
</style>Falls noch jemand danach sucht, mittlerweile habe ich eine „Lösung“ gefunden.
// 1. Zeile – 2 hoch
.start-row-xl-1 {
&.row-xl-2 {
height: calc(~"50vw - 15px") !important;
top: 0 !important;
}
}
// 1. Zeile – 1 hoch
.start-row-xl-1 {
&.row-xl-1 {
height: calc(~"25vw - 3.75px") !important;
top: 0 !important;
}
}
// 2. Zeile – 2 hoch
.start-row-xl-2 {
&.row-xl-2 {
height: calc(~"50vw - 15px") !important;
top: calc(~"0.5 * (50vw - 15px)") !important;
}
}
// 2. Zeile – 1 hoch
.start-row-xl-2 {
&.row-xl-1 {
height: calc(~"25vw - 3.75px") !important;
top: calc(~"0.5 * (50vw - 15px)") !important;
}
}
// 3. Zeile – 2 hoch
.start-row-xl-3 {
&.row-xl-2 {
height: calc(~"50vw - 15px") !important;
top: calc(~"1 * (50vw - 15px)") !important;
}
}
// 3. Zeile – 1 hoch
.start-row-xl-3 {
&.row-xl-1 {
height: calc(~"25vw - 3.75px") !important;
top: calc(~"1 * (50vw - 15px)") !important;
}
}
Man muss aber beachten: Das wird dann auf jede EK angewandt, daher braucht man also z.B. noch dieses Plugin Einkaufswelten Plus | Erlebniswelten | Erweiterungen | Shopware Store um der Einkaufswelt eine Klasse zu geben.
Mein Code bezieht sich nur auf Elemente die ein oder zwei „Blöcke“ (Reihen) hoch sind. Dementsprechend muss man alles für mögliche Größen die man so hat weiter berechnen und natürlich nicht ab Zeile 2 aufhören sondern es so lange weiter führen wie man vermutlich Zeilen hat.
Außerdem ist der Ausschnitt nur für Desktop.
Für die anderen Viewports muss man dann noch extra die anderen Klasse ansprechen.
Also:
- Mobile: .start-row-xs-1
- Mobile Landscape: .start-row-s-1
- Tablet: .start-row-m-1
- Tablet Landscape: .start-row-l-1
- Desktop: .start-row-xl-1
Damit die Einkaufswelt aber nicht länger ist als die tatsächlichen rows die man hat kann man dies dann auch noch mit jQuery beheben:
// Einkaufswelten Höhe anhand von rows berechnen
$(document).ready(function() {
// Mobile
emotion__sizer_xs__size = $('.emotion--sizer-xs').data('rows');
$('.emotion--sizer-xs').css({height: 'calc(' + emotion__sizer_xs__size + ' * (50vw - 3.75px) )'});
// Mobile landscape
emotion__sizer_s__size = $('.emotion--sizer-s').data('rows');
$('.emotion--sizer-s').css({height: 'calc(' + emotion__sizer_s__size + ' * (50vw - 3.75px) )'});
// Tablet
emotion__sizer_m__size = $('.emotion--sizer-m').data('rows');
$('.emotion--sizer-m').css({height: 'calc(' + emotion__sizer_m__size + ' * (50vw - 7.5px) )'});
// Tablet Landscape
emotion__sizer_l__size = $('.emotion--sizer-l').data('rows');
$('.emotion--sizer-l').css({height: 'calc(' + emotion__sizer_l__size + ' * (25vw - 1.875px) )'});
// Desktop
emotion__sizer_xl__size = $('.emotion--sizer-xl').data('rows');
$('.emotion--sizer-xl').css({height: 'calc(' + emotion__sizer_xl__size + ' * (25vw - 1.875px) )'});
});
Das Javascript muss aber leider innerhalb der Einkaufswelt geladen werden, da diese per Ajax geladen wird. Also entweder ein extra Codeblock mit dem Script oder es irgendwie schaffen es erst ausführen zu lassen wenn die Einkaufswelt fertig geladen ist. Dazu habe ich leider noch keine Lösung. Falls da jemand etwas weiß gerne bescheid geben.
Sicherlich nicht die beste Lösung, falls jemand Optimierungsvorschläge hat sehr gerne.
Ich poste es nur hier nur als kleine Hilfe zum herum probieren mit der Einkaufswelt.