Frage zum Produkt - Mobil nicht Kundenfreundlich

Thema wurde von barbara, 18. August 2022 erstellt.

  1. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Ich wurde gerade auf ein Problem mit der "Frage zum Produkt" aufmerksam gemacht.

    Wenn man das mit dem Handy anklickt, sieht man das Modal-Fenster nur bis zum Feld "Frage".
    Das darunter noch ein Sicherheitscode und ein Haken für den Datenschutz liegt, ist nicht zu erkennen.
    Der Button "senden" ist hingegen vorhanden.
    Kunden geben oben die Daten ein, klicken auf "Senden" und wundern sich, dass es nicht geht.
    Fehlermeldung? ja, wenn man nach unten Scrollt Der Kunde bleibt aber oben und sieht nur, dass sich das Fenster nicht schließt.

    Außerdem ist mir bei der Gelegenheit aufgefallen, dass das Modal bei einer Bildschirmbreite zwischen 450px und 500px gar nicht erscheint. Da wird nur der Hintergrund dunkel.

    Beides lässt sich per CSS lösen:
    Code:
    @media (max-width: 500px){
    .product-question-modal .mfp-container {
        height: auto;
    }
    
    .product-question-modal .mfp-container .modal-body {
        max-height: 400px;
        overflow-x: auto;
    }}
    Damit ist das Fenster zwar immer noch nicht ganz sichtbar, zeigt aber den Sicherheitscode noch zum Teil an.
    So sehen Kunden hoffentlich, dass sie nach unten scrollen müssen.

    Jetzt könnte man denken "ich mach das noch etwas höher, dann ist alles zu sehen".
    Falsch. denn User mit kleineren Smartphones kommen dann nciht mehr an den Senden-Button, da dieser außerhalb des Bildschirms liegt und die Scrollfunktion wegfällt.


    Mal ein Vorher / Nachher Bild:

    upload_2022-8-18_16-40-41.png upload_2022-8-18_16-41-19.png
     
  2. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    Ich würde es auf "@media max-width: $grid-float-breakpoint" setzen. Dann errechnet er den Wert automatisch aus der eingestellten Größe im Styleedit.
     
  3. guenter_baeumler

    guenter_baeumler Erfahrener Benutzer

    Registriert seit:
    22. Juni 2018
    Beiträge:
    376
    Danke erhalten:
    69
    Danke vergeben:
    69
    Kannst Du das bitte nochmal vollständig darstellen, ich habe da anscheinend einen Fehler gemacht.
     
  4. Marias Einkaufsparadies

    Marias Einkaufsparadies Erfahrener Benutzer

    Registriert seit:
    12. Dezember 2021
    Beiträge:
    371
    Danke erhalten:
    156
    Danke vergeben:
    90
    Code:
    @media (max-width: $grid-float-breakpoint){
    .product-question-modal .mfp-container {
        height: auto;
    }
    
    .product-question-modal .mfp-container .modal-body {
        max-height: 480px;
        overflow-x: auto;
    }}
     
  5. guenter_baeumler

    guenter_baeumler Erfahrener Benutzer

    Registriert seit:
    22. Juni 2018
    Beiträge:
    376
    Danke erhalten:
    69
    Danke vergeben:
    69
    #5 guenter_baeumler, 19. August 2022
    Zuletzt bearbeitet: 20. August 2022
    Das sieht schon mal gut aus.
    Siehst Du denn eine Möglichkeit das Popup-Fenster generell auszuschalten und nur die "normale" Ansicht , wie bei "Woanders Günstiger" zu nutzen?

    Schönes Wochenende
     
  6. guenter_baeumler

    guenter_baeumler Erfahrener Benutzer

    Registriert seit:
    22. Juni 2018
    Beiträge:
    376
    Danke erhalten:
    69
    Danke vergeben:
    69
    Nachtrag: Um Kunden nicht in die Wüste zu schicken habe ich bei dem Formular Hinweistexte eingefügt, bis es eine Lösung gibt das Popup-Fenster evtl. "ausschalten" zu können.
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    ich hab das gerade mal getestet. Wenn ich jetzt den Sicherheitscode eingeben will, sehe ich ihn nicht, da die Tastatur ihn verdeckt und ich aber das Feld nicht nach oben schieben kann.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    auch diesen Code hab ich getestet. Ich sehe zwar alles, aber sobald ich den Sicherheitscode eintragen will, kann ich es nicht, da ich den Code nicht mehr sehe, weil die Tastatur ihn verdeckt und das Feld sich nicht nach oben schieben lässt.
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Du musst die Höhe so anpassen, dass der Scrollbalken rechts bleibt.
    Wenn der einmal weg ist, hast Du keine Chance

    Nimm anstelle des einfachen Codes Googles ReCaptcha. Das ist zwar auch nicht mehr richtig sicher, aber deutlich besser als das alte Teil, wo man noch Buchstaben und Zahlen eingeben muss.
     
  10. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    danke dir. ReCaptcha hatte ich. Dann wurde mir hier gesagt, dass das nicht DSGV konform ist. Deshalb hab ich es wieder rausgenommen und mein Kontaktformular gelöscht. (ich hatte es nur drin, da ich soviel Spam bekommen habe).
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    #11 Anonymous, 4. September 2022
    Zuletzt bearbeitet: 4. September 2022
    @barbara kann man den "Senden-Button" nicht unter das Anhaken der Datenschutzbestimmungen verschieben? Also das er praktisch erst ins Sichtfeld rückt, wenn man bis nach unten gescrollt hat.
     
  12. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Du musst das nur im Consent-Tool aktivieren, dann kann der Kunde das annehmen oder ablehnen.

    Ich habe noch nicht gefunden, wo die Fußleiste des Modals fixiert wird.
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.463
    Danke erhalten:
    551
    Danke vergeben:
    211
    Aber wenn der Kunde ablehnt, kann er mir keine Nachricht schreiben. Deshakb gab ich mich dagegen entschieden.

    Ich hab vorhin auch ein bisschen gebastelt. Eine Idee wäre auch, sobald man auf Senden klickt und man nicht alles ausgefüllt hat, neben dem Wort "Senden" ein Hinweis steht. Habs aber nicht hinbekommen, dass dieser Hinweis nur auftaucht, wenn nicht alle Felder ausgefüllt sind.
     
  14. Roland Collin

    Roland Collin Erfahrener Benutzer

    Registriert seit:
    2. Juli 2019
    Beiträge:
    105
    Danke erhalten:
    14
    Danke vergeben:
    47
    Falls da noch jemand Probleme hat:
    ich habe im SE4 im eigenen CSS folgenden Eintrag gemacht.
    So habe ich Mobil und Desktop Scrollbalken.
    Der relevante Eintrag wäre max-height: 400px;

    .modal-dialog .modal-content {
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: scroll;
    max-height: 400px;
    overflow: auto;
    }

    Grüße Roland
     
  15. claudiaangerer

    claudiaangerer Erfahrener Benutzer

    Registriert seit:
    30. Juni 2011
    Beiträge:
    61
    Danke erhalten:
    2
    Danke vergeben:
    29
    Danke Barbara für den Hinweis. Ich hab die CSS eingefügt und das passt soweit, jedoch ist bei mir jetzt rechts und unten ein Scrollbalken zu sehen. Man kann nun alles nach links schieben. Wie bekomme ich das weg?

    Ich habe das Modul Statischer Captcha von Werbemarkt.de. Macht das den unteren Balken?
     

    Anhänge:

    • Mobil.JPG
      Mobil.JPG
      Dateigröße:
      48,6 KB
      Aufrufe:
      18
  16. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Soweit ich das bei Dir gesehen habe, liegt es an diesem css-Code:
    Code:
    .modal-body input[type="text"]#form-input {
        left: unset;
    }
    Ob das von Werbe-Markt kommt, kann ich Dir so aus dem Kopf nicht sagen.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    28. Dezember 2020
    Beiträge:
    230
    Danke erhalten:
    100
    Danke vergeben:
    28
    @barbara
    Es kann auf das Captcha und so weiter ab Gambio 4.8 eigentlich verzichtet werden (sieht ohne Sicherheitsabfrage mobil auch viel besser aus).
    Siehe:
    (Link nur für registrierte Nutzer sichtbar.)

    Hatte ein Ticket nach Upgrade auf 4.8. aufgemacht, da das Captcha Bild nicht mehr geladen wurde und folgende Antwort vom Support erhalten:
    Den Sicherheitscode habe ich nun für alles abgeschaltet.