Admin Entwicklung: Controller bei Klick auf Button aufrufen (AJAX Call)

Shopware 6 (German) Programmierung
1

Hallo,

 

Wie bekomme ich es hin, bei einem Klick auf einen Button in einem eigenen Admin Module einen bestimmten Controller bzw. eine entsprechende Route aufzurufen?

Konkret wünsche ich mir folgendes:

    Verbindung testen

Und auf der entsprechenden Page im eigenen Module:

 

Component.register('testmodule-detail'), {

    // ...

    methods: {

        onClickTestConnection() {
            // HIER ein Ajax Call auf einen bestimmten Controller
        }
    }
});

 

jQuery ist nicht möglich oder? Welche Möglichkeiten habe ich?

 

Vielen Dank und viele Grüße
Dennis

2

Hi,
ich habe gerade das gleiche Thema. Mit fetch kann man den Zugriff starten, allerdings fehlt mir noch die übergaben der Authentification Header.

 

 

            fetch('/api/v1/_action/controller/my-api-action', { headers: { "Content-Type": "application/json; charset=utf-8" }})
            .then(res => res.json()) // parse response as JSON (can be res.text() for plain response)
            .then(response => {
                // here you do what you want with response
            })
            .catch(err => {
                console.log("u")
                alert("sorry, there are no results for your search")
            });

 

3

Morgen zusammen,

ihr könnt euch unseren vorkonfigurierten HTTP Client über unseren „init“-Container rausziehen:

const httpClient = Shopware.Application.getContainer('init').httpClient;

Viele Grüße,
Stephan  Shopware

4

@Stephan Pohl schrieb:

Morgen zusammen,

ihr könnt euch unseren vorkonfigurierten HTTP Client über unseren „init“-Container rausziehen:

const httpClient = Shopware.Application.getContainer(‚init‘).httpClient;

Viele Grüße,
Stephan  Shopware

Gibt es dazu eine Doku zur Verwendung?

 

Wie würde ich denn als praktisches Code-Beispiel einen Call auf meinen eigenen Controller hinbekommen?

index.js:

onClickTestConnection() {
    var httpClient = Shopware.Application.getContainer('init').httpClient;

    
    var connection = {
        'dbName': this.testConfiguration.dbName,
        'dbHost': this.testConfiguration.dbHost,
        'dbUser': this.testConfiguration.dbUser,
        'dbPassword': this.testConfiguration.dbPassword,
        'dbPort': this.testConfiguration.dbPort
    };

    // ... was nun? Wie kriege ich den POST Call auf meinen Controller hin? Wo muss ich die connection Parameter anfügen?

    httpClient.post('/_action/admin/testcontroller/testconnection'); // was noch?
}

 

TestController.php:

// ...

class TestController extends AbstractController
{

    /**
     *
     * @RouteScope(scopes={"administration"})
     * @Route("/api/v{version}/_action/admin/testcontroller/testconnection", name="admin.testcontroller.testConnection", options={"seo"="false"}, methods={"POST", "GET"})
     */
    public function testConnection(Request $request)
    {

        // wie rufe ich die Parameter ab?


    }
}

 

5

EDIT:

 

ich habe nun versucht meine connection als zweiten Parameter an den Post zu hängen:

var httpClient = Shopware.Application.getContainer('init').httpClient;


var connection = {
    'dbName': this.testConfiguration.dbName,
    'dbHost': this.testConfiguration.dbHost,
    'dbUser': this.testConfiguration.dbUser,
    'dbPassword': this.testConfiguration.dbPassword,
    'dbPort': this.testConfiguration.dbPort
};

httpClient.post("/_action/admin/testcontroller/testconnection", connection);

 

In der Netzwerkkonsole wirft der Aufruf einen 401: " The resource owner or authorization server denied the request. Detail: Missing „Authorization“ header "

 

Anschließend erfolgt ein Aufruf auf „Token“ der mir den API Token zurückliefert und danach gibt es erneut eine Request auf meine testconnection die dann mit Code 200 erfolgreich ist.

 

Wie kriege ich es also hin, dass mir direkt beim ersten Request auf testconnection ein Token erzeugt wird, so dass ich nur einen Call habe und keine 401 Fehler?

6

ich habe das ganze mit dem Beispiel aus dem Tutorial gelöst.
Shopware 6: Basic handling of js services in the administration
 

Aber auch da den Effekt mit 401 Header