Subcategories Grid/List for Magento Adobe Commerce

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

(For Magento v1 - Open Source (CE), Commerce on-prem (EE), and OpenMage LTS compatible version go to Subcategories Grid/List for Magento 1 OpenMage)

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

Apptrian Subcategories Grid/List Extension for Magento 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 XML layout updates or CMS markup tags. 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. This is done by using the "Category IDs" option in our extension where you type a comma-separated list of category IDs you want to show. You can also show subcategories by typing markup tags inside the CMS page content or CMS blocks.

Compatible with Breeze frontend without the need for an additional compatibility module. It works out of the box.

Compatible with Hyvä frontend without the need for an additional compatibility module. It works out of the box.

Features

• Two positions of subcategories block out of the box from 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.
• 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 XML block arguments and/or CMS markup tags attributes.
• 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.
• Responsive Web Design (RWD) ready. It will recalculate itself based on the parent.

Installation Instructions

There are several ways you can install any Magento extension. Our extension is no different. We will show you four 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)

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

php bin/magento maintenance:enable

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

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

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

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 following commands on 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 composer https://packages.apptrian.com/subcategories-grid-list/

composer require apptrian/subcategories-grid-list

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

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

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

If you purchased the extension on our site then copy .zip file from /Magento2/InstallWithComposer/ directory inside your MAGENTO_ROOT/vendor/apptrian/packages/ directory (create directory if does not exist).
- Run following commands on Magento root directory:

php bin/magento maintenance:enable

composer config repositories.apptrianartifacts artifact $(pwd)/vendor/apptrian/packages

composer require apptrian/subcategories-grid-list

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

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

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

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

php bin/magento maintenance:enable

composer require apptrian/subcategories-grid-list

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

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 Magento Marketplace account (public and private keys) and then purchase an extension with another Magento Marketplace account (different public and private keys). Check the Magento 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 Magento Marketplace account.

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.

Customization Instructions

If you want to style Subcategories Grid/List further, copy
./app/code/Apptrian/Subcategories/view/frontend/web/css/apptrian_subcategories.css
to
./app/design/frontend/YourVendor/your_theme/Apptrian_Subcategories/web/css/apptrian_subcategories.css
and add your CSS styles.

Read comments in the CSS file and you will be able to make most of the changes in a very succinct way.

If you do not know how to style with CSS or you wish a professional to do it for you, we offer additional CSS Custom Style service for a small fee.

FAQ

Q: Why do I have issues after updating the extension to version 3.0.0 or later?
A: You must completely uninstall the old version first! If you installed the extension via file copy remove the directory app/code/Apptrian/Subcategories/ then install new files. If you installed the extension via composer, you must issue the command composer remove apptrian/subcategories. Then install a new version.

Q: How to add subcategories block inside CMS page content or CMS block?
A: To add subcategories block inside any CMS page content or CMS block use the following code:

{{block class="Apptrian\\Subcategories\\Block\\GridList" name="apptrian.subcategories.block" template="Apptrian_Subcategories::grid_list.phtml" encoded_options="[`layout`:`grid`, `single_link`:`0`]"}}

Attribute "encoded_options" can be used to override any option that exists in our extension. In the above example, only two options are shown. For more information, please check our User Guide.

Q: Is it possible to turn off subcategories description text?
A: Yes it is. In our extension configuration for option "Sort Order" instead of "0,1,2" type "0,1" (without double quotes). Do not forget to Refresh your Magento Cache.

Q: Why after uploading the category image I still get a placeholder image?
A: The category model in Magento 2 has only one attribute for the image "Category Image". Our extension adds a "Category Thumbnail" attribute for thumbnail images (since extension version 2.5.0). In the extension config for the option "For Image Use", you need to select "Image" or "Thumbnail" depending on which one you want to use for Subcategories Grid/List.

Q: Why after uploading the category image for a specific language (store view) I still get a placeholder image?
A: You must upload an image to the default scope (All Store Views) First and then if you need an image to be different for a specific language (store view) you upload a different image for that particular language (store view).

Q: How to remove category image from category page?
A: Override file app/code/Apptrian/Subcategories/layout/catalog_category_view.xml into your theme app/design/frontend/VENDOR/THEME/Apptrian_Subcategories/layout/catalog_category_view.xml. Before closing body tag (should be line 25) add the following:

<referenceBlock name="category.image" remove="true"/>