Subcategories Grid List Slide for Magento 2

Sub

Introduction

The extension allows displaying subcategories in form of a list, grid or slide at the home page, category page, and any other pages

Installation

The extension has 2 separate ways of installation, via Composer or by copying the code.

Please follow this Installation Guide to install the extension.

Extension Configuration

Configuration Settings

To access the settings, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Subcategories Grid List Slide

The module’s configuration contains four sections: General, Category Page, Home Page, and Widget

General

In the General section:

Set Enabled -  to "Yes", to enable the extension at the storefront, or "No" to disable it

Category Page

In the Category Page section:

Set Enable on Category Page? - to "Yes", to enable the subcategories grid-list-slide on the category page, or "No" to disable

Layout - choose the way subcategories will be shown. Can be either "Grid", "List" or "Slide". The default layout is the grid

Block Title - specify the categories grid/list/slide block title. Leave empty if you do not want to display the categories grid/list/slide block title

Display On - choose the where to display on the page. "Main Content Top" or "Main Content Bottom"

Include Category URL in The entire Item? - if "Yes" the subcategory URL will be included in the entire item area (preferable for grid layout). If "No", the subcategory URL will be included in the name and image (preferable for list layout).

Sort by - choose the way subcategories will be sorted: "Name", "Page Title", "Position" or "Created Date"

Order by - choose the sort direction of subcategories: "Ascending" or "Descending"

Data Order - specify the order to display subcategory data (0=image, 1=name, 2=description) separated by comma. Eg. 0,1,2. If you do not want to show some data just exclude it from this comma-separated list. Eg. 0,1 to exclude/hide description

For Subcategory Name Use - choose the attribute to use for subcategory name: "Name", "Page Title"

For Subcategory Description Use - choose the attribute to use for subcategory description: "Description", "Meta Description"

For Subcategory Image Use - choose the attribute to use for subcategory image: "Image" or "Thumbnail (by Ulmod)". If "Thumbnail (by Ulmod)" is selected, please make sure to upload the category thumbnail on the "UM Category Thumbnail" field under CATALOG -> Catalog -> Categories -> category edit page

Exclude Subcategory By IDs - specify in comma-separated, the IDs of all categories you want to exclude their subcategories in the grid/list/slide block. For example, If 5,4,19 the subcategories of categories 5,4,19 will be excluded on the grid/list/slide. Leave empty to show all subcategories, including the first level of each category.

Home Page

In the Home Page section:

Set Enable on Home Page? - to "Yes", to enable the subcategories grid-list-slide on the category page, or "No" to disable

Layout - choose the way subcategories will be shown. Can be either "Grid", "List" or "Slide". 

Block Title - specify the categories grid/list/slide block title. Leave empty if you do not want to display the categories grid/list/slide block title

Categories to Show - specify in a comma-separated the IDs of categories or subcategories to show. Eg. 5,4,19. if empty the first categories level will show on the homepage

Display Mode - choose the mode to display:

  • If "Specific" categories IDs specified in the "Categories to Show" field will be shown on the home page
  • If "Random" and one category ID specified in the "Categories to Show" field, children of that category will be shown on the home page. If several categories IDs specified, one ID will be used and children of that category will be shown on the homepage

Display On - choose the where to display on the page. "Main Content Top" or "Main Content Bottom"

Include Category URL in The entire Item? - if "Yes" the subcategory URL will be included in the entire item area (preferable for grid layout). If "No", the subcategory URL will be included in the name and image (preferable for list layout).

Sort by - choose the way subcategories will be sorted: "Name", "Page Title", "Position" or "Created Date"

Order by - choose the sort direction of subcategories: "Ascending" or "Descending"

Data Order - specify the order to display subcategory data (0=image, 1=name, 2=description) separated by comma. Eg. 0,1,2. If you do not want to show some data just exclude it from this comma-separated list. Eg. 0,1 to exclude/hide description

For Name Use - choose the attribute to use for subcategory name: "Name", "Page Title"

For Description Use - choose the attribute to use for subcategory description: "Description", "Meta Description"

For Image Use - choose the attribute to use for subcategory image: "Image" or "Thumbnail (by Ulmod)". If "Thumbnail (by Ulmod)" is selected, please make sure to upload the category thumbnail on the "UM Category Thumbnail" field under CATALOG -> Catalog -> Categories -> category edit page

Exclude Subcategory By IDs - specify in comma-separated, the IDs of all categories you want to exclude their subcategories in the grid/list/slide block. For example, If 5,4,19 the subcategories of categories 5,4,19 will be excluded on the grid/list/slide. Leave empty to show all subcategories, including the first level of each category.

Widget

In the Widget section:

Set Enable on Widget? - to "Yes", to enable the subcategories grid-list-slide widget, or "No" to disable.Please make sure to create the widget under: CONTENT -> Element -> Widgets

Layout - choose the way subcategories will be shown. Can be either "Grid", "List" or "Slide".

Block Title - specify the categories grid/list/slide block title. Leave empty if you do not want to display the categories grid/list/slide block title

Categories to Show - specify in a comma-separated the IDs of categories or subcategories to show. Eg. 5,4,19. if empty the first categories level will show on the homepage

Display Mode - choose the mode to display:

  • If "Specific" categories IDs specified in the "Categories to Show" field will be shown on the home page
  • If "Random" and one category ID specified in the "Categories to Show" field, children of that category will be shown on the home page. If several categories IDs specified, one ID will be used and children of that category will be shown on the homepage

Display On - choose the where to display on the page. "Main Content Top" or "Main Content Bottom"

Include Category URL in The entire Item? - if "Yes" the subcategory URL will be included in the entire item area (preferable for grid layout). If "No", the subcategory URL will be included in the name and image (preferable for list layout).

Sort by - choose the way subcategories will be sorted: "Name", "Page Title", "Position" or "Created Date"

Order by - choose the sort direction of subcategories: "Ascending" or "Descending"

Data Order - specify the order to display subcategory data (0=image, 1=name, 2=description) separated by comma. Eg. 0,1,2. If you do not want to show some data just exclude it from this comma-separated list. Eg. 0,1 to exclude/hide description

For Name Use - choose the attribute to use for subcategory name: "Name", "Page Title"

For Description Use - choose the attribute to use for subcategory description: "Description", "Meta Description"

For Image Use - choose the attribute to use for subcategory image: "Image" or "Thumbnail (by Ulmod)". If "Thumbnail (by Ulmod)" is selected, please make sure to upload the category thumbnail on the "UM Category Thumbnail" field under CATALOG -> Catalog -> Categories -> category edit page

Exclude Subcategory By IDs - specify in comma-separated, the IDs of all categories you want to exclude their subcategories in the grid/list/slide block. For example, If 5,4,19 the subcategories of categories 5,4,19 will be excluded on the grid/list/slide. Leave empty to show all subcategories, including the first level of each category.

Code Insert

For more flexibility on where to place Categories Grid/List/Slide, you can use a CMS template tag, template code or Layout XML code to display the Categories Grid/List/Slide block to any page.

CMS Template Tag (for CMS Pages)

To display the Subcategories Grid/List/Slide block to any CMS page, insert the following code on the CMS Page content:

{{block class="Ulmod\CategoryViewMode\Block\ViewMode" name="ulmod.categoryviewmode.custom.page" 
template="Ulmod_CategoryViewMode::insert/view_mode.phtml" encoded_options="[`layout`:`list`,
`single_link`:`0`,`sort_attribute`:`name`,`sort_direction`:`desc`, `heading`:`Custom Title`,
`sort_order`:`0,1`,`image`:`image`,`name`:`name`,`description`:`meta_description`,
`category_ids`:`9,10`,`mode`:`specific`]"
}}

Use`layout`:`slider` for the slide layout and change the other options values as per your needs. Add additional parameter if needed.

XML Code (for any page)

To display the Categories Grid/List/Slide block via the XML layout, add the following code in your XML layout file or in the Layout Update XML field (from the admin panel) of the page:

<referenceContainer name="content">
    <block class="Ulmod\CategoryViewMode\Block\ViewMode"
name="ulmod.categoryviewmode.custom.page"
template="Ulmod_CategoryViewMode::insert/view_mode.phtml"/> </referenceContainer>

You can also use the arguments to customized the Categories Grid/List/Slide block display:

<referenceContainer name="content">
   <block class="Ulmod\CategoryViewMode\Block\ViewMode" 
name="ulmod.categoryviewmode.custom.page"
template="Ulmod_CategoryViewMode::insert/view_mode.phtml"> <arguments> <argument name="config_options" xsi:type="array"> <item name="layout" xsi:type="string">grid</item> <item name="category_ids" xsi:type="string">6,7,8,9,10</item> <item name="single_link" xsi:type="string">0</item> <item name="heading" xsi:type="string">Custom Block Title</item> <item name="image" xsi:type="string">image</item> <item name="name" xsi:type="string">name</item> <item name="description" xsi:type="string">meta_description</item> <item name="sort_order" xsi:type="string">0,1,2</item> <item name="mode" xsi:type="string">specific</item> <item name="sort_attribute" xsi:type="string">position</item> <item name="sort_direction" xsi:type="string">asc</item> <item name="exclude_ids" xsi:type="string">1,2,3</item> </argument> </arguments> </block> </referenceContainer>

Template Code (for any page)

Use the following code to call Categories Grid/List/Slide block in the parent block:

$this->getChildHtml("ulmod.categoryviewmode.custom.page");

Make sure that the name of the attribute per block is unique.

Frontend View

Example of Subcategories Grid

Example of Subcategories List

Example of Subcategories Slide

Extension Support

Need Help?

Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.

Got Questions?

Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!

Extension Product Page