Der Warenkorb funktioniert auf dem Handy nicht

    Hallo Zusammen,


    da unser Onlineshop recht viele Zugriffe über iOS (50%) und Android (10%) hat, wäre es schön, wenn diese Besucher auch über ihr Handy bestellen könnten.


    Leider funktioniert das nicht.


    Die Produktansicht ist recht unübersichtlich, weil einiges übereinandergeschoben wird, da es nicht wirklich nebeneinander passt. Das größte Problem ist allerdings, dass der Warenkorb nicht funktioniert.


    Der Warenkorb ist zu breit fürs Handy-Display, auch im Querformat und läßt sich leider auch nicht seitlich verschieben. Somit fehlen z.B. die Spalten Menge und Gesamtpreis (Betrag). Auch die Angaben zu den Versandarten werden teilweise abgeschnitten.


    Ich verwende das mitgelieferte Template.


    Gibt es eine Lösung für dieses Problem?


    Viele Grüße - Harald

    Hallo Stefan,


    danke für den Tipp, aber das Layout auf den Screenshots gefällt mir überhaupt nicht.


    Das scheint mir ein bißchen wie "mit Kanonen auf Spatzen zu schießen".


    Dieses Plugin kann unendlich viele Dinge, von denen ich nichtmal weiß, ob ich sie je brauche.


    Das was für mich am Wichtigsten wäre, dass die Anzeige auf mobilen Geräten wirklich funktioniert, kann ich aber nirgends erkennen.


    Nur um das heraus zu finden sind mir dann 49 $ dann doch etwas zuviel.


    In der Demo Version für VirtueMart 3.x sieht der Warenkorb/das Auschecken noch viel breiter aus, als es jetzt schon ist, die Breite macht ja aber gerade das Problem. Es würde eigentlich schon reichen, wenn man den Warenkorb seitlich hin- und herschieben/scrollen könnte, so dass man auch das letzte Drittel rechts sehen könnte. Ich habe leider überhaupt keine Ahnung, warum er sich nicht bewegen läßt.


    Viele Grüße - Harald

    Servus Harald,


    der VP OPC funktioniert sehr gut auf mobilen Geräten, insbesondere iOS. Das wäre die einfache Lösung gewesen. Es gibt vier verschiedene Layouts, die man einstellen kann.


    Wenn Du nicht auf externe Erweiterungen zugreifen möchtest, bleibt nicht viel anderes übrig, als Overrides für
    Dateien aus /components/com_virtuemart/cart/tmpl/ in Deinem Template anzulegen, und das Layout selbst zu gestalten.
    Dazu benötigst Du aber mindestens Grundkenntnisse in PHP, HTML und CSS.


    Auf jooglies.com habe ich mir auch einen eigenen Warenkorb-Vorgang zusammengebaut, aber die Arbeit und Pflege sind nur vertretbar, wenn man sonst keine Hobbies hat. Beim nächsten Mal, wenn ein Update meine Overrides zerschießt, kommt bei mir auch der OPC rein.
    Ich habe gewünschte Änderungen auch schon für Kunden erledigt, aber da kommst Du schnell auf ein Mehrfaches des OPC-Preises, das ist nur sinnvoll, wenn es wirklich spezielle Anforderungen gibt.


    Den einmaligen Kaufpreis für den OPC hat man nach ein paar nicht abgebrochenen Käufen über Telefone oder Tablets schnell wieder drin. Und die Pflege besteht aus dem Klick auf den Update-Button. (Nein, ich bekomme keine Provision von denen.)


    Wenn Du das seitliche Scrollen dennoch bevorzugst, hilft evtl. ein Link zur Seite, um das CSS einzusehen.


    Grüße
    Stefan

    Servus Harald,


    ab Arbeiten mit Admin-Zugang werfe ich meinen Stundenzähler an, aber geht vielleicht auch so.


    Schau einmal in der position.css des Templates, dort findest Du die CSS-Ausschnitte.


    Den Overflow auf visible setzen, damit der Scroll-Balken erscheint:
    #contentarea, #contentarea2 {
    position: relative;
    overflow: visible;
    padding: 0 20px !important;
    margin: 0;
    }


    Der Schatten um den Seiteninhalt stört dann:


    #shadow #all {
    box-shadow: none;
    }


    Evtl. diese Anpassungen besser in der user.css oder custom.css des Beez-Templates machen, Google findet sicher genug Anleitungen dazu.


    Die Module an der linken Seite würde ich im Warenkorb ausschalten. Dazu einen Menülink oder Schattenmenülink auf den Warenkorb anlegen. Dann geht es über die Menüzuweisung im Warenkorb-Modul.


    Grüße
    Stefan

    Hallo Stefan,


    danke für Deinen Hinweis!


    Leider haben diese Änderungen keinerlei Auswirkungen!


    Ich bin aber inzwischen trotzdem ein Stück weiter:


    Nur die Bestellübersicht/Zusammenfassung und Ausgewählte Zahlart werden nicht verkleinert! Diese Einstellungen kommen aber direkt aus dem CSS von VirtueMart. Einige Spalten haben eine Mindestgröße, die fest in Pixeln angegeben ist. Dadurch werden diese Spalten bei der Änderung der Fenstergröße nicht verkleinert und irgendwann sind dann die rechten Spalten nicht mehr zu sehen. Man kann allerdings auch nicht hinscrollen.


    Ich versuche deshalb jetzt diese festen Mindestbreiten durch prozentuale Angaben zu erstetzen und schaue dann mal, ob dann alles Wichtige lesbar ist. Es existiert scheinbar jeweils auch eine prozentuale Angabe, die teilweise so angepasst werden muss, dass das ursprüngliche Layout (mit festen Mindestgrößen) erhalten bleibt.


    Mal schauen, wie weit ich damit komme... ;)


    Viele Grüße - Harald

    Hallo Stefan,


    grundsätzlich funktioniert es jetzt, wie gewünscht.


    Der Warenkorb wird jetzt an die Breite des Displays angepaßt, allerdings nur so klein, dass der Text in der Kopfzeile noch rein paßt bzw. so dass die Grafiken noch ganz angezeigt werden. Im Hochformat paßt der Warenkorb deshalb noch nicht aufs Display, im Querformat fehlen auf meinem Handy auch noch ein paar Pixel.


    Hast Du vielleicht noch eine Idee, wie man jetzt das mit dem seitlich scrollen noch hinbekommen könnte?


    Die Buttons/Felder für die Versandarten und die Zahlungsarten überlappen sich senkrecht und verdecken sich deshalb teilweise gegenseitig. Ich habe schon danach gesucht ob irgendwo eine Höhenangabe angepasst werden muss oder ob irgendwie die Position der Buttons/Felder geändert werden muss, aber leider habe ich noch nichts passendes gefunden. Mit clear: both; sollten die Elemente angeblich korrekt untereinander angeordnet werden, aber vielleicht habe ich mit .vm-payment-plugin-single noch nicht den richtigen CSS-Selektor!?


    Viele Grüße - Harald

    Hallo Harald,


    durch das overflow: visible; habe ich jetzt einen Scroll-Balken am unteren Rand, man kann den Inhalt also verschieben. Der Schatten ist allerdings noch da.


    Wenn irgendwo etwas überlappt, kann es auch durch ein position: absolute; sein. Es macht Sinn, eine Media Query (-> Google) zu verwenden, die ab einer bestimmten Auflösung float: none; und position: static; für die meisten Elemente in so einem Abschnitt setzt. Dann hat man meistens weniger Salat.


    Du hast auch noch alle Module eingeblendet, die stören im Warenkorb nur. Verwirrt den Kunden, er schließt nicht ab.


    Die .htaccess könntest Du noch aktivieren und in der Joomla Konfiguration das Rewrite einschalten, damit das index.php in der URL verschwindet.


    Grüße
    Stefan

    Hallo Stefan,


    ich habe leider keinen Rollbalken, warum auch immer.


    Die Module links werden durch Mobile Joomla ausgeblendet, wenn man mit einem Mobilgerät auf die Seite geht oder manuell, die mobile Version der Seite aufruft. Der Link dafür steht ganz unten links auf der Seite, da man ihn ja meistens nicht braucht.


    Ich habe keine Ahnung, was ein Media Query sein soll. Es ist ja durchaus sinnvoll, dass die Spalten nicht schmaler sind, als z.B. die Symbole darin, deshalb halte ich scrollen für eine sinnvoller Ergänzung zu meiner bisherigen Lösung.


    Das index.php in der Internetadresse hat mich jetzt noch nie gestört... ;)


    Ich würde jetzt aber das mit dem Scrollen gerne noch hinbekommen...


    Viele Grüße - Harald


    P.S.: Zur mobilen Ansicht: https://shop.the-flying-condors.de/index.php?device=mobile
    Zurück zur Desktopversion: https://shop.the-flying-condors.de/index.php?device=desktop

    Hallo Stefan,


    leider habe ich erst heute wieder festgestellt, dass der Warenkorb nach wie vor auf (manchen) Handys nicht wirklich gut funktioniert.


    Inzwischen habe ich fast 1.000 Artikel im Shop. Aktuell kommen wieder ca. 40 % der Besucher mit iphones auf die Seite, es gibt aber dadurch scheinbar (fast) keine Bestellungen. Deshalb würde ich jetzt doch gerne den von Dir vorgeschlagenen (kostenpflichtigen?) Warenkorb ausprobieren.


    Du hattest geschrieben der VP OPC funktioniert sehr gut auf mobilen Geräten, insbesondere iOS. Meinst Du damit den One Page Checkout von Virtueplanet.com?


    Ist das dieser hier:


    https://www.virtueplanet.com/extensions/vp-one-page-checkout


    Viele Grüße - Harald


    P.S.: Gibt es diese Erweiterung auch mit deutscher Sprache oder kann man die Texte selbst anpassen?

    Hallo Stefan,


    danke für Deine schnelle Antwort.


    Dann werde ich mich mal daran versuchen...ich hoffe ich komme einigermaßen klar mit der Einrichtung...


    Danke auch für die Empfehlung eines Layouts!


    Viele Grüße - Harald


    P.S.: Das gleiche Problem gibt es auch beim Feld Pa(sswort) unter Anmelden und Kasse...

    Hallo Stefan,


    ich habe den OPC mit Layout 2 jetzt installiert und eingerichtet.


    Grundsätzlich funktioniert alles, allerdings gibt es noch eine "Stolperfalle", wenn man als Gast auschecken will.


    Wenn man als Gast auschecken will, muss man zuerst eine E-Mailadresse eingeben (Pflichtfeld), bevor man den Button drücken kann. Zumindest auf meinem Handy wird in dem Eingabefeld jedoch ein sehr schmales eingerahmtes Feld angezeigt, das so klein ist, dass man nicht erkennen kann, was man eintippt/eingetippt hat und ich habe keine Ahnung woher das kommt bzw. wie man das ändern kann.


    Ich weiß leider nicht, wie man am Handy Screenshots macht und am PC wird alles richtig angezeigt, aber vielleicht siehst Du das Problem ja selbst auch, wenn Du einfach mal in unseren Warenkorb gehst.


    https://shop.the-flying-condors.de/index.php/warenkorb


    Ich habe jetzt zumindest eine CSS-Einstellung gefunden, die das verursacht, allerdings steht da nur dabei Inline (dieses Element), also nicht woher diese Einstellung stammt, dass man sie deaktivieren könnte... :(


    "Element {
    width: 0px;
    }"


    Vielleicht können mir unsere Kinder mal noch einen Screenshot von meinem Handy machen, den ich dann noch nachliefern kann.


    Wenn man versucht hat, dort eine E-Mailadresse einzugeben, kommt man weiter und in der nächsten Ansicht wird das E-Mailfeld in voller Größe angezeigt, so dass man dort seine Eingabe überprüfen und notfalls korrigieren kann...ich befürchte allerdings, dass manche garnicht erst soweit kommen... :(


    Viele Grüße - Harald

    Hallo Harald,


    das von Dir beschriebene Problem kann ich nicht nachvollziehen, vielleicht hast Du es ja schon gelöst.


    Was mir aufgefallen ist, dass der Warenkorb nun auf dem Desktop nicht richtig angezeigt wird, die Tabellenzellen stehen auf display: block;.
    Dieses CSS liegt in der user.css des vmbeez-Templates.


    Auch die Produktanzeige in der mobilen Ansicht überlagert sich.


    Vielleicht macht es Sinn, mit einem echten VirtueMart-Template wie dem Horme Free von Olympianthemes anzufangen. Da stimmt schon alles und man kann dann langsam eigene Änderungen einbauen.


    Grüße
    Stefan

    Hallo Stefan,


    ich habe inzwischen Screenshots von "meinem Problem" machen können.



    Das CSS in der user.css ist noch vom rumprobieren übrig geblieben, hat bei mir allerdings garnix verändert.


    Wenn ich das Template ändere, dann muss ich gegebenenfalls die Modulpositionen der Module anpassen, aber sonst funktioniert alles andere weiter, oder? Ich kann ja auch jederzeit wieder zum ursprünglichen Template zurück, wenn ich die Modulpositionen wieder ändere, oder?


    Heißt das, dass ich da für Handys keine extra Ansicht/Erweiterung mehr brauche?


    Ich befürchte aktuell, dass die drei Fehler vom Mobile Joomla kommen, ich weiß aber eben nicht woher sie stammen bzw. wo ich das ändern könnte...


    Ist das das Template, das Du meinst:


    https://www.olympianthemes.com…-virtuemart-template.html


    Gibt es da auch die Möglichkeit das Menü, wie bisher, auf der Linken Seite zu haben?


    Viele Grüße - Harald

    Hallo Harald,


    ich würde eine Spiegelung machen, neuer Ordner, neue Datenbank.
    Dort ein Akeeba-Backup oder dergleichen der aktuellen Installation anlegen, Template wechseln.


    Dann sind beide Shops auf gleichem Stand und Du kannst probieren. Am Anfang gleich ein Backup anlegen und zwischendurch auch immer alle paar Stunden.


    Erweiterungen für mobile Ansicht sind meistens Schrott, weil sie nicht alle Details eines jeden Template kennen. Alle unnötigen Erweiterungen vor der Spiegelung rauswerfen. Vorher Backup.


    Ja, das Horme Free meine ich. Menü auf der linken Seite geht da auch, man kann das mod_virtuemart_categories Modul dafür nehmen. Oder selbst ein Menü anlegen.


    Grüße
    Stefan

    Hallo Stefan,


    ein Menü habe ich schon. Ich habe aber bisher bei den Modulpositionen nicht sehen können, ob man das Menü und die Module eben auch links anzeigen lassen kann...ist diese Einstellung dann im Stil des Templates, so wie bei Beez?


    Viele Grüße - Harald

    Hallo Stefan,


    grundsätzlich funktioniert es jetzt mit dem neuen Template wie gewünscht.


    Allerdings gibt es noch ein Problem mit den Feldern Preisnachlass und Betrag, diese Felder überschneiden sich bei Versandart und Zahlungsart. Ich schick Dir mal einen Screenshot dazu mit.


    Vielleicht kannst Du mir noch sagen woran das liegt bzw. wo ich das ändern kann.



    Viele Grüße - Harald

    Hallo Harald,


    ich verändere den OPC meistens ein wenig mit CSS, damit er noch weniger anzeigt. Dieses könnte auch Dir helfen:



    payment-row ist für die Zahlart. blank-row sind leere Zeilen für mehr Abstand, die ich zu groß finde.
    col-discount ist der Preisnachlass.
    Das Ganze als Media Query unterhalb von 767px, damit der Warenkorb auf dem Desktop nicht beeinflusst wird.


    Den Preisnachlass kann man im OPC auch ganz ausschalten. Das mache ich meistens.


    Grüße
    Stefan