How to send a post request to the controller

08.04.202108.04.2021 by Jan Schmidak

In one of the previous posts, we took a look at working with the post and get requests in a controller. Sending the post data from a HTML form is a well known case, but how can we send some post requests to a controller from the javascript based Shopware 6 backend?

Well, we are going to take a look at precisely that in this article. Or more specifically, we are going to learn, how to create post parameters in a javascript plugin, used in the Shopware 6 administration, how to send these parameters to a controller, how to create a response in a controller and how to handle this response in the javascript plugin. So the javascript plugin will be the focus of this article, but we will also tackle the controller, as we need both of them for this to work.

First, we will have a look at the code parts and explain them a bit. Then, at the end of this article, you will see a complete example of sending and handling a post request from a javascript plugin to a controller in Shopware 6.

Creating post parameters in Shopware 6 javascript plugin

The source of your post data can be anything, not just values from a form. However, a method that has worked for me, was to actually create a new FormData object. You can then fill it with any data you want, including the values from your form. For example here, I am creating a FormData object, that is getting its values from a form, cotaining one file input and one select box:

//create post data to be sent to the controller
const postParams = new FormData();
postParams.append('file', this.selectedFile, this.selectedFile.name);
postParams.append('select', this.selectedValue);

//create post data to be sent to the controller

const postParams = new FormData();

postParams.append('file', this.selectedFile, this.selectedFile.name);

postParams.append('select', this.selectedValue);

This code is located in the index.js file of the component, that contains the form.

Sending post parameters to a controller

So now we have the post data, stored in postParam. But how can we send them to the controller? Shopware 6 contains a neat httpClient.post functionality for this. It is contained in Shopware’s plugin service. The plugin service must be injected first, so that we can use it. Here is how to inject it:

inject: [
    'pluginService',
],

inject: [

'pluginService',

The part of the code, where the controller gets called and sent the post parameters looks like this:

methods: {
    onSubmit() {

        this.pluginService.httpClient.post('/my-controller-route', postParams).then(response => {

            //success

        }).catch(() => {

            //failure

        });

    }
}

methods: {

onSubmit() {

this.pluginService.httpClient.post('/my-controller-route', postParams).then(response => {

//success

}).catch(() => {

//failure

});

}

Handling the post data in the controller

The controller, that is set up to accept POST requests on the designated route (in our case “my-controller-route”), will be able to access the parameters like this:

//get the parameters as an array
$data = $request->request->all();

//get the uploaded files
$files = $request->files->all();

//get the parameters as an array

$data = $request->request->all();

//get the uploaded files

$files = $request->files->all();

For a more detailed info, how to access data from requests in a controller, please refer to the fore mentioned article.

The more important thing for our javascript plugin is, what response do we get from the controller. It should always return a response in JSON format. This is an example of how to set up a response, that contains a variable named someResponse in it:

//response preparation
$response = new JsonResponse();

//add a variable someResponse to the response
$responseData['someResponse'} = 'The controller is happy.';

//return response to the javascript plugin, that has called this controller
$response->setData($responseData);
return $response;

//response preparation

$response = new JsonResponse();

//add a variable someResponse to the response

$responseData['someResponse'} = 'The controller is happy.';

//return response to the javascript plugin, that has called this controller

$response->setData($responseData);

return $response;

Handling the response from the controller

As the code sample, where we sent the postParams to our controller has shown, there are two possibilities, that can happen: success or failure.

In case of success, we will get a response from the controller. We can for example log it to the console:

//get the response from the controller 
const res = Shopware.Classes.ApiService.handleResponse(response); 

//log the response to the console
console.log(res);

//get the response from the controller

const res = Shopware.Classes.ApiService.handleResponse(response);

//log the response to the console

console.log(res);

In both cases, we should notify the user, what happened. For this, we will use standard Shopware 6 notifications. In order to do that, we have to first ‘mix them in’ like this:

mixins: [
    Mixin.getByName('notification')
],

mixins: [

Mixin.getByName('notification')

Now we can create the notifications. They are quite similar in format. Please note, that in case of success, we are also adding a response from the controller to the notification:

//success
this.createNotificationSuccess({
    title: this.$tc('global.default.success'),
    message: this.$tc('The operation was successful. Response from the controller was: ') + res.someResponse
});

//failure
this.createNotificationError({
    title: this.$tc('global.notification.unspecifiedSaveErrorMessage'),
    message: this.$tc('The operation has failed.')
});

//success

this.createNotificationSuccess({

title: this.$tc('global.default.success'),

message: this.$tc('The operation was successful. Response from the controller was: ') + res.someResponse

});

//failure

this.createNotificationError({

title: this.$tc('global.notification.unspecifiedSaveErrorMessage'),

message: this.$tc('The operation has failed.')

});

This is an example, how these notifications look like in the SW 6 backend:

The complete example file index.js

And this is the complete index.js file, where all the previously mentioned code is put together. It presumes, that you also have a template and stylesheet for your Shopware 6 javascript component. And that you know, how to create a javascript component for Shopware 6. If you do not know that yet, you can try the official Shopware 6 documentation.

import template from './some-component.html.twig';
import './some-component.scss';

const { Component, Mixin } = Shopware;

Component.register('some-component', {

    template: template,

    inject: [
        'pluginService',
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    mixins: [
        Mixin.getByName('notification')
    ],

    data() {
        return {
            selectedFile: null,
            selectedValue: null
        };
    },

    methods: {
        onSubmit() {

            //create post data to be sent to the controller
            const postParams = new FormData();
            postParams.append('file', this.selectedFile, this.selectedFile.name);
            postParams.append('select', this.selectedValue);

            //post the data to the controller
            this.pluginService.httpClient.post('/my-controller-route', postParams).then(response => {

                //get the response from the controller
                const res = Shopware.Classes.ApiService.handleResponse(response);
                console.log(res);

                //success notification
                this.createNotificationSuccess({
                    title: this.$tc('global.default.success'),
                    message: this.$tc('The operation was successful. Response from the controller was: ') + res.someResponse
                });

            }).catch(() => {

                //failure notification
                this.createNotificationError({
                    title: this.$tc('global.notification.unspecifiedSaveErrorMessage'),
                    message: this.$tc('The operation has failed.')
                });

            });
        }
    }

});

import template from './some-component.html.twig';

import './some-component.scss';

const { Component, Mixin } = Shopware;

Component.register('some-component', {

template: template,