Wie Abstände von Titel und Preis in der Artikelübersicht verringern?

Liebe Community,

ich verzweifel hier gerade an einer eigentlch einfachen Aufgabe.

Und zwar möchte ich in der Artikelübersicht den Titel & Preis zentrieren. Anschließend die Abstände dazwischen verringern und die Rating Stars entfernen.

Ich habe dazu in meinem Template die Datei product-box.less angelegt und geändert.

Das zentrieren des Titels funktioniert problemlos. Die Schriftgrößes des Titels, des Preises sowie die Randstärke der Box konnte ich erfolgreich ändern.

Was ich aber auch versuche der Preis wird nicht zentriert. Ich nutze die Minimal Ansicht im Product Listing und habe dort folgendes eingefügt. 

.product–price-info { 

text-align: center;

}

Was ich auch mache er nimmt es nicht an. Nach dem komplilieren bleibt alles beim alten. 

Das gilt auch, wenn die Rating Stars einfach aus der product-box.less lösche.
Ich fürchte ich stehe hier gerade voll auf dem Schlauch und hoffe, dass mir jemand helfen kann.

 

Ausblenden geht mit display:none; nicht mit dem Löschen aus der Datei. Wenn Du schon die Schriftgröße der Preises geändert hast, kannst Du es auch dort zentrieren.

Hallo NextMike,

super das klappt schon mal, vielen Dank :slight_smile:

Ein Problem weniger.

Jetzt würde ich gerne noch den Preis zentrieren und den Abstand zwischen Titel und Preis verringern.

In diesem Block

.price–default {
            .unitize(font-size, 14);
            .unitize(line-height, 20);
            .unitize-margin(0, 5, 0, 0);
            vertical-align: bottom;
            float: center;

kann ich doch die Schriftgröße des Preises anpassen. Wenn ich dort ein „text-align: center;“ einsetze, zentriert er diesen einfach nicht.

Ist das die falsche Stelle?

Zentriere .product–box .product–price dann geht es.

das habe ich schon versucht. Ich habe im Forum auch schon eine ähnliche Hilfestellung gefunden.

ich habe zum Test jede .product–box { und .product–price-info { um ein text-align: center; ergänzt.

Leider bleibt der Preis immer linksbündig. Irgendwas mache ich offenbar falsch.

ich dachte, dass die less Datei wie folgt geändert werden müssten:

    .product–price-info {
     text-align: center;
 

.product–box {
     text-align: center;
    .clearfix();
    display: block;
    width: 100%;
    padding: 2% 0 0 2%;
    float: left;
 

Ich hatte .product–box .product–price geschrieben.

entschuldige, das hatte ich aber schon versucht.

Ich hatte die Zeile wie folgt geändert:

.product–price {
        text-align: center;
        .unitize-height(20);

 

Ergebnis ist das selber. Der Preis bleibt links.

Habe ich das eventuell falsch platziert?
 

Das passt so. Man müsste sich mal das Ganze anschauen.

komisch, dass die Änderungen bei der Schriftgröße sowie der Ausblendung der Rating Stars funktionieren…

Spielt es eine Rolle, welche Listing Ansicht man im Backend eingestellt hat (bei mir Minimal) ?

Hilft es den Inhalt der less Datei mal zu posten?

Haben Sie eine Idee, wie sich die Abstände zwischen dem Titel und den Preis veringern lassen?

Du musst die Änderung dann auch unter Box minimal machen.

Hi

daran hatte ich auch gedacht aber das hilft auch nichts.

Hier mal der Ausschnitt aus der .box–minimal

.box–minimal {
    width: 50%;

    .product–image {
        .unitize-height(120);
    }

    .product–price-info {
        .unitize-height(70);

        .price–unit {
            .unitize-height(30);
            .unitize(font-size, 10);
            .unitize(line-height, 14);
            display: block;
        }
    }

    .product–price-outer {
        .unitize-height(40);
        position: relative;
    }

    .product–price {
         text-align: center;
        .unitize(line-height, 20);
        position: absolute;
        bottom: 0; left: 0;
        height: auto;

 

USW.

wenn ich das Product Layout von „Nur wichtige Informationen“ auf „Großes Bild“ ändere, dann läuft es und der Preis wird zentriert dargestellt.

Wenn ich das wieder zurück auf „Nur wichtige Informationen“ stelle und den Cache leere, dann erscheint der Preis in der Darstellung wieder linksbündig.

 

Ist für dieses Produktlayout eventuell eine ganz andere Datei zuständig als die product-box.less?

Ich habe das nun anders gelöst.

in der Layoutansicht “Großes Bild” gewählt (hier funktioniert es ja) und anschließend in der less Datei die Spalten von 33,3% auf 20% reduziert.

So wird es in der Desktop Ansicht auch fünf spaltig und alles zentriert. Noch den “Vergleich” im Backend deaktiviert und ich erhalte fast mein Wunschergebnis.

Einzig ein großer Abstand von ca. 2 Zeilen habe ich jetzt zwischen dem Produktbild und dem Titel.

Da wäre ich für einen Tipp dankbar, wie sich dieser verringern läßt?

Ich glaube das mit den produktboxen ist auch zusätzlich von den bildschirmbreiten abhängig. Manche Änderungen greifen da in die andere breite mit über so dass man die Änderungen dort zusätzlich noch machen muss. Aber wo und wie ist natürlich ne Sucherei. Responsive 

stehe gerade vor dem selben Problem…

im Produkt Layout “Nur wichtige Informationen” kriege ich es einfach nicht hin den Preis mittig zu setzen, bei den anderen Layouts lässt es sich problemlos anpassen…

@spolerane‍ hast du es inzwischen hinbekommen?

oder jemand noch ne Idee was man ändern könnte?

Hat das Abstandproblem im Listing denn schon jemand lösen können? Mir ist der Platz zwischen Artikelname und Preis einfach zu groß.

Wird ja wohl lösbar sein. Wenn Du es machen möchtest, arbeite Dich mal ein:

https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/aenderungen-am-template-vornehmen

https://wiki.selfhtml.org/wiki/CSS