Shopware 6 - Tips, tricks and how to's

How to send a post request to the controller

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:

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:

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

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:

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:

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:

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:

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:

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.