override Einkaufswelt Spalten anpassen für masonry in emotion.less

Shopware 5 Themes & Design
1

Hallo liebe Bastlergemeinde,

ich würde gerne in den Spaltenanzahl der Einkaufswelten anpassen für den Masonry-Effekt.

In der emotion.less gibt es gleich ganz oben die Festlegung wie viele Spalten beim Masonry-Effekt auf welchem Gerät generiert werden. Ich kann auch in der orginal Datei die Spaltenanzahl verändern und es funktioniert dann auch wie gewünscht. 

Wenn ich aber in meinem eigenen Template in meiner emotion.less den entsprechenden Teil kopiere und anpasse gibt es einen Fehler, sodass das Theme nicht kompiliert wird.

Hat jemand eine Ahnung wie ich das hinbekomme oder wo das Problem liegt, dass ich keinen Override dafür erstellen kann ?! 

Ansonsten wäre das die perfekte Lösung um mit dem Masonry-Effekt auf allen Devices die Ausgabe nach meinem Wunsch zu steuern. 

Tausend Dank im Voraus

 

.createColumnSizes(@n, @i: 1) when (@i =< @n) {

    &.emotion--mode-resize {
        &.emotion--column-@{n} .column--@{i} {
            width: (100% / @n * @i);
        }
    }

    &.emotion--mode-masonry {
        &.emotion--column-@{n} .column--@{i} {
            width: 100%;
        }
    }

    @media screen and(min-width: @phoneLandscapeViewportWidth) {
        @columns: 2;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @tabletViewportWidth) {
        @columns: 3;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @tabletLandscapeViewportWidth) {
        @columns: 3;
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} when (@i <= @columns) {
                width: (100% / @columns * @i);
            }
        }
    }

    @media screen and(min-width: @desktopViewportWidth) {
        &.emotion--mode-masonry {
            &.emotion--column-@{n} .column--@{i} {
                width: (100% / @n * @i);
            }
        }
    }

    .createColumnSizes(@n, (@i + 1));
}

 

2

Hallo, ich beschäftige mich auch gerade mit den Spalten. Reicht es nicht wenn man die Spalten in den Experteneinstellungen angibt?

LG
Tanjinsan

3

Ich weiß nicht, ob ich zu blöd bin - aber beim Masonry-Effekt hat die Einstellung für einen bestimmten Viewport und die eingestellten Spalten keine Auswirkung. 

Desktop sind 4 Spalten, Tablet 3, Handy = 1-2. Die BackendEinstellung greifen hier nicht oder sehe ich da was falsch ?

4

Ich habe dafür noch die emotion.less angepasst. Z. B. 
@media screen and(min-width: @tabletLandscapeViewportWidth) {
        @columns: 6;

statt

@media screen and(min-width: @tabletLandscapeViewportWidth) {
        @columns: 3;

5

@blockdesigner: Klappt das Kompilieren bei dir jetzt? Bei mir geht es immer noch nicht. Ich kann die emotions.less nur im Responsive Theme anpassen! Der Hoster hat den Server komplett durchgecheckt, daran kann es nicht liegen.

6

Hallo Tanji,

habe gerade noch mal getestet. Bei mir klappt das kompilieren auch nicht, sobald ich aus dem Teil Änderungen in meine emotion setze. Liegt das an den Variablen vielleicht ?!

7

@blockdesigner: Ich habe leider immer noch keine Lösung gefunden :frowning:

8

Die Funktion

.createColumnSizes(@n, @i: 1) when (@i =< @n) {

   ...
 
}

sollte umbenannt werden, da es sonst zu einer Endlosschleife kommt. Beispiel:

​

.createCustomColumnSizes(@n, @i: 1) when (@i =< @n) {

   ...
 
}

​folglich müssen auch die Aufrufe weiter unten im Code auf den neuen Namen umgeschriebenw erden. 

 

3 „Gefällt mir“