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.