STEP-5 Creating Plugin and Axios request
​
  1. 1.
    As an example of using Axios we going to display ScandiPWA version at Website Footer For that create FooterComponent.plugin.js file in [EXTENSION]/src/plugin folder
scandipwa/packages/@scandipwa/version/src/plugin/FooterComponent.plugin.js
1
import axios from 'axios';
2
​
3
import ContentWrapper from 'Component/ContentWrapper';
4
​
5
export const VERSION_ROUTE = '/scandipwa/version';
6
​
7
const getVersion = (instance) => {
8
axios.get(VERSION_ROUTE).then((response) => {
9
instance.setState({ version: response.data });
10
instance.forceUpdate();
11
});
12
};
13
​
14
const state = (original) => ({
15
...original,
16
version: ''
17
});
18
​
19
const componentDidMount = (args, callback, instance) => {
20
callback(...args);
21
getVersion(instance);
22
};
23
​
24
const renderCopyrightContent = (args, callback, instance) => {
25
const { version } = instance.state;
26
​
27
return (
28
<>
29
{ callback(...args) }
30
<ContentWrapper
31
mix={ { block: 'Footer', elem: 'CopyrightContentWrapper' } }
32
wrapperMix={ { block: 'Footer', elem: 'CopyrightContent' } }
33
label=""
34
>
35
<span block="Footer" elem="Copyright">
36
{ version }
37
</span>
38
</ContentWrapper>
39
</>
40
);
41
};
42
​
43
export default {
44
'Component/Footer/Component': {
45
'member-function': {
46
componentDidMount,
47
renderCopyrightContent
48
},
49
'member-property': {
50
state
51
}
52
}
53
};
54
​
Copied!
Useful Materials Axios Extension Plugins Templates​
Last modified 1mo ago
Copy link