Responsive Template für Modified

[Markus]

Hi Timm,

danke für deine ausführliche Antwort.

Immer wenn wir ein Script aktualisieren, hängt meist ein Rattenschwanz hintendran der getestet und geprüft werden muss. Die neue Version von jquery.alert ist komplett anders. Von daher müsste an der Stelle überprüft werden wo das Teil eingreift. Aktuell ist das der Checkout, das Adressbuch und die Passwort ändern Funktion. Die verschiedenen Symbole werden nicht mal genutzt. Hier hatte ich auch überlegt die komplett rauszuschmeissen. Hier jetzt aber was upzudaten macht nicht wirklich Sinn .. zum einen funktioniert das bisherige und zum anderen gibts vielleicht noch andere Möglichkeiten der Formularüberprüfung ... ohne hier vorgreifen zu wollen .. schauen wir mal

Auch was die Scripte angeht ist das lieb von dir dass du da schauen möchtest nach neueren Versionen ... die haben wir aber auch auf den Zettel. jQuery updaten und die ganzen Scripte dann nachziehen. Es wird irgendwann kommen ... nur wann steht noch nicht fest. Auch hier zieht das ganze immer einen riesigen Rattenschwanz hinter sich her .. und aktuell funktionieren die alle fehlerfrei.

FontAwesome 5 wird mit Sicherheit kommen .. nur weiß ich noch nicht wann. Das wird mit Sicherheit noch ein bischen dauern. Die Änderungen für die Icons ziehen sich ja durch viele Dateien. Und da sich die Auszeichnung leicht geändert hat müssen die dann alle angepasst werden.

Markus

[longchuan]

Feedback

Habe mir erlaubt die beiden neuen Dateien bei mir im Shop einzufügen.
Google Pagespeed Veränderung positiv.
Vorher
Desktop 93/100
nachher 97/100

Danke Markus

[Timm]

Danke für deine Antwort @markus

Hab ich mir schon so gedacht, dass das dauern wird, weil mehr dran hängt, als nur die einzelnen Dateien zu tauschen und anzupassen.

Aber im Moment gibt es sicher wichtigere Tickets zu lösen, wo wirklich etwas nicht richtig funktioniert, als das weiter zu optimieren.

Schön, dass es aber auf eurer to-do-liste steht.

Gruss Timm

P.S. Ich hab auch ein Pünktchen mehr dadurch bekommen in google pagespeed insights für die Desktopversion.

[Timm]

Hallo Markus

Kann es sein, dass eine responsive Bilderklasse für die Contentsite fehlt?

Code: CSS  [Auswählen]

/* 24. START content sites (AGB, Datenschutz, etc.) */
.content_site {

}
.content_site ul {
  margin-left:15px;
}
.content_site ol {
  margin-left:28px;
}
/* END content sites (AGB, Datenschutz, etc.) */

Auf der Homesite ist sie zu finden und die Bilder sind responsiv.

Code: CSS  [Auswählen]

.homesite img {
  max-width:100% !important;
  height:auto !important;
}

Ich hab nämlich hier das Problem, dass auf Bildschirmen<Bildgröße das Bild über den Rand hinausgeht und der Shophintergrund nur über die Hälfte der Seite. Das passiert auf den normalen kleineren Seiten (homesite) , wo links die Kategorien zu sehen sind nicht.

Wenn ja, bitte die Lösung hier mit posten, damit ich nicht bis zum nächsten Update warten müsste.

Danke und Gruß Timm

[Markus]

Hi Timm,

ich habe das ganze gefixt und es wird im kommenden Update enthalten sein.
Wie du schon vermutet hast muss einfach nur das hier ...

Code: CSS  [Auswählen]

.content_site img {
  max-width:100% !important;
  height:auto !important;
}

nach dem hier eingefügt werden...

Code: CSS  [Auswählen]

.content_site ol {
  margin-left:28px;
}

Markus

[Markus]

Hi,

und da ich gerade dran bin habe ich mir jetzt doch auch den bx-slider vorgenommen und hier ebenfalls font-awesome eingesetzt. Das ganze ist aber nur für die responsive Templates, da auch nur hier font-awesome eingesetzt wird. Hier die Änderungen.
Zu sehen ist das ganze hier ... https://dev.modified-shop.org/

suche in der general_bottom.js.php

Code: Javascript  [Auswählen]

$('.bxcarousel_bestseller').bxSlider({

danach einfügen

Code: Javascript  [Auswählen]

      nextText: '<i class="fa fa-chevron-right"></i>',
      prevText: '<i class="fa fa-chevron-left"></i>',

suche in der gleichen Datei:

Code: Javascript  [Auswählen]

$('.bxcarousel_slider').bxSlider({

danach einfügen

Code: Javascript  [Auswählen]

      nextText: '<i class="fa fa-chevron-right"></i>',
      prevText: '<i class="fa fa-chevron-left"></i>',

Wer kein font-awesome im Template zur Verfügung hat kann natürlich

Code: PHP  [Auswählen]

<i class="fa fa-chevron-left"></i>

durch:

Code: PHP  [Auswählen]

&laquo;

bzw.

Code: PHP  [Auswählen]

<i class="fa fa-chevron-right"></i>

durch:

Code: PHP  [Auswählen]

&raquo;

ersetzen.

Die Stylesheet Änderungen sind die gleichen. Deshalb hänge ich das Stylesheet einfach hier an.
Das wars dann auch schon.

Markus

[Timm]

Moin

Vielen Dank Markus. Läuft beides super.

Gruß Timm

[Timm]

Moin

Im responsive Template gibt es einen Fehler mit der Beschriftung der CSS Buttons für das austragen vom Newsletter. Dort steht dann "Anmelden", was ja genau das Gegenteil von dem ist, was der Kunde möglicherweise möchte.

Näheres dazu Newsletter an/abmelden im Responsive Template falsch

Ticket dazu eröffnen, oder gibts eine schnelle Möglichkeit, die ohne Ticket auskommt?

Gruß Timm

[Markus]

Hi Timm,

ist gefixt in r11100

Die newsletter.php wurde entsprechend geändert.

Code: PHP  [Auswählen]

$smarty->assign('BUTTON_SEND', xtc_image_submit('button_send.gif', IMAGE_BUTTON_SEND));

Markus

[Timm]

funktioniert

Gruß Timm

[Timm]

Moin

Wenn man das Suchfenster auf Smartphones anklickt, dann wird der Shop gezoomt. Allerdings geht er dann nicht automatisch in den Ursprungszustand zurück. Kann man das ändern?  Man kann das zwar machen indem man doppelt auf eine freie Fläche klickt zb beim iPhone, allerdings gibts davon nicht viel, wenn mehre Artikel bei der Suche erscheinen im Dropdown.

Und die Preise der Suchergebnisse werden abgeschnitten. Alles nachstellbar im Devshop.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Zweites Problem ist ein privates. Tritt nicht im Devshop auf. Wenn ich mobil in der Perlenscheune blau in der Suche  eingebe, dann verrutscht das „Seite 1 von x“ nach unten. Geb ich gelb ein, dann zb nicht. Kann man auch im Browser nachstellen, wenn der Bildschirm so schmal ist, dass die Artikelbilder in der Suche verschwinden. Hat da vielleicht jemand eine Lösung für?

[ Für Gäste sind keine Dateianhänge sichtbar ]

Und noch eine Frage. Ist es angedacht, dass Backend irgendwann auch responsive zu gestalten?

Gruß Timm

[Markus]

Hi Timm,

zu deinem Problem ...

füge in der stylesheet.css vor

Code: CSS  [Auswählen]

#autocomplete_pagination li {
  float:left;
  border: 0;
}

das ein:

Code: CSS  [Auswählen]

#autocomplete_pagination {
  position:relative;
}

Die Änderung ist jetzt auch schon im Trunk.
Das andere kann ich nicht wirklich nachvollziehen. Vor allem nicht das mit dem Zoom.

Markus

[Timm]

Danke Markus, das wars. Ist im Devshop wahrscheinlich nicht aufgefallen, weil die Artikelnamen wesentlich kürzer sind als bei mir und die Suche dadurch viel kürzer.

Das Zoomproblem hab ich nochmal getestet. Auf Android passiert es nicht und auch nicht im Desktopbrowser, wenn man das Bild verkleinert. Nur auf IOS!

Es ist aber kein allgemeines IOS Problem, sondern liegt am Template. Wenn ich andere responsive Templates zb auf Bootstrapbasis nutze (zb das von Karl), dann vergrößert sich der Shop nicht und auf anderen Internetseiten die Suchenfelder haben, passiert es auch nicht. Und das Problem tritt bei allen Shops auf, die das tpl_responsive nutzen. Liegt also nicht an einer Änderung von mir.
Hier zwei Bilder, was ich meine. 1 Bild Seite normal geladen. 2 Bild einmal in das Suchfeld geklickt.

[ Für Gäste sind keine Dateianhänge sichtbar ]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

EDIT
Und in der Loginbox passiert es auch nicht auf IOS. Muss also ein Unterschied zwischen dem Loginfeld und dem Suchfeld geben, der das auslöst.

[Timm]

Hätte noch Verbesserungsvorschläge um das Shopdesign noch stimmiger zu machen.

Es gibt ja an vielen Orten noch die », die nicht zu den restlichen Font Awesome Pfeilen passen. Ich habe das bei mir schon angepasst.

Wären folgende Dateien anzupassen

##Pagination
/lang/german/german.php
/lang/english/english.php

##Suche öffnende Ergebnisse
/templates/tpl_modified_responsive/module/autocomplete.html

##öffnender Warenkorb beim hineinlegen
/templates/tpl_modified_responsive/boxes/box_cart.html

Zusätzlich noch in den Boxen (da hab ich es aber nicht hinbekommen)
/templates/tpl_modified_responsive/boxes/box_whatsnew.html
/templates/tpl_modified_responsive/boxes/box_reviews.html
/templates/tpl_modified_responsive/boxes/box_last_viewed
/templates/tpl_modified_responsive/boxes/box_specials

Vielleicht wollt ihr das auch standardmäßig integrieren.

Gruß Timm

[Markus]

Hi Timm,

das hier ist das Problem ...
https://www.queness.com/post/17599/prevent-ios-from-zooming-form-when-fields-are-in-focus

Es gibt keinen Unterscheid zwischen dem Suchfeld und dem Loginfeld .. die greifen eigentlich auf die gleichen Klassen zu ... mit nur einem Unterschied ... einem padding-right von 90px.

Ich muss mir das mal in Ruhe anschauen.
Ich vermute mal dass hier in einer bootstrap Javascript-Datei eine entsprechende Javascript-Lösung drin ist welche das zoomen verhindert aber das erscheint mir schon fast mit Kanonen auf Spatzen geschossen.

Markus