Installation Guide

Before installing this PWA add on, you must guarantee that your website has installed the PWA theme to make the PWA add on work well. 

Let’s follow these steps to install PWA add on for Configurable Product Grid Table View: 

Step 1: Go to the project folder: root(folder magento)/pwa-studio

Step 2: Run this command line to install bootstrap: 

npm install react-bootstrap bootstrap

Step 3: Go to the folder: packages/theme/src/lib/components (eg: packages/ pwa-bss/src/lib/components) 

*Note: If there is no src/lib/components folder, you need to create a new one. 

• Create a BssCore folder and put all code into this folder. (Skip if this folder exists in your website) 
• Create a BssConfigurableGridView folder and put all the code into it.

Step 4: Edit the file: packages/theme/webpack.config.js

Insert this code in front of the return config; line: 

const path = require('path');
    // Plugin to override components
    const NormalModuleOverridePlugin = require('./src/lib/components/BssCore/plugins/normalModuleOverrideWebpackPlugin');
    // Overwrite components mapping
    const parentPackagePath = path.resolve(process.cwd() + '/../venia-ui');
    const componentOverrideMapping = {
        [`${parentPackagePath}/lib/components/ProductFullDetail/productFullDetail.js`]: 'src/lib/components/BssConfigurableGridView/productFullDetail.js'
    };
    // Push the override plugin
    config.plugins.push(
        new NormalModuleOverridePlugin(componentOverrideMapping)
    );

As a result, the code should look like as below: 

*Note: If the above code already exists, you just need to edit this code snippet as the following image:

[`${parentPackagePath}/lib/components/ProductFullDetail/productFullDetail.js`]: 'src/lib/components/BssConfigurableGridView/productFullDetail.js  

Step 5: Run the command line to finish the installation:

Yarn watch