STEP-9 render Plugins and MSTP Plugin, Component creation

Now we going to create plugins for the Product Page.

STEP-9

We want to display our social share under the product short description. Product short description rendering is located inside the ProductAction component, so at first, we going to plugin into ProducAction Container mapStateToProps adding our redux state, and then into Short description render.

1. In <SOURCE>/plugin create file ProductActionContainerMSTP.plugin.js

scandipwa-socialshare/src/plugin/ProductActionContainerMSTP.plugin.js

const mapStateToProps = (args, callback, instance) => {
   const [state] = args;

   return {
       ...callback(...args),
       socialShare: state.SocialShareReducer.socialShare
   };
};

export default {
   'Component/ProductActions/Container/mapStateToProps': {
       function: mapStateToProps
   }
};

2. In <SOURCE>/plugin create file ProductActionComponent.plugin.js

scandipwa-socialshare/src/plugin/ProductActionComponent.plugin.js

import { lazy, Suspense } from 'react';

export const SocialShare = lazy(() => import(
   /* webpackMode: "lazy", webpackChunkName: "social-share" */
   '../component/SocialShare'
   ));

const renderShortDescription = (args, callback, instance) => (
   <>
       { callback.apply(instance, args) }
       { renderSocialShare(instance.props) }
   </>
);

const renderSocialShare = (props) => {
   const {
       socialShare: {
           socialShareConfig: {
               enabled, productPage, rounded, size
           }, providers
       },
       product: { name }
   } = props;

   if (!enabled && !productPage) {
       return false;
   }

   return (
       <section
           block="ProductActions"
           elem="Section"
           mods={ { type: 'social' } }
       >
           <Suspense fallback={ null }>
               <SocialShare
                   isRounded={ rounded }
                   size={ size }
                   providers={ providers }
                   quote={ name }
               />
           </Suspense>
       </section>
   );
};

export const config = {
   'Component/ProductActions/Component': {
       'member-function': {
           renderShortDescription
       }
   }
};

export default config;

3. Using console navigate to scandipwa-socialshare and execute scandipwa create component SocialShare

4. Edit render method of the newly created component

scandipwa-socialshare/src/component/SocialShare/SocialShare.component.js line 11 - 17

render() {
   return (
       <div block="SocialShare">
           { __('SocialShare') }
       </div>
   );
}

5. Go to the frontend product page and check if the content is rendered.