STEP-5 Creating Plugin and Axios request

Create Magento App Create ScandiPWA App User Manual GitHub

Search…

​
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
import axios from 'axios';
​
import ContentWrapper from 'Component/ContentWrapper';
​
export const VERSION_ROUTE = '/scandipwa/version';
​
const getVersion = (instance) => {
    axios.get(VERSION_ROUTE).then((response) => {
        instance.setState({ version: response.data });
        instance.forceUpdate();
    });
};
​
const state = (original) => ({
    ...original,
    version: ''
});
​
const componentDidMount = (args, callback, instance) => {
    callback(...args);
    getVersion(instance);
};
​
const renderCopyrightContent = (args, callback, instance) => {
    const { version } = instance.state;
​
    return (
        <>
            { callback(...args) }
            <ContentWrapper
              mix={ { block: 'Footer', elem: 'CopyrightContentWrapper' } }
              wrapperMix={ { block: 'Footer', elem: 'CopyrightContent' } }
              label=""
            >
                <span block="Footer" elem="Copyright">
                    { version }
                </span>
            </ContentWrapper>
        </>
    );
};
​
export default {
    'Component/Footer/Component': {
        'member-function': {
            componentDidMount,
            renderCopyrightContent
        },
        'member-property': {
            state
        }
    }
};
​
Useful Materials
Axios 
Extension Plugins Templates​

STEP-4 Creating ScandiPWA Extension with additional dependencies

Next - About

Support

Last modified 11mo ago

Copy link