Support Formulare (Kontaktformular) per Ajax senden

Shopware 5 Programmierung
1

Hallo liebe Developer-Community,

wir versuchen testweise ein Kontaktformular per jQuery Ajax Funktion zu senden, damit es kein “redirect” oder reload der aktiven Formularseite gibt:
 

//Test-Daten
formData = "forceMail=&anrede=Herr&vorname=Max&nachname=Muster&email=test%40demo.de&telefon=06666777777&betreff=Test&kommentar=TestTestTest&first_name_confirmation=&__csrf_token=Bzt3rjC8wDT9x176sOzhLFyKr4mUmF";

formUrl = "https://demo.de/shopwaredemo/ticket/index/id/5";

// Formular per AJAX senden
$.ajax({
	type: 'POST',
	data: formData,
	url: formUrl,
	//dataType: 'jsonp'
	//encode: true,
	success: function (result) {
							
	   //Aktionen bei Erfolg
	
	   console.log('done: '+result);
	}
});

//Die Console wirft den vollständigen Inhalt von:
//

 

Ajax funktioniert leider nur zum Teil. Der Inhalt des “Forms”-Controllers (bzw. seines indexAction Methode) wird ausgeworfen nur leider
keine E-Mail versendet. Als ob die Methode “commitForm()” in dem “Forms.php”  Controller gar nicht zum Einsatz kommen würde.

Habt Ihr eventuell ähnliche Erfahrungen gemacht oder was könnte es für eine Ursache haben, dass das E-Mail Senden im Ajax klemmt :slight_smile:

Best, Konrad
 

2

Da kann vieles schieflaufen. 

  • Das CSRF-Token ist bei jedem anders sonst schützt es ja nicht vor CSRF Attacken. Daher kannst du das nicht einfach mitgeben
  • Schau mal in der Entwickler-Konsole (Netzwerk-Tab), ob die Daten überhaupt korrekt übermittelt werden
  • Wie sieht die Antwort denn genau aus? Vielleicht steht ja eine Fehlermeldung über dem Formular. Schau dir den Quelltext mal genau an oder lass ihn Rendern.

Abgesehen davon, dass der Code nicht sehr schön ist. Die Formdata kannst du auch als Array übergeben. Das muss nicht so komisch kodiert sein. Das macht jQuery selber.

Viele Grüße

1 „Gefällt mir“
3

Hi simkli,

die Daten sind nur als Test gedacht, sie werden natürlich dynamisch aus dem Form-Element ermittelt, incl des immer aktuellen CSRF, :wink:

var me = this,
$form = me.$el.closest('form'), //$el ist der submit Button
formUrl = $form.prop('action'),
formData = $form.serialize();

Es handelt sich auch nur um einen relevanten Code-Abschnitt - den Aufruf von $ajax.

Das “result” ist etwas lang - wie erwähnt - die vollstädige index-Seite des forms Controllers. Hier ist es (es handelt sich natürlich um den Demoshop SW 5.4.1:
Ups, geht nicht, der Quellcode ist zu lang.

...









Um BOGX Shopware Demoshop 5.4x in vollem Umfang nutzen zu können, empfehlen wir Ihnen Javascript in Ihrem Browser zu aktiveren.




....









Bitte füllen Sie alle rot markierten Felder aus.




Kontaktformular
Schreiben Sie uns eine eMail. Wir freuen uns auf Ihre Kontaktaufnahme.


Kontaktformular






Anrede*FrauHerr






















Die mit einem * markierten Felder sind Pflichtfelder.

Senden










...


....

 

Edit1: Ja, die DAten werden korrekt übermittelt. Im Network > Headers, Preview, Response, Cookies, Timing sieht alles gut aus. Kein Fehler zu sehen.

Edit2: Rein vorsorglich: die Parameter "dataType = “json” oder “jsonp” sind auskommentiert, weil sie gar nicht funktioniert haben.

Best, Konrad

4

Schau mal: Das sieht man direkt im Quellcode von dir:

Bitte füllen Sie alle rot markierten Felder aus.

Und dann schau dir mal die Felder an, die die Klasse „has–error“ haben. Das sind so gut wie alle. => Die Daten kommen nicht an.

Edit1: Ja, die DAten werden korrekt übermittelt. Im Network > Headers, Preview, Response, Cookies, Timing sieht alles gut aus. Kein Fehler zu sehen.

Das glaube ich dir nicht Sticking-out-tongue Da hast du wsl. etwas falsch interpretiert. Ganz wichtig sind die „Query String Paramters“ (ganz unten bei einem Request > Headers in den Chrome Developer Tools). Kann man die Daten hier sehen? Vergleiche das mal, wenn du das Formular normal absendest. Das muss genau gleich aussehen.

Der Fehler liegt wsl. daran: 

formData = $form.serialize();

Das ist Quatsch. Für Post Requests nimmst du besser $form.serialize Array ();  Wink

Viele Grüße

1 „Gefällt mir“
5

Hallo,

das Formulare von Shopware über Ajax zu senden ist glaub technisch gesehen mit Shopware derzeit nicht möglich, wenn man sich die Formularspeicherung etc. ansieht (in der Forms.php), da hapert es glaub ich nicht nur an dem Versand der E-Mail, sondern auch schon eher (als Antwort dürftest du glaub ich die komplette Seite zurückerhalten statt nur einer Erfolgsmeldung, siehe dein Code und genauso sind glaub ich einige Variablen, die er beim Speichern des Formulars braucht, über einen Ajax-Request nicht gesetzt oder setzbar). Einfacher wäre es wahrscheinlich, wenn du dir eine eigene Abspeicherung des Formulars zusammenbaust.

Grüße

Sebastian

1 „Gefällt mir“
6

Hi Jungs,

Es ist erstmal ein grober Test gewesen, ob der einfache bzw. der übliche Weg (die URL aus dem Formular an $ajax zu übergeben) überhaupt funktioniert,
und ob zumindest die E-Mail auf diesem (einfachen) Weg gesendet wird. Die Feinheiten würden später kommen.

In den Headers, ob mit $form.serialize Array ();  oder mit $form.serialize(); sehe ich keine Unstimmigkeiten - die Email wird leider nicht abgefeuert:

General
Request URL:https://bogx.de/shopwaredemo54/ticket/index/id/5
Request Method:POST
Status Code:200 
Remote Address:94.130.55.30:443
Referrer Policy:no-referrer-when-downgrade

Response Headers
cache-control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0, no-cache, private
content-encoding:gzip
content-length:7911
content-type:text/html; charset=UTF-8
date:Fri, 23 Mar 2018 16:14:50 GMT
expires:Thu, 19 Nov 1981 08:52:00 GMT, -1
pragma:no-cache, no-cache
server:nginx
set-cookie:session-1=21e840ae90b845856ba86b8b2a057b0c3849f21febd70998ae1f63918407df6e; path=/; secure; HttpOnly
status:200
vary:Accept-Encoding

Request Headers
:authority:bogx.de
:method:POST
:path:/shopwaredemo54/ticket/index/id/5
:scheme:https
accept:application/json, text/javascript, */*; q=0.01
accept-encoding:gzip, deflate, br
accept-language:de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
cache-control:no-cache
content-length:181
content-type:application/x-www-form-urlencoded; charset=UTF-8
cookie:__csrf_token-1=Bzt3rjC8wDT9x176sOzhLFyKr4mUmF; session-1=21e840ae90b845856ba86b8b2a057b0c3849f21febd70998ae1f63918407df6e; x-ua-device=desktop; lastCheckSubscriptionDate=23032018
origin:https://bogx.de
pragma:no-cache
referer:https://bogx.de/shopwaredemo54/kontakt
user-agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
x-csrf-token:Bzt3rjC8wDT9x176sOzhLFyKr4mUmF
x-requested-with:XMLHttpRequest

Form Data
forceMail:
anrede:Herr
vorname:Konrad
nachname:Borucinski
email:info@bogx.de
telefon:060737252201
betreff:Test
kommentar:dthzjfzujkftilk
__csrf_token:Bzt3rjC8wDT9x176sOzhLFyKr4mUmF

 

Also muss vermutlich, wie Sebastan schreibt, mehr Aufwand betrieben werden :frowning:

 

EDIT: Habe die falschen Daten für das Result eingefügt - sie stammen aus dem leeren Formular - Sorry. Die sind sonst alle befüllt.

mit besten Grüßen
Konrad

7

Hallo,

ja das Senden an den Formular - Controller bzw. dessen Index-Controller ist nicht das Problem, das geht auch problemlos und recht einfach. Nur leider liegt das Problem im Index-Controller bzw. dessen Umsetzung, die scheinbar Ajax-Speicherungen nicht unterstützt, weil einige Variablen, die man nicht setzen kann, das ganze blockieren (das sieht man, wenn man als “Quick-Debug” mal schnell die einzelnen Variablen sich in der Forms.php ausgeben lässt, sowohl normal und über Ajax).

Ein eigenes Speichern kann natürlich auch viele Probleme mit sich bringen, wenn man alle Formulare und eventuelle Pluginerweiterungen berücksichtigen muss, wäre also auch nicht unbedingt der beste Weg. Am einfachsten wäre es, einfach den Normalzustand zu belassen.

Grüße

Sebastian

8

Hi Jungs,

habe es herausgefunden, warum keine E-Mail gesendet wird.
Das „Würmchen“ sitzt in der Methode „handleFormPost“ von Forms.php

Habe das „Würmchen“ auskommentiert und nun werden die E-Mails abgefeuert und zugestellt :slight_smile:

    private function handleFormPost($formId)
    {
		/**
        if (count($this->_errors) || empty($this->Request()->Submit)) {
            return;
        }
		*/
		
        $this->commitForm();

		
        $this->redirect(
            [
                'controller' => 'ticket',
                'action' => 'index',
                'sFid' => $formId,
                'success' => 1,
            ]
        );
		
    }

Es fehlt also dem $ajax lediglich das " Submit" wie ich mir schon von Anfang an gedacht habe.
Da sind wird vielleicht einer „einfachen Lösung“ einen Schritt näher :wink:

mit besten Grüßen
Konrad

 

9

Hallo,

nun gut, das nicht updatesichere Ändern von Code in der Forms.php ist jetzt nicht wirklich eine Lösung, da Sie ja beim nächsten Update sofort wieder überschrieben werden würde. Ich meinte ja oben schon, das eigentlich alle Request-Parameter beim Absenden des Formulars über Ajax nicht gesetzt werden und deshalb funktioniert es nicht. Die Parameter kannst du aber leider auch nicht als Parameter beim Ajax - Request mitgeben, soweit ich weiss. 

Grüße

Sebastian

10

Hallo Sebastian?

ich dachte eigentlich, dass wir unter uns sind? Wir haben noch keine Lösung, sondern die Ursache für das Problem gefunden :wink:
Also keine Panik - wir werden NICHT die Core-Dateien bzw. Controller von Shopware für die endgültige Lösung anfassen.

Für Mitlesende: BITTE die Core-Dateien nur zum Testen und nur wegen Ursachenforschung ganz sanft (mit Kommentierungen) anfassen
und danach sofort in den Ursprungszustand bringen.

Wir sind noch beim GROBEN Testen aber auf einem guten Weg zur Lösung - ich möchte mich deshalb ganz herzlich bei DIR und simkli bedanken.
Es hat uns sicherlich etwas geholfen und ich weiss Eure wervolle Zeit sehr zu schätzen - nochmal DANKE SCHÖN! 

mit besten Grüßen
Konrad
 

1 „Gefällt mir“
11

@Konrad‍ ganz schön destruktiv die Beiden. Respekt dass Du da die Nerven behältst.

Hast Du es am Ende lösen können?