STEP-11 SocialShare for CategoryPage

​STEP-11​
Let's repeat what we did with ProductAction Component for CategoryPage
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

STEP-10 SocialShare Component Development

TASK-1 Changing LinkedIn to Twitter

Last modified 1yr ago

Copy link