rechtstexte für onlineshop
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

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #555 am: 24. Mai 2021, 00:00:10
    Hallo @Markus

    Ich habs nun auch mal geschafft den Testshop upzudaten.

    Bei Bildern ist mir aufgefallen, dass durch die Nutzung von lazyloading statt unveil nun im Seitenquelltext erst img class = lazyloaded und dann ls-is-cached lazyloaded steht. In beiden Fällen ist ein Leerzeichen nach dem ersten Anführungszeichen. War bei unveil nicht so und hab ich auch sonst noch nicht gesehen. Ist das korrekt?

    Bsp:
    Code: XML  [Auswählen]
    <img class=" ls-is-cached lazyloaded" data-src="https://dev.modified-shop.org/images/product_images/midi_images/24_1.jpg" alt="Testartikel 24" title="Testartikel 24" src="https://dev.modified-shop.org/images/product_images/midi_images/24_1.jpg">

    Gruss Timm
    rechtstexte für onlineshop

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #556 am: 24. Mai 2021, 08:13:44
    Hi Timm,

    ja das ist korrekt ... das hat was mit dem Suchen und hinzufügen von Klassen für die Bilder zu tun und kommt durch das lazysizes-Script. Das ist aber kein Problem. :-)

    Markus

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #557 am: 24. Mai 2021, 19:53:32
    Danke für die Info. Sieht im ersten Moment komisch aus.

    Gruss Timm

    awids

    • Experte
    • Beiträge: 3.782
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #558 am: 24. Mai 2021, 20:05:05
    Als Kunde / Normalsurfer macht man sich aber selten die Mühe, den Quelltext einer Seite zu lesen und auf solche Unregelmäßigkeiten zu achten. Versteh mich nicht falsch: Ich finde es gut, dass du dir genau anschaust, was du machst und wie es ausgegeben wird und es ggf. hinterfragst. Davon sollte sich hier so manch ein User eine Scheibe abschneiden. Aber bei so belanglosen Dingen kann man auch mal 5 gerade sein lassen.

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #559 am: 24. Mai 2021, 20:59:21
    Hey Alex

    Es geht ja nicht um den Normalsurfer, sondern mich als Shopbetreiber. Für dich ist das vielleicht belanglos, da du Hintergrundwissen hast. Ich hatte bisher noch nie im Quelltext des Shops gesehen, dass nach dem ersten doppelten Anführungszeichen ein Leerzeichen kommt. Zwischendurch schon und deshalb ist es vermutlich auch am Anfang egal. Ich wollte aber lieber drauf hinweisen. Lieber frage ich hier nach, als das irgendwann rauskommt, dass es doch ein Fehler ist. Denke der Weg ist zielführender für das gesamte Projekt und sollte von mehr Nutzern gegangen werden, solange man erkennt, dass es sich nicht um kostenlosen, eigennützigen Wissenstransfer handelt. Ich hab mir auch nicht die Mühe gemacht mich in html mehr einzuarbeiten, um diese Frage eventuell selbst beantworten zu können. Ich benötige dieses Wissen zu selten und gebe meinen Teil anders an die Community zurück.

    Mir war nicht klar, dass

    Code: XML  [Auswählen]
    <img class="xyz"

    das gleiche ist, wie:

    Code: XML  [Auswählen]
    <img class=" xyz"

    Zumal es in templates/tpl_modified_responsive(1)/javascript/jquery.lazysizes.min.js ohne das Leerzeichen angegeben ist:

    Code: Javascript  [Auswählen]
    t={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",fastLoadedClass:"ls-is-cached"

    Gruss Timm

    EDIT: Zumal auf der offiziellen Demoseite die img class bei den Beispielen ohne anfängliches Leerzeichen ausgegeben wird.

    Code: XML  [Auswählen]
    <img data-sizes="auto" class="no-src lazyautosizes lazyloaded" data-src="https://farm1.staticflickr.com/192/504251019_ffc94c77b5_b.jpg"........>

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #560 am: 25. Mai 2021, 08:01:52
    Hi Timm,

    schaue dir mal die weiteren Beispiele auf der Demoseite an ... auch da wirst du ein vorangestelltes Leerzeichen finden. :-)
    Das hängt mit dem Script selbst zusammen. Da gibts ja nichts zu initialisieren oder sonst irgendwie einzubinden ... von daher kann man damit eigentlich nicht viel falsch machen. Das Leerzeichen kannst du schlichtweg ignorieren .... das beeinflusst nicht die Funktionalität. :-)

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #561 am: 25. Mai 2021, 17:27:35
    Ich finde FräuleinGarns Frage sehr berechtigt.
    Und in der Tat sind Leerzeichen direkt nach dem einleitenden " in den HTML5-Spezifikationen des W3C nicht vorgesehen (außgenommen bei der "unquoted" Syntax):
    https://dev.w3.org/html5/spec-LC/syntax.html#unquoted
    Es dürfte sich also schlicht um Browser-Toleranz handeln, daß das so durchgeht.

    Zugegebenermaßen habe ich noch keinen Browser wahrgenommen, der das nicht durchgehen lässt.
    Wer aber kann sagen, ob das auch zukünftig und bei allen eher seltener benutzten Browsern ebenfalls der Fall ist.

    Ich halte auch die der unkomprimierten lazysizes.js-Datei entnommene Art und Weise eine Klasse hinzuzufügen für unglücklich:

    Code: Javascript  [Auswählen]
            var addClass = function(ele, cls) {
                    if (!hasClass(ele, cls)){
                            ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);
                    }
            };

    Was wohl daher kommt, daß die einfachere und bessere Lösung über classList, die das Leerzeichen-Problem nicht hätte, mal wieder wegen Internet Explorer nicht benutzt wurde.
    Trotzdem könnte man das anders lösen.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #562 am: 25. Mai 2021, 17:46:07
    Hi noRiddle,

    hier habe ich zu dem Thema auch noch was gefunden.
    https://github.com/aFarkas/lazysizes/issues/351
    Dem Entwickler ist es scheinbar bewusst.

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #563 am: 25. Mai 2021, 18:09:39
    Interessant. Ja die Begründung des Entwicklers ist sinnig.

    Ein Fix wie ich ihn mir vorstelle am Beispiel der komprimierten Datei.

    Suche:

    Code: Javascript  [Auswählen]
    e.setAttribute("class",(e[$]("class")||"").trim()+" "+t)

    Ersetze mit:

    Code: Javascript  [Auswählen]
    e.className += (e[$]("class") != "" ? (" " + t) : t)

    Suche:

    Code: Javascript  [Auswählen]
    e.setAttribute("class",(e[$]("class")||"").replace(a," "))

    Ersetze mit:

    Code: Javascript  [Auswählen]
    e.setAttribute("class",(e[$]("class")||"").replace(a,""))

    Damit sind die beiden Funktionen addClass() und removeClass(), wie sie unkomprimiert heißen, angepasst worden.
    Vor allem wird bei removeClass(), also dem Entfernen einer Klasse nicht " " sondern "", also kein Leerzeichen sondern ein leerer String gesetzt, also Nichts.
    Beim Setzen einer Klasse wird ein Leerzeichen vor den hinzuzufügenden Klassennamen nur dann gesetzt wenn bereits eine Klasse vorhanden ist.

    Konnte bislang kein Funktionsproblem an meiner Lösung entdecken, müsste aber mal in diversen Browsern getestet werden.
    Die Lösung ist aber nicht 100% astrein. Sollte das Skript eine Klasse entfernen, die als zweites steht, bleibt ein Leerzeichen hinter der verbleibenden Klasse stehen.

    Jedenfalls kann jQuery das Ganze mittels removeClass() und addClass() ohne Leerzeichen, geht also.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #564 am: 25. Mai 2021, 19:29:15
    Hi noRiddle,

    Danke schön. Ich werde das mal in dem ein oder anderen Shop so einbauen und einfach mal beobachten, ob es da doch noch irgendwo ein Problem gibt. Es können sich auch gerne andere anschließen und mal ein bisschen testen. Dann könnten wir das mit einem entsprechenden Kommentar in die js-Datei übernehmen. :-)

    Markus

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #565 am: 25. Mai 2021, 20:05:59
    Danke @noRiddle für die Anpassung  :thumbs:

    @Markus
    Ich würde es auch testen, wenn du mir die angepasste Datei zur Verfügung stellst. In minifyten JS Dateien würde ich ungern selbst rumdoktern.

    Vielleicht wäre es auch sinnvoll die Lösung an den scriptersteller weiterzuleiten!?

    Gruß Timm

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #566 am: 25. Mai 2021, 22:32:29
    Wenn du's testen möchtest kannst du mittels z.B. notepad++ und suchen-ersetzen genau das machen was ich an Code angegeben habe. Kann nichts kaputt gehen. Falls doch, machst du's eben rückgängig.

    Dem Scriptersteller würde ich nichts mitteilen solange nicht 100% sicher ist, daß die Lösung fehlerlos und sinnvoll ist.
    Würde mich ein wenig wundern wenn er nicht selbst darauf gekommen wäre....
    Werde mir das bei Gelegenheit nochmal genauer anschauen.

    Gruß,
    noRiddle

    Stingray

    • Neu im Forum
    • Beiträge: 8
    Re: Responsive Template für Modified
    Antwort #567 am: 19. Juni 2021, 15:19:54
    Hallo zusammen!

    Ich habe versucht, beim Slick-Slider im tpl_modified_responsive für die Klasse content_slider das margin: 20px 0 20px 0 auf margin:0 (bzw. auch margin: 0 0 20px 0) zu ändern, da ich keinen Abstand nach oben möchte. Allerdings sind die Bilder dann verschoben und nicht mehr in voller Größe zu sehen. Auch einen DIV-Container drumherum mit margin-top:20px führt zu dem merkwürdigem Ergebnis. Gibt es da einen besonderen Trick, um nach oben keinen Abstand zu bekommen?

    Für Eure Hilfe schon jetzt ein fettes Danke!

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #568 am: 20. Juni 2021, 08:12:16
    Hi Stingray,

    es sollte reichen wenn du in content_slider einfach das erste margin auf 0 setzt.
    Da war aber noch ein kleiner Bug, der oben von der Navigation kommt, der nur sichtbar wird, wenn man das margin auf 0 setzt.

    Ändere folgendes in der "stylesheet.css".

    Suche:

    Code: CSS  [Auswählen]
    ul.contentnavigation li {
      float:left;
      padding: 0px 10px 0px 10px;
      line-height:45px;
      color:#666;
      font-size:13px;
    }

    Ersetze mit:

    Code: CSS  [Auswählen]
    ul.contentnavigation li {
      float:left;
      padding: 0px 10px 0px 10px;
      line-height:45px;
      color:#666;
      font-size:13px;
      height:43px;
    }

    Suche:

    Code: CSS  [Auswählen]
    ul.contentnavigation li.cart {
      float:right;
      border:none;
      padding: 1px 10px 0px 10px;
      margin: 0px;
      line-height:43px;
      height:43px;
      position:static;
    }

    Ersetze mit:

    Code: CSS  [Auswählen]
    ul.contentnavigation li.cart {
      float:right;
      border:none;
      padding: 1px 10px 0px 10px;
      margin: 0px;
      line-height:43px;
      height:43px;
      position:static;
      box-sizing:border-box;
    }

    Suche:

    Code: CSS  [Auswählen]
    ul.contentnavigation li.wishlist {
      float:right;
      border:none;
      padding: 1px 10px 0px 10px;
      margin: 0px;
      line-height:43px;
      height:43px;
      position:static;
    }

    Ersetze mit:

    Code: CSS  [Auswählen]
    ul.contentnavigation li.wishlist {
      float:right;
      border:none;
      padding: 1px 10px 0px 10px;
      margin: 0px;
      line-height:43px;
      height:43px;
      position:static;
      box-sizing:border-box;
    }

    Das ganze ist in r130601 korrigiert.

    Markus

    Stingray

    • Neu im Forum
    • Beiträge: 8
    Re: Responsive Template für Modified
    Antwort #569 am: 20. Juni 2021, 11:24:58
    Vielen Dank, Markus! Das hat super funktioniert!
    48 Antworten
    40442 Aufrufe
    18. Juni 2017, 11:01:06 von Timm
    1 Antworten
    3085 Aufrufe
    24. April 2018, 09:36:44 von lukass
    10 Antworten
    8832 Aufrufe
    28. November 2018, 23:00:26 von cayuco
    3 Antworten
    1906 Aufrufe
    21. Juli 2018, 14:02:31 von Tomcraft
               
    anything