STEP-11 SocialShare for CategoryPage
In this step we going to create SocialShare for Category page
​STEP-11​
Let's repeat what we did with ProductAction Component for CategoryPage
  1. 1.
    Create CategoryPageContainerMSTP.plugin.js at SOURCE/plugin
scandipwa-socialshare/src/plugin/CategoryPageContainerMSTP.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
'Route/CategoryPage/Container/mapStateToProps': {
12
function: mapStateToProps
13
}
14
};
15
​
Copied!
2. Create CategoryPageComponent.plugin.js at <SOURCE>/plugin
scandipwa/packages/scandipwa-socialshare/src/plugin/CategoryPageComponent.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 renderItemsCount = (args, callback, instance) => {
9
const [isVisibleOnMobile] = args;
10
​
11
return (
12
<>
13
{ callback.apply(instance, args) }
14
{ renderSocialShare(instance.props, isVisibleOnMobile) }
15
</>
16
);
17
};
18
​
19
const renderSocialShare = (props, isVisibleOnMobile) => {
20
const {
21
category: {
22
description
23
},
24
socialShare: {
25
socialShareConfig: {
26
enabled, categoryPage, rounded, size
27
}, providers
28
}, device
29
} = props;
30
​
31
if (isVisibleOnMobile && !device.isMobile) {
32
return null;
33
}
34
​
35
if (!isVisibleOnMobile && device.isMobile) {
36
return null;
37
}
38
​
39
if (!enabled && !categoryPage) {
40
return null;
41
}
42
​
43
return (
44
<Suspense fallback={ null }>
45
<SocialShare
46
isRounded={ rounded }
47
size={ size }
48
providers={ providers }
49
quote={ description }
50
/>
51
</Suspense>
52
);
53
};
54
​
55
export const config = {
56
'Route/CategoryPage/Component': {
57
'member-function': {
58
renderItemsCount
59
}
60
}
61
};
62
​
63
export default config;
Copied!
3. Resolve style issue by modifying SocialShare.style.scss
scandipwa-socialshare/src/component/SocialShare/SocialShare.style.scss Line: 12 - 21
1
.CategoryPage {
2
&-LayoutButtons {
3
margin-bottom: 10px;
4
min-width: 100px;
5
}
6
​
7
&-Miscellaneous {
8
grid-template-columns: unset;
9
}
10
}
11
​
Copied!
4. Restart the frontend and check the outcome
Mobile
​
​
Desktop
Could not load image
Copy link