Developing with Scandi
Tutorials
STEP-5 Creating Plugin and Axios request
- 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!
Last modified 1mo ago
Copy link