Installation Guide

After finishing purchasing process, we will immediately send you an email containing the link to download this extension.

1. Install the main module - Magento 2 Configurable Product Grid Table View

(Please turn off Merge-JS before installing the module. Only Turn on Merge-JS when finishing the installation)

Step 1: Unzip the file.

Step 2: Create another directory called app/code/Bss/ConfiguableGridView/. ConfiguableGridView is the module's internal identifier. You can find it in the "composer.json" file in the extension ZIP file you downloaded, look at the node "psr-4".

This is what you call the directory, and then you put the contents of the extension ZIP file in there.

Step 3: Upload the directory app/code/Bss/ConfiguableGridView/ into the root directory of your Magento installation. The root directory of Magento is the directory that contains the directories "app", "bin", "lib" and more. All directories should match the existing directory structure.

Step 4: Go to Magento 2 root directory.

Run: php bin/magentosetup:upgrade.

Step5: Run: php bin/magentosetup:static-content:deploy.

Step 6: Clear all Caches.

2. Install the PWA Add-on

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 on 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)
    );

*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

3. Install/Uninstall/Disable the Hyva Theme Compatibility package

The following instruction is used for the Hyva theme compatibility package ONLY.

• To install the Hyva compatibility package:

1. Install via composer, run commands:

- composer require hyva-themes/magento2-bsscommerce-configuable-grid-view

*Note: To install the compatibility module via composer, you also need to install 2 other modules bsscommerce/fast-order and hyva-themes/magento2-compat-module-fallback via composer.

2. Install via gitlab, run commands:

- composer config repositories.hyva-themes/magento2-compat-module-fallback git git@gitlab.hyva.io:hyva-themes/magento2-compat-module-fallback.git

- composer config repositories.hyva-themes/magento2-bsscommerce-fast-order git git@gitlab.hyva.io:hyva-themes/hyva-compat/magento2-bsscommerce-configuable-grid-view.git

- composer require hyva-themes/magento2-bsscommerce-configuable-grid-view:dev-main

- Finally, run command: php bin/magento s:up

• To disable the Hyva compatibility package, run commands: 

- php bin/magento module:disable Hyva_BssConfiguableGridView

• To uninstall the Hyva compatibility package, run commands:

- composer remove hyva-themes/magento2-bsscommerce-configuable-grid-view

*Note: If you are using Magento 2 themes, please follow this tutorial to get patches for theme compatibility.

After purchasing this module, just add our skype account at support.bsscommerce, BSS Support Team will help you to install this extension immediately. Further assistance is available via Email and Skype.

In case you have followed all above steps but the extension still doesn’t work properly, you can delete the file or change the module’s filename to keep your website function as normal. Then please contact us via sales@bsscommerce.com or Skype: support.bsscommerce, our supporters will assist you in resolving any issues within 24 hours.