Adding subcategory in PLP page

If the categories and subcategories are not added then follow the step 1 in case the categories and subcategories are available then follow step 2

Step 1.Create the categories and subcategories

Navigate to commerce->content management->cat log & categories->commerce categories->new

fill name, Catalog if the catalog is not present

Navigate to commerce->content management->cat log & categories->commerce catalog->new

1. From the Site dropdown list, select the website for this catalog. Remember, each website can have only one catalog.
2. In the Name field, enter a name for this catalog. The name does not appear on the website and is used to identify the catalog in NetSuite.
3. In the Description field, enter an expanded description for this catalog. The description is not displayed on the site and used only to provide additional information, such as the purpose, for the catalog in NetSuite.
4. Click the Save button.

Go back to the commerce categories and the catalog will be displayed

Click on save

Login to the SMT to add the subcategories

1. Log in to SMT.
2. Click Overview Mode on the toolbar.
3. Point to a category or subcategory row, and then click Add Subcategory, denoted by the +.
4. Enter the following information on the General subtab: Name Heading URL Fragment
5. click on save

Go to net suite and check in commerce categories ->edit in the subcategories sub tab if it is not added drop down and add

Add the item to website

Navigate to commerce->content management->cat log & categories->commerce categories->edit->items sub tab here add the items

click on save

Step 2.Create the new extension

JavaScript

var plp = container.getComponent('PLP');

                plp.addToViewContextDefinition('Facets.Browse.View', 'categorybannerdetails', 'object', function name(context) {
                    var categoryinfo = plp.getCategoryInfo();
                    var categorybannerdetails = {};
                    if (categoryinfo) {
                        categorybannerdetails.isbanner = !!(categoryinfo.pagebannerurl);
                        categorybannerdetails.bannerurl = categoryinfo.pagebannerurl;
                    }
                    //console.log("categorybannerdetails", categorybannerdetails)
                    return categorybannerdetails;

                });

                plp.addToViewContextDefinition('Facets.FacetedNavigationItemCategory.View', 'displayValues', 'array', function(context) {
                    var categoryinfo = plp.getCategoryInfo();

                    setTimeout(function() {
                        $('div[data-view="Facets.CategorySidebar"] .facets-faceted-navigation-item-category-facet-group-expander-icon').css('font-weight', '200')
                    }, 300)

                    console.log('categoryinfo', Configuration)
                    var categoriesConfig = Configuration.categories

                    // To get the sort option used for
                    var sideMenuSort = categoriesConfig.sideMenu.sortBy;
                    var additionalFieldsSide = categoriesConfig.sideMenu.additionalFields

                    //Add the field to the additional field setup, if it is not available in the additional field 
                    var flagSide = _.contains(additionalFieldsSide, sideMenuSort);
                    if (!flagSide)
                        categoriesConfig.sideMenu.additionalFields.push(sideMenuSort)

                    var siblings = categoryinfo.siblings ? categoryinfo.siblings.length : 0;
                    var sequencenumber = parseInt(categoryinfo.sequencenumber);
                    var currentCategory = {
                        displayName: categoryinfo.name,
                        isActive: true,
                        label: categoryinfo.name,
                        link: categoryinfo.fullurl,
                        subCategory: (categoryinfo.categories) || [],
                        additionalFields: {
                            metakeywords: categoryinfo.metakeywords || ''
                        }
                    }

                    //Update the Additional Object in the current category using the 
                    currentCategory.additionalFields[sideMenuSort] = categoryinfo[sideMenuSort]


                    if (categoryinfo.parenturl !== '')
                        context.displayValues.push(currentCategory)

                    var returnData = context.displayValues

                    returnData = sortingCongif(context.displayValues, sideMenuSort)
                    //console.log('returnData', returnData)
                    return returnData
                });

                function sortingCongif(sortingData, sideMenuSort) {
                    var returnData = _.sortBy(sortingData, function(num) {

                        var additionalFields = num.additionalFields ? num.additionalFields : {}

                        if (additionalFields[sideMenuSort]) {

                            return parseInt(additionalFields[sideMenuSort])
                        }
                    });

                    console.log('returnData', returnData)

                    return returnData
                }

Tpl

<ul class="facets-faceted-navigation-item-sub-category-facet-optionlist">
                        {{#each subCategory}}
                            <li class="facets-faceted-navigation-item-sub-category-facet-option" style="font-size: 13px; margin-left: 16px; ">
                                 <a  href="{{fullurl}}" style="color: #4D5256; ">{{name}}</a> </li>
                        {{/each}}
                    </ul>

Thank you