Filtering Department, Category and Search Pages

WebStore
1

Does anybody’s site have filters on their Department & Category pages?

I am wondering if there is a way to get something up and running that does the following:

On the Department & Search page:

  • Show filters that allow the user to filter by ‘Category’ and ‘Subcategory’
  • Filter by more than 1 ‘Category’ & 1 ‘Subcategory’ simultaneously

On the Category page:

  • Show filters that allow the user to filter by ‘Subcategory’
  • Filter by more than 1 ‘Subcategory’ simultaneously

I would also like to have custom filters assigned to each ‘Department’, ‘Category’ and ‘Subcategory’ so when any products from those classifications are displayed in the ‘Product Listings’, their attached filters are appended to the filters list.

I see we can attach filter groups to Departments, but not Categories & Subcategories. I tried to assign a ‘Filter Group’ to multiple ‘Deparments’, but they are not showing on our site.

If anyone knows how to accomplish the above, I would appreciate any advice!

Thanks!

2

Hi Derek,

PFS is set up by default to allow you to filter by categories within the current department and subcategories within the current category. Multiples might be a little trickier but it’s doable.

The only way to handle it currently is with JavaScript. At the end of the Filtered Search Panel in NitroScript, there is a script block to ‘transform’ the category and subcategory links within the current dept/cat to be PFS links instead of standard links. It could be adapted to your custom navigation and you could then collect the generated links in JS and render them as a new PFS group. This is the existing JS:

{* Override the category and subcategory nav links for this department so
they trigger a filtered search update instead of redirecting to a category
or subcategory page *}
<script language="javascript" type="text/javascript">
	var sFilterURL = "{pageproperty['filteredsearchbaseurl']}";
	var nDepartmentID = {pageproperty['department_id']};
	var nCategoryID = {pageproperty['category_id']};
	var sSubcategory = "{pageproperty['subcategory_name']}";
	var sPageID = "{pageproperty['pageid']}";

	nsc(function() {
  	nsc('#categoryblock-'+nDepartmentID+' a.link-category, #categorypictures a')
  	  .each(function() {
    	  var nLinkCategoryID = nsc(this).attr('id').split('-')[1];

    	  if (sSubcategory.length > 0) {
    	    nsc(this).attr('href',
    	      sFilterURL.replace(/s_[^\/]+\//, '')
    	        .replace('c_'+nCategoryID, 'c_'+nLinkCategoryID));
    	  } else if (nCategoryID > 0) {
    	    nsc(this).attr('href',
	      sFilterURL.replace('c_'+nCategoryID, 'c_'+nLinkCategoryID));
    	  } else {
    	    nsc(this).attr('href', sFilterURL+'c_'+nLinkCategoryID+'/');
    	  }
    	});

  	nsc('#categoryblock-'+nDepartmentID+' a.link-category-select')
      .each(function() {
        if (sSubcategory.length > 0) {
    	    nsc(this).attr('href', sFilterURL.replace(/s_[^\/]+\//, ''));
        } else {
          nsc(this).attr('href', '');
        }
    	});

  	nsc('#categoryblock-'+nDepartmentID+' a.link-subcategory')
      .each(function() {
        var sLinkSubcategory = nsc(this).attr('id').substring(12);

        if (sSubcategory.length > 0) {
          nsc(this).attr('href',
        sFilterURL.replace(/s_[^\/]+/, 's_'+sLinkSubcategory));
        } else {
          nsc(this).attr('href', sFilterURL+'s_'+sLinkSubcategory+'/');
        }
    	});

  	nsc('#categoryblock-'+nDepartmentID+' a.link-subcategory-select')
      .each(function() {
        nsc(this).attr('href', '');
    	});
	});
</script>

HTH,
Regards,

Donogh

3

This is great! Thank you! I will test drive this and check it out :slight_smile:

4

How can I expose PFS just on my category pages and Not on my Department pages? If anyome knows where I can find that setting Id appreciate it.

Thanks
Yitzi