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. Create CategoryPageContainerMSTP.plugin.js at SOURCE/plugin

scandipwa-socialshare/src/plugin/CategoryPageContainerMSTP.plugin.js
const mapStateToProps = (args, callback, instance) => {
const [state] = args;
​
return {
...callback(...args),
socialShare: state.SocialShareReducer.socialShare
};
};
​
export default {
'Route/CategoryPage/Container/mapStateToProps': {
function: mapStateToProps
}
};
​

2. Create CategoryPageComponent.plugin.js at <SOURCE>/plugin

scandipwa/packages/scandipwa-socialshare/src/plugin/CategoryPageComponent.plugin.js
import { lazy, Suspense } from 'react';
​
export const SocialShare = lazy(() => import(
/* webpackMode: "lazy", webpackChunkName: "social-share" */
'../component/SocialShare'
));
​
const renderItemsCount = (args, callback, instance) => {
const [isVisibleOnMobile] = args;
​
return (
<>
{ callback.apply(instance, args) }
{ renderSocialShare(instance.props, isVisibleOnMobile) }
</>
);
};
​
const renderSocialShare = (props, isVisibleOnMobile) => {
const {
category: {
description
},
socialShare: {
socialShareConfig: {
enabled, categoryPage, rounded, size
}, providers
}, device
} = props;
​
if (isVisibleOnMobile && !device.isMobile) {
return null;
}
​
if (!isVisibleOnMobile && device.isMobile) {
return null;
}
​
if (!enabled && !categoryPage) {
return null;
}
​
return (
<Suspense fallback={ null }>
<SocialShare
isRounded={ rounded }
size={ size }
providers={ providers }
quote={ description }
/>
</Suspense>
);
};
​
export const config = {
'Route/CategoryPage/Component': {
'member-function': {
renderItemsCount
}
}
};
​
export default config;

3. Resolve style issue by modifying SocialShare.style.scss

scandipwa-socialshare/src/component/SocialShare/SocialShare.style.scss Line: 12 - 21
.CategoryPage {
&-LayoutButtons {
margin-bottom: 10px;
min-width: 100px;
}
​
&-Miscellaneous {
grid-template-columns: unset;
}
}
​

4. Restart the frontend and check the outcome

Mobile

​​

Desktop