Post request vom Plugin an eigenen Controller?

Shopware 6 (German)
1

Hallo, ich habe ein JavaScript Plugin entwickelt, welches unter Testplugin/src/resources/app/storefront/src/test-plugin/test-plugin.plugin.js liegt, entwickelt. Dieses soll bei bestimmten Benutzerinteraktionen Daten an einen eigenen Controller schicken. Der Controller lässt sich auch aufrufen und scheint zu funktionieren. Nun stehe ich vor der Frage, wie ich an den Controller Daten sende.

Ich wollte es mittels $.post probieren, allerdings scheint Shopware die Ajax Funktion zu deaktivieren. Ich habe anschließend den httpclient probiert, allerdings verstehe ich die Syntax nicht genau und weiß auch nicht, worauf dieser genau basiert. Wie kann ich also von der Plugin.js Daten mittels JavaScript an den Controller schicken?

Vielen Dank vorab.

2

Eine Möglichkeit, die Post-Parameter an den Controller zu senden, ist die Verwendung von this.pluginService.httpClient.post('/my-controller-route', postParams). Dies hat bei mir gut funktioniert. Ich habe ein vollständiges Beispiel in einem Artikel auf meinem Blog: https://shopwarian.com/how-to-send-a-post-request-to-the-controller/

Ich hoffe, das hilft…

3

Vielen Dank für die Rückmeldung. Ich habe allerdings die Plugin Struktur in dem folgenden Format:

import Plugin from 'src/plugin-system/plugin.class';
import HttpClient from 'src/service/http-client.service';
export default class ExamplePlugin extends Plugin {
init() {
	window.addEventListener('scroll', this.onScroll.bind(this));
	//this._client = new HttpClient();
	const postParams = new FormData();
	postParams.append('url', 'aloha');
	postParams.append('test', 'veloha');
	//post the data to the controller
	var httpClient = new HttpClient(window.accessKey, window.contextToken);
	httpClient.post('/trackURL', postParams).then(response => {
		//get the response from the controller
		const res = Shopware.Classes.ApiService.handleResponse(response);
		console.log(res);
	});
//success notification
// this.fetch();
}

Dann erhalte ich folgenden Fehler: TypeError: (intermediate value).post(…).then is not a function

Kann ich auf den httpClient auch ohne Probleme aus dem Plugin zugreifen?

Ich habe den Code jetzt angepasst zu:

import HttpClient from 'src/service/http-client.service';
export default class ExamplePlugin extends Plugin {
init() {
	var loadEnd = function(responseText) {
		console.log(responseText);
	};
	window.addEventListener('scroll', this.onScroll.bind(this));
	//this._client = new HttpClient();
	const postParams = new FormData();
	postParams.append('url', 'aloha');
	postParams.append('test', 'veloha');
	//post the data to the controller
	var httpClient = new HttpClient(window.accessKey, window.contextToken);
	httpClient.post('/trackURL', postParams,loadEnd);

Nun erhalte ich folgenden Fehler: The provided CSRF token is not valid (403 Forbidden). Wie kann ich in einem Plugin auf den CSRF token zugreifen und diesen übermitteln?

4

Der Token wird im Formular normalerweise mitversendet.
Da in den FormData allerdings keiner Vorhanden ist kann auch selbiger nicht mitgeschickt werden.

In der Form muss es diesen data-form-csrf-handler="true" geben. dann sollte der csrf token beim Submit mit übertragen werden. Allerdings garantiert das noch nicht gleich das der Token auch Valide ist.