Magento 2 Subcategories Grid/List/Slide

Magento 2 Subcategories Grid/List/Slide extension improves the navigation of the store by enabling the display of sub-categories on category, product, CMS, home and other pages.

 

Table of Content

  1. Extension Installation Guide
  2. Configuration
  3. Subcategory Display Settings
  4. SubCategories Grid List Slide Widget Settings
  5. Subcategories Display Settings Using Code Insertion
  6. Subcategories Grid/List/Slide in the Frontend

 

 

  1. Extension Installation
  • For Magento Marketplace Customers
  • Create a folder structure in Magento root as app/code/Meetanshi/SubCategoriesGridList
  • Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/SubCategoriesGridList via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  • For Meetanshi Customers
    • Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
    • Login to your SSH and run below commands step by step:
      • php bin/magento setup:upgrade
      • For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
      • For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
      • php bin/magento cache:flush

 

  1. Configuration
    To configure the extension, login to Magento 2 backend, move to Stores à Configuration à Meetanshi à Subcategories Grid/List/Slide where you can find various settings to configure the extension.
  • Subcategories Grid/List/Slide: Enable or disable the extension from here.

 

  1. Subcategory Display Settings
    Here, you have to configure display settings for the subcategories block.
  • Show Subcategories on Category Page: Set “Yes” to display subcategories block on the category page.
  • Subcategory Display Layout: Select one of the layouts to display subcategories block.
    • List: Set to display subcategory block in list layout on the category page.
    • Grid: Set to display subcategory block in a grid layout on the category page. By default, grid layout is set for the subcategories block display.
    • Slide: Set to display subcategory block in slide layout on the category page.
  • Subcategory Block Title: Set the title of the subcategory block to display on the frontend.
  • Show on Top of Main Content: Set “Yes” to display subcategories layout block on top of the main content.
  • Show in Bottom of Main Content: Set “Yes” to display subcategories layout block on the bottom of the main content.
  • Sort Subcategories By: Select one of the options to sort subcategories in the frontend.
    • Name: Sort subcategories by the name.
    • Position: Sort subcategories by position. It is the default sort option.
    • Created By: Sort subcategories by the date the subcategories were created.
  • Order Subcategories By: Select one of the ‘order by’ options for subcategories display.
    • Ascending: Display subcategories in ascending order of Name, Position, Created By as selected in the “Sort Subcategories By” option.
    • Descending: Display subcategories in descending order of Name, Position, Created By as selected in the “Sort Subcategories By” option.
  • Show Description: Set “Yes” to display the description of each category/subcategory.

 

  1. SubCategoriesGridList Widget Settings
    Display subcategories block on any CMS page by creating a new widget and applying widget settings.

    • Add New Subcategory Widget
      Go to Content > Widgets and click on the “Add Widget” button.

 

  • Configure Widget Settings
  • Type: Select the widget type as “Subcategories Grid/List/Slide” from the drop-down.
  • Design Theme:  Set the particular design theme for your store’s frontend and click “Continue” for more widget configuration options.

 

  • Widget Storefront Properties
  • Widget Title: Enter the widget title.
  • Assign to Store Views: Select the store view where you want to show the subcategories block through the widget.
  • Sort Order: Enter the sort order for widget instances in the same container.
  • Layout Updates
    • Display on: Select one of the options where you want to display the widget.
    • Page: Select one of the pages where you want to display the widget block.
    • Container: Select the container area of the page where you want to display your subcategories block.

  • Set Widget Options:
  • Subcategory Block Title: Set the subcategory block title.
  • Category IDs to show: Enter the comma-separated category IDs to show the categories/subcategories.
  • Subcategory Display Layout: Select the display layouts for the subcategories block.
    • Grid: Displays subcategory block in the grid view.
    • List: Displays subcategory block in the List view.
    • Slide: Displays subcategory block in the slide view.
  • Max. Number of Subcategories per row: Enter the maximum number of subcategories to be displayed in each row.
  • Sort Subcategories By: Select option to sort subcategories.
    • Name: Sort subcategories by their name.
    • Position: Sort subcategories by their position.
    • Created Date: Sort subcategories by the date of creation.
  • Order Subcategories By: Select the option to order the subcategories.
    • Ascending: Orders subcategories in ascending order of Name, Position, Created By as selected in “Sort Subcategories By”.
    • Descending: Orders subcategories in descending order of Name, Position, Created By as selected in “Sort Subcategories By”.
  • Subcategories Display Mode: Select one of the display modes.
  • Show Description: Set Yes to display the description of subcategories.

 

  1. Subcategories Display Settings Using Code Insertion
    Insert the below code to display the subcategories Grid/List/Slide block to a PHTML file. Don't forget to replace "[ ]" with the values as per your requirement.

echo $this->getLayout()->createBlock("Meetanshi\SubCategoriesGridList\Block\SubCategory")-> setTitle([Set_Block_Title])->setCategoryShow([Category_Ids])->setMaxcolumn([Max_Columns_Per_Row])->setSelectLayout([Layout])->setSortBy([Sort_By]) ->setOrderBy([Order_By])->setDisplayMode([Display_Mode])->setShowDesc([Yes/No])->setTemplate("widget\homepage.phtml")->toHtml();

For Example:

echo $this->getLayout()->createBlock("Meetanshi\SubCategoriesGridList\Block\SubCategory")-> setTitle("WidgetTitle123")->setCategoryShow("20,2,11")->setMaxcolumn("2")->setSelectLayout('slide')->setSortBy('name') ->setOrderBy('asc')->setDisplayMode("specific")->setShowDesc('yes')->setTemplate("widget\homepage.phtml")->toHtml();

 

  1. Subcategories Grid/List/Slide in the Frontend
    Once the extension settings are configured, the user can see the subcategories block in the category page in the frontend.
  • Subcategories List View on the Category Page
    If you have selected list view from the configuration, the subcategories block is displayed in list layout on the category page in the frontend.

  • Subcategories Grid View on the Category Page
    If you have selected grid view from the configuration, the subcategories block is displayed in grid layout on the category page in the frontend.

 

  • Subcategories Slide view on CMS Page using Widget
    If you have configured the widget to show subcategories on a CMS page and selected the slide view, the subcategories block is displayed in slide layout on the CMS page (here, home page) in the frontend.