Magento2 PWA Cross-sell Products Add-on Installation Guide

For Magento 2 PWA Studio, there is no cross-selling product feature available for now on the cart page. The Cross-sell Products Add-on is the same as impulse buying of a product or a service made just before the checkout process. This add-on is displayed on the cart page and it’s 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

 

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 Cross-sell 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",
        "crosssell-products": "link:src/@mage2/crosssell-products"
    },
    
  3. Run the following command inside your custom package or venia-concept directory:
    yarn install
  4. CartPage React component is responsible to handle cart page layout in Magento 2 PWA Storefront. To add Cross-sell Products add-on on cart 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 CartPageComponent = targetables.reactComponent(
        '@magento/venia-ui/lib/components/CartPage/cartPage.js'
    );
    
    const CrosssellProducts = CartPageComponent.addImport(
        "Crosssell from '@mage2/crosssell-products'"
    );
    
    CartPageComponent.appendJSX('div className={classes.body}', \`<${CrosssellProducts} />\`);
    
  5. Run the PWA storefront using the 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
  • Cross-sell products are shown on the cart 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