Subcategories Grid/List PWA Studio for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Add Subcategories Grid Or List To Any Magento Page With Just A Few Clicks!

Provides Apptrian Subcategories Grid/List extension functionality to PWA Studio. Requires both original (base) extension and GraphQL (add-on) extension to be installed. Allows you to have subcategories in the form of a grid or list on category pages, the home page, or optionally any other page via Page Builder. Additionally, there are more than several options for customization. The subcategories block is Responsive Web Design (RWD) ready. It will recalculate itself based on the parent.

On category pages, the extension will show children categories of the current category. On CMS pages, the extension will show top-level categories or any other categories you want by using the "Category IDs" option, where you type a comma-separated list of category IDs you want to show. You can also show subcategories by typing markup tags and using Page Builder inside the CMS page content or CMS blocks.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Features

• Four positions of subcategories block out of the box from the Magento config. Any position is possible via XML layout updates or CMS markup tags on any page.
• Ability to show subcategories on multiple locations on the page.
• Compatible with Page Builder.
• Two layouts are available (Grid or List).
• Ability to show subcategories grid/list items as single links.
• Ability to sort subcategories by "Name", "Page Title", "Position", and "Created Date".
• Ability to choose sort direction ("Ascending" and "Descending").
• Ability to show subcategories heading or not and to type in the heading text.
• Ability to set the order of subcategory data (0=image, 1=name, 2=description) and to exclude some data if desired. Example: 0,1,2
• Ability to show category image, and which image (attribute) to use. Options are "Image", and "Thumbnail".
• If the subcategory does not have an image (or thumbnail) placeholder image will be used.
• Ability to add image width and height HTML attributes.
• Ability to show category name, and which database field (attribute) to use. Options are "Name" and "Page Title".
• Ability to show category description, and which database field (attribute) to use. Options are "Description" and "Meta Description".
• Ability to show subcategories on any page.
• Two completely independent sets of settings one for category pages and one for the home page from Magento config with the unlimited number of settings sets via Page Builder.
• Ability to show specific categories on the home page and/or any other page via the comma-separated list of category IDs.
• Ability to show random categories on the home page and/or any other page via the comma-separated list of category IDs.
• Ability to hide categories in subcategories block via the comma-separated list of category IDs.
• Ability to hide subcategories block on certain category pages via the comma-separated list of category IDs.
• Ability to limit the number of categories in the subcategories block.
• Responsive Web Design (RWD) ready. It will recalculate itself based on the parent.

Installation Instructions

This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension. Please do not attempt to install it before the required extensions. Once you installed both the original (base) extension and GraphQL (add-on) extension, you may proceed.

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site, unpack the .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_SubcategoriesPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/app/code/Apptrian/SubcategoriesPwaStudio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you downloaded in Step 1.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/subcategories-grid-list-pwa-studio extensions/@apptrian/subcategories-grid-list-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/subcategories-grid-list-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/subcategories-grid-list-pwa-studio

Installation via Composer
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-subcategories-grid-list-pwa-studio composer https://packages.apptrian.com/subcategories-grid-list-pwa-studio/

composer require apptrian/subcategories-grid-list-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_SubcategoriesPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/subcategories-grid-list-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you can download from your account on our site in the My Downloadable Products section.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/subcategories-grid-list-pwa-studio extensions/@apptrian/subcategories-grid-list-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/subcategories-grid-list-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/subcategories-grid-list-pwa-studio

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

Step 1. Backend installation instructions

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/subcategories-grid-list-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_SubcategoriesPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/subcategories-grid-list-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, use composer to download the package to your computer. If you get stuck, use the contact form on our site and provide your order number and full name as it is on order, and we will provide you with further instructions.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/subcategories-grid-list-pwa-studio extensions/@apptrian/subcategories-grid-list-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/subcategories-grid-list-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/subcategories-grid-list-pwa-studio

Configuration

Our extension works out of the box. If you want to configure it differently log to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Subcategories Grid/List

There are more than several options for customization. They are all self-explanatory and have comments and tooltips.

After changing options make sure you refresh your Magento cache.

FAQ

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.