Zusätzliche Klicks im Checkout Prozess umgehen

[fabian_perrey]

Hallo,

beim Testen des Checkout Prozesses ist uns folgendes aufgefallen:

Bei Kundendaten, Versand und Bezahlung wird ein submit zum Bestätigen der Eingaben verlangt. Nach etwas Testen (durch Unbedarfte) wurde deutlich, dass das, obwohl techn. ja einwandfrei, sehr unitiutiv ist.

Mal abgesehen davon, dass zusätzliche Klicks für einen User wenn möglich ja immer zu vermeiden sind, wurde das submit gerade bei Versand und Bezahlung meistens übersehen.

Im Shop wird ja per Einstellung eine Versand-/Bezahlmethode voreingestellt, was ja anfürsich super ist, da man im Warenkorb gleich die vollen Kosten sehen kann und das mit den Neuregelung seit 2104 auch nötig ist.
Durch die Voreinstellung werden beim Checkout Prozess die beiden Schritte dann aber logischerweise als "valid" markiert, heißt der "Weiter" Button wird angezeigt. Somit befinden sich 2 Buttons (Eingabe bestätigen und Weiter) auf der Seite.

Meistens war es dann so, dass ein Tester nach Auswahl einer anderen Versand-/Bezahlmethode auf den "Weiter" Button gedrückt hat, mit dem Ergbnis, dass die gewählte Methode nicht übernommen wurde.

Hier wäre eine Lösung mit einem Klick (Login und Weiter, Versand/Bezahlung übernehmen und Weiter) sicher besser.

Beste Grüße
FP

[supportteam]

Besten Dank für den Verbesserungsvorschlag. Das aktuelle Verhalten liegt primär an der Flexibilität, die MERCONIS bietet (u. a. hinsichtlich beliebiger Contao-Formulare, die einfach im Checkout eingesetzt werden können). Ein kleines Beispiel: Wählt man eine Zahlungsoption aus, für die Zusatzeingaben erforderlich sind (wie z. B. die Einzugsermächtigung), so darf man nach der Bestätigung der Auswahl nicht automatisch auf die nächste Seite geleitet werden, da man ja erst noch in dem dann erscheinenden, speziellen Zusatzformular, die zusätzlichen Eingaben vornehmen muss.

Aber: Per Javascript bieten sich diverse Möglichkeiten, wie auf das Verhalten Einfluss genommen werden kann, die aber nicht bereits standardmäßig im Auslieferungszustand eingerichtet sind. So können Sie bspw. im Falle von Kundeneingaben (Änderung eines Formulars wie z. B. Auswahl einer anderen Versandoption etc.) dann unpassende Buttons ausblenden und/oder den tatsächlichen Bestätigen-Button hervorheben uvm.

[amimoto]

Hallo,
ich stehe gerade vor genau dem Problem: Meinem Kunden sind die "Bestätigen" Buttons ein Dorn im Auge!

Die Javascript-Lösung birgt meines Erachtens nach die Gefahr, daß Formular-Daten nicht sauber übergeben werden, weil der User zu schnell weiter klickt. Wenn ich ein Formular per Javascript absende, kann der User ja in der Zwischenzeit schon auf den "Weiter" Button klicken!?

Wie kann man das umgehen?

[supportteam]

Das verhindern Sie einfach durch ein Overlay. In der aktuellen MERCONIS-Version ist dies bereits exakt so realisiert.

[amimoto]

Hallo.
Ich habe die Javascript Konfiguration vom Theme "London" übernommen, damit geht es nun.

[amimoto]

Hallo.
Bei den Kundendaten gibt es immer noch einen Button zum Bestätigen der Eingaben, den wir gerne umgehen würden. Wie wäre die Vorgehensweise?
Da die Buttons bei den Versand- und Zahlungsoptionen eine eigene Javascript Klasse verwenden, kann man das ja nicht 1:1 übernehmen!?

[supportteam2]

Das Umgehen des Bestätigungsbuttons im Kundendatenformular lässt sich nicht direkt mit dem Umgehen des Bestätigungsbuttons bei den Zahlungs- und Versandoptionen vergleichen. Dort wird per Klick eine Zahlungsoption als Radio-Button gewählt, was man natürlich als Auslöser für das automatische Absenden des Formulars nutzen kann, wodurch dann der Bestätigungsbutton entfallen kann. Bei den Kundendaten hingegen handelt es sich um ein umfangreiches Formular, bei dem der Kunde zwangsläufig durch einen expliziten Klick bestätigen muss, dass seine Eingaben verarbeitet werden sollen. Den Bestätigungsbutton kann man an dieser Stelle also rein logisch nicht umgehen.

Um bei den Kundendaten einen Klick einzusparen, könnte man – sofern die Eingaben erfolgreich validiert werden konnten – direkt zum nächsten Checkout-Schritt springen. Das können Sie z. B. im Template lösen, indem Sie dort eine Erfolgsmeldung für die Speicherung der Kundendaten nicht ausgeben, sondern sie zum Anlass für einen serverseitigen Redirect auf die nächste Seite verwenden.

[amimoto]

Vielen Dank, das habe ich so umgesetzt und es scheint zu funktionieren. Deutlich einfacher als gedacht...

[Smartliner]

Hmm, klingt logisch, aber so fit bin ich leider nicht der Programmierlogik.
Kann mir jemand sagen, wie ich bei einer Erfolgsmeldung direkt auf die nächste Seite springe.

Im Formular würde ich denn Button dann ändern auf "Bestätigen und Weiter" ändern.
Mir ist aber nicht ganz klar, wo ich im Template "template_cart--big_include_customer_data_form.html5 "
die Anpassung vornehmen kann.

Gruss
Frank

[supportteam2]

Hallo,

im Template "template_cart--big_include_customer_data_form.html5" gibt es eine Stelle, die ungefähr so aussieht:

Code: Alles auswählen

<?php
   if (ls_shop_msg::checkMsg('customerDataSubmitted', 'customerDataSubmitted')) {
      ?>
      <p class="success"><?php echo $GLOBALS['TL_LANG']['MSC']['ls_shop']['miscText118']; ?></p>
      <?php
   }
?>


Anstatt die Erfolgsmeldung anzuzeigen, kann man eine Weiterleitung durchführen, indem man folgendes ergänzt/ändert:

Code: Alles auswählen

<?php
   if (ls_shop_msg::checkMsg('customerDataSubmitted', 'customerDataSubmitted')) {
      // WEITERLEITUNG
      $this->redirect($urlShippingSelection);

      // =>
      // Die Ausgabe der Erfolgsmeldung kann dann entfernt werden:
      ?>
      <p class="success"><?php echo $GLOBALS['TL_LANG']['MSC']['ls_shop']['miscText118']; ?></p>
      <?php
      // <=
   }
?>


Die verwendete Weiterleitungs-URL "$urlShippingSelection" ist die URL, die auch als Sprungziel für den "Weiter"-Button verwendet wird.

Die Beschriftung des Buttons lässt sich im Contao-Backend im Formulargenerator anpassen, da das Kundendaten-Erfassungsformular ein normales Contao-Formular ist (z. B. MERCONIS: Customer data (standard customers)/Kundendatenerfassung (Standardkunden)).