For Magento 2 PWA Studio, on the product detail page, there is no related product feature available for now. Related Products Add-on is very helpful for customers to view related products to what they are looking at. This add-on is fully responsive, which ultimately makes it compatible with most mobile devices.

Pre-requirements

• Magento 2.3.* or 2.4.*
• PWA Studio version >= v12.0.0 or PWA Studio version >= v10.0.0

Installation Instruction

1. Copy @mage2 directory files and folders inside the src directory, for example:

   {pwa-root-dir}/packages/{custom-package}/@mage2

2. Add the Related Products add-on dependency in the package.json file of your custom package or venia-concept package:
   File Path: {pwa-root-dir}/packages/{custom-package}/package.json

   "dependencies": {
       ...
       "@mage2": "link:src/@mage2",
       "related-products": "link:src/@mage2/related-products"
   },
   

3. Run the following command inside your custom package or venia-concept directory:

   yarn install

4. ProductFullDetail React component is responsible to handle product page layout in Magento 2 PWA Storefront. To add Related Products add-on on product page, you need to add following code inside the local-intercept.js file of your custom package or venia-concept package:
   File Path: {pwa-root-dir}/packages/{custom-package}/src/targets/local-intercept.js

   const ProductDetails = targetables.reactComponent(
       '@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js'
   );
   
   const RelatedProducts = ProductDetails.addImport(
       "Related from '@mage2/related-products'"
   );
   
   ProductDetails.insertAfterJSX('<Form />', `<${RelatedProducts} productSku={productDetails.sku} />`);
   

5. Run the PWA storefront using following command:

   yarn {custom-package} run build && yarn {custom-package} run watch

   Note: Replace {custom-package} with your custom package name or venia package i.e.

   yarn example-concept run build && yarn example-concept run watch

   or

   yarn venia run build && yarn venia run watch

Features

• Easy to install
• Related products are shown in the slider
• Fully responsive

 

In case of any other queries regarding this add-on:
Contact us at mage2developer@gmail.com. We would be really happy to help 🙂

Screen Shots