Fetching data with Javascript
Overview
When you develop your own plugin, you might want to fetch necessary data from the API. This guide explains how to achieve that.
Prerequisites
This guide requires you to already have a basic plugin running. If you don't know how to do this in the first place, have a look at our Plugin base guide.
While this is not mandatory, having read the guide about adding custom javascript plugins beforehand might help you understand this guide a bit further.
Fetching data
At first, we need to import the
HttpClient to use it in our JavaScript plugin. We also create a new instance of the HttpClient and assigned it to a variable in our ExamplePlugin.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import HttpClient from 'src/service/http-client.service';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
this._client = new HttpClient();
7
}
8
}
Copied!
To fetch data from the API, we now can use the
get method of the HttpClient to invoke a get request.<plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
1
import Plugin from 'src/plugin-system/plugin.class';
2
import HttpClient from 'src/service/http-client.service';
3
​
4
export default class ExamplePlugin extends Plugin {
5
init() {
6
this._client = new HttpClient();
7
​
8
this.fetchData();
9
}
10
​
11
// ...
12
​
13
fetchData() {
14
this._client.get('/widgets/checkout/info', this.handleData);
15
}
16
​
17
handleData(response) {
18
console.log(response);
19
}
20
}
Copied!
The
get method takes three arguments. The first one is the url which we want to call. In the example we are going to fetch a widget which contains some HTML. The second parameter is a callback function. It will be invoked when the API call was done. In the example below we pass in the handleData method of our plugin. The callback function then receives the response of the API call. We can now use this in our plugin to display the widget in the DOM, for example.The third parameter of the
get method is the contentType which will be sent in the request header of the API call. It is optional and by default set to be application/json.Call the Store API from the Storefront
There's an extension of the client above - the
StoreApiClient which automatically injects the correct credentials, so you can make calls from the Storefront to the Store API.It works the same as the
HttpClient:1
const client = new StoreApiClient();
2
​
3
​
4
import Plugin from 'src/plugin-system/plugin.class';
5
import StoreApiClient from 'src/service/store-api-client.service';
6
​
7
export default class ExamplePlugin extends Plugin {
8
init() {
9
this._client = new StoreApiClient();
10
​
11
this.fetchData();
12
}
13
​
14
fetchData() {
15
this._client.get('store-api/checkout/cart', this.handleData);
16
}
17
​
18
// ...
19
}
Copied!
Last modified 18d ago
Copy link
Edit on GitHub