Magento2 PWA Upsell Products Add-on Installation Guide

For Magento 2 PWA Studio, on the product detail page, there is no upsell product feature available for now. The Upsell Products Add-on is used to show products that may be of interest to customers who have considered a product. The items shown as upsell products might be the most popular, higher quality, or have good profit options. 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 Upsell 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",
          "upsell-products": "link:src/@mage2/upsell-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 Upsell 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 UpsellProducts = ProductDetails.addImport(
          "Upsell from '@mage2/upsell-products'"
      );
      
      ProductDetails.insertAfterJSX('<Form />', `<${UpsellProducts} productSku={productDetails.sku} />`);
      
  1. 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
  • Upsell products are shown in the slider on product page
  • 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