gelöst Preis unter dem Artikelbild anzeigen

Thema wurde von Anonymous, 21. November 2021 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    #1 Anonymous, 21. November 2021
    Zuletzt bearbeitet: 21. November 2021
    Hallo liebe Gambianer,

    da ich seit 2 Tagen mit CSS arbeite, benötige ich Hilfe bei der allg. Darstellung der Produkte z.B. auf der Startseite in der "Empfohlen" Box.

    Kann mir ein Profi sagen, ob und wie ich die Anzeige der Preise wie auf dem Screenshot darstellen lassen kann?

    1. Der Preis und der alte Preis sollten ruhig etwas in das Produktbild ragen.
    2. Die Nachkommastellen sollten kleiner sein.
    3. Unter dem Preis sollte der Produktname stehen.
    4. Unter dem Produktnamen sollten die Sterne zu sehen sein.
    5. Zum Schluss sollte das Rahmen wie auf dem Screenshot unten aussehen..
    Sind die Punkte in etwa umsetzbar oder wg. dem Could Shop eher nicht?

    Info: Ich habe einen Gambio Cloud Shop.
    [​IMG]

    Ich denke, dass es wenn überhaupt mit CSS funktioniert.
    Ich habe bereits ein wenig mit CSS experimentiert und habe das Aussehen etwas geändert.
    So sieht die Preisanzeige aktuell bei mir aus:
    [​IMG]

    Für hilfreiche Tipps und Infos danke ich im Voraus!

    Freundliche Grüße
    O.C.
     
  2. Wilken (Gambio)

    Wilken (Gambio) Administrator
    Mitarbeiter

    Registriert seit:
    7. November 2012
    Beiträge:
    17.856
    Danke erhalten:
    6.801
    Danke vergeben:
    2.060
    Mit einen negativem oberen Abstand wandert der Preis hoch... Ganz grob so...

    Code:
    .price-tax {
      margin-top: -150px;
    }
    
    Das wird so unspezifisch aber wahrscheinlich noch 1-2x an dann unerwünschten Stellen zuschlagen. Müsste man sich genauer reinfummeln.
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    Top vielen Dank! Hat genau so funktioniert wie ich es wollte.
    Das einzige Problem ist, dass der Preis beim Hovern an die ursprüngliche Stelle rutscht.
    Ich habe jetzt versucht den Code etwas umzubauen, aber komme nicht dahinter.

    Wenn ich mir den Seitenquelltext anschaue, sehe ich, dass 20x "price-tax" vorkommt, obwohl nur 10 Produkt auf der Seite angezeigt werden und denke, dass 10x price-tax für den Preis im "Hover-Modus" steht aber warum greift der Code nicht automatisch für alle price-tax Klassen?
     
  4. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.755
    Danke erhalten:
    10.505
    Danke vergeben:
    1.503
    Das ist "flyover"
    versuche es mal mit
    Code:
    .product-container.flyover .price-tax {
    Dein Code
    }
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    Danke, aber funktioniert leider nicht.
     
  6. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.061
    Danke erhalten:
    817
    Danke vergeben:
    211
    @O.C. Versuche es mal bitte mit folgendem CSS, dazu musst du die CSS von Wilken und Babara wieder entfernen:

    Code:
    .price {
        position: absolute;
        top: 120px;
        right: 10px;
        left: 0px;
    }
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    #7 Anonymous, 21. November 2021
    Zuletzt bearbeitet: 26. November 2021
    @Till (Gambio) , besten Dank!

    Der Code ist fast perfekt, der Preis ist unter dem Produkt und bleibt beim Flyover auch dort, bringt aber doch zwei Nebenwirkungen mit sich.
    Nämlich wird der kleine Warenwert im Warenkorb-Flyover nach unten verschoben und der Artikelpreis in der "Bestseller-Box" genau so.
     
  8. Anonymous

    Anonymous Administrator
    Mitarbeiter

    Registriert seit:
    26. April 2011
    Beiträge:
    1.061
    Danke erhalten:
    817
    Danke vergeben:
    211
    @O.C. Ändere das CSS bitte wie folgt ab:

    Code:
    .product-tile .price {
        position: absolute;
        top: 120px;
        right: 10px;
        left: 0px;
    }
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    #9 Anonymous, 21. November 2021
    Zuletzt bearbeitet: 21. November 2021
    @Till (Gambio)

    Leider einen Fehler gefunden, auf Mobilgeräten liegt der Preis genau auf dem Artikeltitel.
    Hab jetzt einiges probiert.. es will einfach nicht. Alles außer ".price-tax" in Verbindung mit "margin-top" macht Probleme. Ich glaube der Code von Wilken ist super, muss nur erweitert werden, dass auch beim Flyover der Preis dann oben bleibt. Ich habs jedenfalls nicht hinbekommen.
    Bedanke mich für weitere Hilfe..
     
  10. Anonymous

    Anonymous Mitglied

    Registriert seit:
    3. Juli 2020
    Beiträge:
    10
    Danke erhalten:
    3
    Hallo O.C.

    man kann via CSS auch Anpassungen nur für bestimmte Bildschirmbreiten vornehmen.

    z. B. Mobil: @media (max-width: $screen-xs-max) {Code}

    Statt xs (Smartphone) gibt es noch sm (Tablet Porträt), md (Tablet Landscape) und lg (Deskop).

    Vielleicht hilft dir das weiter?
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    @Till (Gambio)
    Lösung gefunden.
    Ich habe jetzt den Code von Wilken und von dir kombiniert:

    .product-tile .price {
    margin-top: -155px;
    }

    Da aber bei dieser Variante im Flyover die Lieferzeit in den Artikeltitel verschoben wurde, habe ich den code wie folgt erweitert:

    .product-tile .price {
    margin-top: -155px;
    }
    .shipping-info-short {
    margin-top: 100px;
    }

    Jetzt passt alles. Auch auf mobil. Keine Nebenwirkungen.

    Vielen Dank an alle, die geholfen haben!!
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    20. Januar 2021
    Beiträge:
    208
    Danke erhalten:
    68
    Danke vergeben:
    32
    Sieht prima aus.

    Vielleicht nützlich:
    Ich will nicht mäkelig sein, aber bei allen Preisen, die nicht rabattiert sind rutscht der Preis etwas höher - das sieht man bei den Empfehlungen. D.h. die Preise sind nicht alle auf einer Linie. Bestimmt lässt sich dafür auch eine Lösung finden. Viel Erfolg. :)
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    11. Juli 2021
    Beiträge:
    56
    Danke erhalten:
    19
    Danke vergeben:
    18
    Dann gibts jetzt eben Rabatt auf alles! :D

    ..Ist mir auch schon aufgefallen, ich muss heute wohl noch ein wenig experimentieren :)