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