Werbung / Banner buchen
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Responsive Template für Modified

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #585 am: 10. Juli 2021, 12:31:06
    Hi Timm,

    danke für den Hinweis. Das "warum" ist mir klar.
    Das hier ist der Knackpunkt ...
    Code: CSS  [Auswählen]
    #cboxTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    Ich habe da eine Lösung die besser und auch schicker wäre ... da muss ich aber mal mit Torsten sprechen. :-)

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #586 am: 11. Juli 2021, 02:51:33
    Vielleicht sollte man das gesamte Styling der Colorbox mal ändern/modernisieren.
    Diese künstlich erscheinenden paddings im Fußbereich bei den iframe-Popups, um dort alles mögliche unterzubekommen, sind doch ohnehin nicht das Gelbe vom Ei.
    Ich hatte dazu in Antwort #519 mal einen Vorschlag gemacht.

    Gruß,
    noRiddle

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #587 am: 28. Juli 2021, 17:19:09
    In der reviews.php laufen lange Reviews-Texte in die border des Containers .reviewsbox, was ein wenig unschön ausieht.
    Ich weiß, daß es nicht ohne irgendwelche Hacks möglich ist den ge-float-eten Container, welcher den Text enthält, in der Höhe so zu begrenzen, daß das nicht passiert (wenn überhaupt möglich).
    Mittels Smarty-Modifier |truncate kommt man wegen der Responsiveness auch nicht wirklich weiter.

    Vielleicht übersehe ich eine einfachere Möglichkeit, jedenfalls habe ich es als Test-Idee mal so gelöst:
    Code: CSS  [Auswählen]
    .reviewsbox {
      position:relative; /*added for positioning pseudo element absolute, noRiddle*/
      background:#fff;
      border:solid #ddd 1px;
      width:100%;
      height:auto;
      overflow:hidden;
      margin: 0 0 20px 0;
    }
    .reviewsbox:after {
      content:'';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      background: linear-gradient(to top, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%);
    } /*new code, noRiddle*/

    What ya think ?

    Gruß,
    noRiddle

    Hetfield

    • modified Team
    • Beiträge: 937
    Re: Responsive Template für Modified
    Antwort #588 am: 28. Juli 2021, 18:46:25
    Ich finde es eleganter, wenn das Element mit dem Bewertungsinhalt per CSS auf die Anzahl Zeilen beschränkt wird.
    Code: CSS  [Auswählen]
    .rb_rezension p {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;}

    Vorteil: Es wird kein Text abgeschnitten und Tante Google kann alles lesen.

    Zu sehen z.B. hier: https://www.geeichte-waagen.de/shop/reviews.php

    Aber deine Lösung ist auch chic und bietet den gleichen Vorteil.   :thumbs:

    Vielleicht mag Markus was dazu sagen?

    MfG Hetfield  8-)

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #589 am: 28. Juli 2021, 19:22:31
    Jau, gefällt mir sogar besser als meine Lösung.
    Wenn der ver.... IE nicht wäre, den gibt's ja immer noch....

    Könnte man allerdings mit einer html-Element-Klasse abfangen, was jedoch ohne Core-File-Anpassung nicht möglich ist:
    Code: XML  [Auswählen]
    <!DOCTYPE html>
    <!--[if IE 9]> <html class="ie9 isie" dir="ltr" lang="de"> <![endif]-->
    <!--[if IE 10]> <html class="ie10 isie" dir="ltr" lang="de"> <![endif]-->
    <!--[if IE 11]> <html class="ie11 isie" dir="ltr" lang="de"> <![endif]-->
    <!--[if (gt IE 11)|!(IE)]><!--> <html class="noie" dir="ltr" lang="de"> <!--<![endif]-->

    um dann im CSS deine Variante, Hetfield, zu benutzen und meine lediglich für IEs.

    Code: CSS  [Auswählen]
    .noie .rb_rezension p {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;}

    Code: CSS  [Auswählen]
    .isie .reviewsbox:after {
      content:'';
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      background: linear-gradient(to top, rgba(255,255,255,1) 30%, rgba(255,255,255,.3) 100%);
    }

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #590 am: 28. Juli 2021, 19:34:01
    Hi noRiddle

    ich bin hier auch für line-clamp.
    Ich habe damit bisher sehr gute Erfahrungen gemacht.
    Auch die "Krücke" mit dem IE 11 würde ich hier in Kauf nehmen und auf einen Hack verzichten.
    Ich wüsste jetzt nicht wer ein responsive Template für den IE11 benötigt.
    Wir haben meine ich nur 2 Hacks (die ich auch gerne rauswerfen würde) und ich würde wegen dem Reviews-Text da jetzt nicht mit anfangen. :-)

    Die Änderungen sind in r13643 ins SVN übernommen worden.

    Markus

    P.S. @noRiddle ... Colorbox ist nicht vergessen ... die kommt auch noch. :-)

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #591 am: 28. Juli 2021, 20:10:48
    [...]
    Ich wüsste jetzt nicht wer ein responsive Template für den IE11 benötigt.
    [...]

    Die Aussage verstehe ich nicht.
    Es ist ja nicht so, daß jemand "ein responsive Template für den IE11 benötigt" sondern, daß es noch zig User gibt die mit dem IE arbeiten oder im I-Net surfen.
    Ich bin immer wieder erschrocken, oder sollte ich der Fairness halber sagen erstaunt, wie oft ich Shop-User am Telefon habe die mit dem IE arbeiten. Um wieviel mehr dann End-User, also Shop-Kunden, die in der Regel noch weniger Wissen über Techniken des I-Nets haben.

    Ich finde, daß es zumindest eine einfache Möglichkeit den IE direkt anzusprechen geben sollte und dafür wäre die Klasse im html-Element sehr nützlich.
    Die Klasse könnte man allerdings auch mittels Javascript hinzufügen.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #592 am: 29. Juli 2021, 07:41:22
    Hi noRiddle,

    ich habe jetzt der neuen Klasse

    Code: CSS  [Auswählen]
    .rb_rezension p {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;  
      overflow: hidden;
      max-height:63px;
    }

    einfach noch eine max-height mitgegeben.
    Ein overflow:hidden hat das ganze ja schon ... von daher packt das jetzt auch der IE. :-)

    Markus

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #593 am: 29. Juli 2021, 10:24:35
    Hallo,

    das Design der colorbox wurde überarbeitet.  :-)
    Es sollte jetzt keine Probleme mehr mit langen Artikelnamen geben.

    Die Änderungen sind in r13648 ins SVN übernommen worden.

    Markus

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #594 am: 29. Juli 2021, 11:16:23
    Moin Markus

    Du hast Font boosting deaktiviert laut Bugtracker. Dadurch werden in pagespeed insights die Font Awesome Icons nicht mehr bemängelt unter Cumulative Layout Shift. Ist das auch für die Font Awesome Icons, weil ich dachte das wäre nur für Schrift, oder ist das nur Zufall? Oft zeigt er ja was anderes bei jedem neuen Suchlauf unter CLS an.

    Falls es auch dafür ist, könntest du die Lösung hier posten?

    Was aber bei mir und auch in den Demoshops mit die höchste CLS verursacht, ist die

    Code: CSS  [Auswählen]
    <div class="homesite cf">

    Und bei mir noch

    Code: CSS  [Auswählen]
    <div id="layout_content" class="cf">

    Kann man da noch was machen?

    Gruss Timm

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #595 am: 29. Juli 2021, 12:17:02
    Hi Tim,

    das deaktiveren von Font-Boosting hat meines Wissens nach nichts mit Font-Awesome zu tun. Wenn es da aber auch eine positive Wirkung zeigt nehme ich das gerne mit. :-)

    Das ganze zielt eigentlich eher auf Android Geräte da hier zum Teil "willkürlich" die Schriften vergrößert werden.
    Wenn du noch ein 2.0.5.1 Template nutzt kannst du das am besten auf der newsletter.php sehen.
    Schau dir mal die Schriftgrößen an bei "anmelden", "abmelden" und dem "Datenschutz-Satz."
    Die Schritgröße wird hier aus der Seitenhöhe und dem Textblock berechnet. Irgendwie nicht wirklich nachvollziehbar.
    Daher wurde dem ganzen ein Riegel vorgeschoben.

    Was die Layout Shifts auf der Startseite angeht ist uns das bewusst.
    Das kommt vom Banner bzw. Slider. Den gleichen Effekt hast du auch wenn du ein großes Kategoriebild benutzt.
    Das Problem ist hier, dass wir nicht wissen welche Größen die Banner haben.
    Möglichkeiten das ganze zu lösen gibts verschiedene ... nur eben keine welche für die Allgemeinheit "zündet".

    Möglichkeit 1:
    Ein Container mit einem festen Seitenverhältnis in welchen dann das Bild mit "position:abslute" reingeladen wird.
    Hier kann es aber bei einem falschen Seitenverhältnis zu Verzerrungen kommen.
    Möglichkeit 2:
    Ebenfalls über einen Container mit einem festen Seitenverhältnis und das Bild mit "object-fit:cover" positionieren.
    Hier gibts zwar keine Verzerrungen aber der IE11 kommt damit nicht klar. :-)

    Dann muss man beachten, dass unter Umständen der mobile Banner ein anderes Seitenverhältnis hat.
    Dann muss auch der Container entsprechnd angepasst werden. In der aktuellen Version ist der Breakpoint bei 600px.

    Wie du siehst ist das zwar machbar ... aber eben nicht so dass es für die Allgemeinheit "zündet" und von jederman nutzbar ist.
    Das wäre nur möglich wenn wir hier feste Seitenverhältnisse und Größen für die Bilder vorschreiben.

    Markus

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: Responsive Template für Modified
    Antwort #596 am: 29. Juli 2021, 12:21:08
    Es ist ja inzwischen möglich dem Content mehrere Untercontents zuzuweisen. Das ist ja eine wirklich gute Sache. Nun möchte ich aber, dass in der Auflistung der untergeordneten Content-Links der Link mit CSS hervorgehoben markiert wird, dessen Seite gerade aktiv ist.
    Habe versucht es in die sub_content_listing.html einzufügen, aber so gehts leider nicht:

    Code: PHP  [Auswählen]
    <a href="{$content_data.CONTENT_LINK}" title="{$content_data.CONTENT_TITLE|onlytext}"{if strstr($smarty.server.PHP_SELF, FILENAME_CONTENT, 'coID=$content_data.CONTENT_GROUP')} class="Current"{/if}>

    Hat noch jemand eine bessere Idee den aktiven Link zu markieren?

    BG Karsta

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #597 am: 29. Juli 2021, 12:34:10
    Hi  Karsta,

    das wirst du so nicht schaffen weil dir die group_id aus der sub_content_listing.php fehlt.

    Code: PHP  [Auswählen]
        $sub_content[] = array('CONTENT_TITLE' => $shop_sub_content['title'],
                               'CONTENT_LINK' => xtc_href_link(FILENAME_CONTENT, 'coID='.$shop_sub_content['group_id'], 'NONSSL')
                               );

    Die müsste hier ergänzt werden ... dann kannst du es auch im Template abfragen mit $smarty.get.coID

    Markus

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: Responsive Template für Modified
    Antwort #598 am: 29. Juli 2021, 12:53:32
    Hallo Markus,

    Danke, genau das wollte ich eigentlich verhindern, wegen der Updatessicherheit.

    @ALL
    Kleiner Hinweis noch am Rande für Mitleser, wenn überhaupt die GROUP zur Verfügung steht, muss der Link so abgefragt werden:

    Code: PHP  [Auswählen]
    <a href="{$content_data.CONTENT_LINK}" title="{$parent_content.CONTENT_TITLE|onlytext}"{if strstr($smarty.server.PHP_SELF, FILENAME_CONTENT) && $smarty.get.coID == $content_data.CONTENT_GROUP} class="Current"{/if}>

    BG Karsta

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #599 am: 29. Juli 2021, 12:58:49
    Hi Karsta,

    dann bitte ein Ticket schreiben. :-)

    Markus
    48 Antworten
    40440 Aufrufe
    18. Juni 2017, 11:01:06 von Timm
    1 Antworten
    3085 Aufrufe
    24. April 2018, 09:36:44 von lukass
    10 Antworten
    8831 Aufrufe
    28. November 2018, 23:00:26 von cayuco
    3 Antworten
    1906 Aufrufe
    21. Juli 2018, 14:02:31 von Tomcraft
               
    anything