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.

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!

Extension Product Page