STEP-11 SocialShare for CategoryPage
In this step we going to create SocialShare for Category page
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 |
