Overide the product description componenet in magento PWA

In the project, create a new component that extends or replaces the default product description component. For example, you might create a custom component called CustomProductDescription:

import React from ‘react’;

import { useProductDescription } from ‘@magento/peregrine/lib/talons/ProductFullDetail/useProductDescription’;

import defaultClasses from ‘@magento/peregrine/lib/talons/ProductFullDetail/productFullDetail.css’;

import { mergeClasses } from ‘@magento/venia-ui/lib/classify’;

const CustomProductDescription = props => {

 const classes = mergeClasses(defaultClasses, props.classes);

 const { description } = useProductDescription({

  product: props.product

 });

 return (

  <div className={classes.root}>

   {/* Your custom rendering logic here */}

   <div dangerouslySetInnerHTML={{ __html: description }} />

  </div>

 );

};

export default CustomProductDescription;

Replace the usage of the default product description component

import React from ‘react’;

import CustomProductDescription from ‘../CustomProductDescription’; // Import your custom component

const ProductPage = props => {

 // … other code …

 return (

  <div>

   {/* … other components … */}

   <CustomProductDescription product={product} />

   {/* … other components … */}

  </div>

 );

};

export default ProductPage;

After making changes, clear the cache and deploy your Magento PWA. 

Leave a comment

Your email address will not be published. Required fields are marked *