STEP-9 render Plugins and MSTP Plugin, Component creation
Now we going to create plugins for the Product Page.
​STEP-9​
We want to display our social share under the product short description. Product short description rendering is located inside the ProductAction component, so at first, we going to plugin into ProducAction Container mapStateToProps adding our redux state, and then into Short description render.
  1. 1.
    In <SOURCE>/plugin create file ProductActionContainerMSTP.plugin.js
scandipwa-socialshare/src/plugin/ProductActionContainerMSTP.plugin.js
1
const mapStateToProps = (args, callback, instance) => {
2
const [state] = args;
3
​
4
return {
5
...callback(...args),
6
socialShare: state.SocialShareReducer.socialShare
7
};
8
};
9
​
10
export default {
11
'Component/ProductActions/Container/mapStateToProps': {
12
function: mapStateToProps
13
}
14
};
Copied!
2. In <SOURCE>/plugin create file ProductActionComponent.plugin.js
scandipwa-socialshare/src/plugin/ProductActionComponent.plugin.js
1
import { lazy, Suspense } from 'react';
2
​
3
export const SocialShare = lazy(() => import(
4
/* webpackMode: "lazy", webpackChunkName: "social-share" */
5
'../component/SocialShare'
6
));
7
​
8
const renderShortDescription = (args, callback, instance) => (
9
<>
10
{ callback.apply(instance, args) }
11
{ renderSocialShare(instance.props) }
12
</>
13
);
14
​
15
const renderSocialShare = (props) => {
16
const {
17
socialShare: {
18
socialShareConfig: {
19
enabled, productPage, rounded, size
20
}, providers
21
},
22
product: { name }
23
} = props;
24
​
25
if (!enabled && !productPage) {
26
return false;
27
}
28
​
29
return (
30
<section
31
block="ProductActions"
32
elem="Section"
33
mods={ { type: 'social' } }
34
>
35
<Suspense fallback={ null }>
36
<SocialShare
37
isRounded={ rounded }
38
size={ size }
39
providers={ providers }
40
quote={ name }
41
/>
42
</Suspense>
43
</section>
44
);
45
};
46
​
47
export const config = {
48
'Component/ProductActions/Component': {
49
'member-function': {
50
renderShortDescription
51
}
52
}
53
};
54
​
55
export default config;
56
​
Copied!
3. Using console navigate to scandipwa-socialshare and execute scandipwa create component SocialShare
4. Edit render method of the newly created component
scandipwa-socialshare/src/component/SocialShare/SocialShare.component.js line 11 - 17
1
render() {
2
return (
3
<div block="SocialShare">
4
{ __('SocialShare') }
5
</div>
6
);
7
}
Copied!
5. Go to the frontend product page and check if the content is rendered.
Could not load image
Copy link