Subcategories Grid List Slide for Magento 2
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.
Configuration Settings
To access the settings, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Subcategories Grid List Slide.
Category Page
Enable on Category Page? - If "Yes", the children or subcategories of each current category will display at the category page if the current category has children or subcategories. To personalize/customize more the display per category (eg. select the categories to show per category page), please create a widget under Content > Widgets > Add New, use widget type Categories List/Grid/Slide On Pages (by Ulmod)
Layout - choose the way subcategories will show: "Grid", "List" or "Slide"
If "Slide" is selected, specify the number of slide to show per breakpoint:
- Number of slide (breakpoint 320px) - enter the number of slide to show on breakpoint 320px. Example: 1;
- Number of slide (breakpoint 480px) - enter the number of slide to show on breakpoint 480px. Example: 1;
- Number of slide (breakpoint 640px) - enter the number of slide to show on breakpoint 640px. Example: 2;
- Number of slide (breakpoint 768px) - enter the number of slide to show on breakpoint 768px. Example: 2;
- Number of slide (breakpoint 1042px) - enter the number of slide to show on breakpoint 1042px. Example: 4;
- Number of slide (breakpoint 1440px) - enter the number of slide to show on breakpoint 1440px. Example: 4;
- Number of slide (breakpoint 1920px) - enter the number of slide to show on breakpoint 1920px. Example: 4;
- Number of slide (Default)- enter the number of slide to show by default. Example: 6;
Block Title - specify the grid/list/slide block title. Leave empty if you do not want to display the block title
Display On "Main Content Top" Of The Page - if "Yes", the subcategories block will display at the main content top of the page;
Display On "Main Content Bottom" Of The Page - if "Yes", the subcategories block will display at the main content bottom of the page;
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";
Show Description - if "Yes", the description of each category/subcategory will show. The description will be truncated;
Show Image - if "Yes", the image of each subcategory will show;
Type - choose the image type to show. : "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 Categories - Select one or more parents' categories to exclude the display. Subcategories grid/list/slide block won't display to the selected parent categories. To discard all selected parent categories, unselect/deselect the selected parent categories and click "Save Config"
Home Page And Other Pages
To display the categories (parent or children) at the home, CMS, product and any other pages, please create the widget under Content > Widgets > Add New, use widget type Categories List/Grid/Slide On Pages (by Ulmod)
Widgets
To create and widget, please go to CONTENT ⟶ Widgets ⟶ Add New use widget type Categories List/Grid/Slide On Pages (by Ulmod)
Storefront Properties
Under Storefront Properties, do the following:
In the Widget Title field, enter a descriptive title for internal reference only.
Set Assign to Store Views to the view where the categories/subcategories grid/list/slide block will be available.
Enter a number in the Sort Order field to determine the order of the categories/subcategories grid/list/slide block if it appears in the same position as other content elements. The highest position is zero.
Layout Updates
In the Layout Updates section, tap Add Layout Update.
Set Display On to the type of page where the categories/subcategories grid/list/slide block is to appear.
In the Block Reference list, choose the area of the page layout where the categories/subcategories grid/list/slide is to be placed.
Widgets Options
Layout - select the layout to display the categories/subcategories: Grid, List, or Slide
Categories Display Mode - if "First Level Categories": the first-level categories will display. if "Custom": select the categories/subcategories to display
Block Title - specify the categories/subcategories grid/list/slide block title. Leave empty if you do not want to display the categories/subcategories grid/list/slide block title
Sort by - choose the way categories/subcategories will be sorted: "Name", "Page Title", "Position" or "Created Date"
Order by - choose the sort direction of categories/subcategories: "Ascending" or "Descending"
Show Description - if "Yes", the description of each category/subcategory will show. The description will be truncated
Show Image - if "Yes", the image of each category/subcategory will show
Type - choose the image type to show. : "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
Code Insert
For more flexibility on where to place Categories/Subcategories Grid/List/Slide, you can use a CMS template tag or Layout XML code to display the Categories/Subcategories Grid/List/Slide block to any page.
CMS Template Tag (for CMS Pages)
To display the Categories/Subcategories Grid/List/Slide block to any CMS page:
1. Go to CONTENT ⟶ CMS or Blocks, select the page/block,
Insert a widget :
- open the content page to be edited
- go to the content section
- from the HTML editor, click Insert Widget.
- when prompted, choose the Widget Type: Categories List/Grid/Slide On Pages (by Ulmod)
- set the widget options, and click to "Insert Widget" button
Or, insert the following code on the page/block content:
{{widget type="Ulmod\CategoryViewMode\Block\Widgets\ViewMode" heading="Custom Block Title"
layout="grid" category_display_mode="first_level" sort_attribute="name" sort_direction="asc"
is_show_description="1" is_show_image="1" image_type="image"}}
adjust/change the options values as per your needs
XML Code (for any page)
1. Go to CONTENT ⟶ Blocks ⟶ Add New
Enter the identifier. Example: Identifier: "ulmod_cvm_block1"
Insert a widget :
- open the content page to be edited
- go to the content section
- from the HTML editor, click Insert Widget.
- when prompted, choose the Widget Type: Categories List/Grid/Slide On Pages (by Ulmod)
- set the widget options, and click to "Insert Widget" button
Save the block.
2. Add this XML code to your layout XML
<referenceContainer name="content"> <block class="Ulmod\CategoryViewMode\Block\ViewMode"
name="ulmod.categoryviewmode.custom.page"> <arguments> <argument name="block_id" xsi:type="string">ulmod_cvm_block1</item> </arguments> </block> </referenceContainer>
Make sure that the identifier (eg. ulmod_cvm_block1) per block is unique.
Frontend View
Example of Subcategories Slide
Example of Subcategories List
Example of Subcategories Grid
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!