Facets in Category Tree

[afiumano]

I am trying to setup facets in the category tree and not horizontally across the page as is default in colossus. So I copied the facet layout template from the shadows framework but the facets are not appearing on the CTGY page (just the title "Filters") (I have a custom field facet setup). The site is still set at Legacy SEO but I tried selecting URI Management and the facets still didn't appear on the page.

Are there changes needed to the javascript somewhere? Is there an easier way to have the facets appear in the category tree template as it does in Shadows?

[Matt Zimmermann]

You would have to replace refinery.css with facets.css from Shadows and remove the calls for the Refinery extension in your theme.js file.

[afiumano]

I replaced the css and commented out the following from themes.js:

/**
         * Load and initialize the Refinery extension
         */
        /*var facetsContainer = $.hook('add-refinery');
        var facetTemplate = document.querySelector('[data-hook="horizontal-refinery"]');

        if (facetTemplate !== null) {
            var facetTemplateContent = facetTemplate.getTemplateContent();
        }

        var hasRefinery = $.hook('refinery');
        var hasRefineryAnnex = $.hook('refinery-annex');

        function loadRefinery() {
            facetsContainer.css('visibility', 'hidden');
            if (document.body.clientWidth >= 959 && facetsContainer.html() === '') {
                facetsContainer.append(document.importNode(facetTemplateContent, true));
                facetsContainer.css('visibility', 'visible');
            }
            else if (document.body.clientWidth < 959) {
                facetsContainer.empty();
            }
            $.loadScript(theme_path + 'extensions/facets/refinery/refinery.js');

        }

        var loadSubcategoryTimeout;
        var loadRefineryTimeout;

        window.addEventListener('resize', function () {
            if (!loadSubcategoryTimeout) {
                loadSubcategoryTimeout = setTimeout(function () {
                    loadSubcategoryTimeout = null;

                    subcategoryNavigationBlock.css('visibility', 'hidden');
                    loadSubcategoryNavigation();
                }, 100);
            }
        }, false);
        window.addEventListener('resize', function () {
            if (!loadRefineryTimeout) {
                loadRefineryTimeout = setTimeout(function () {
                    loadRefineryTimeout = null;

                    if (hasRefinery) {
                        facetsContainer.css('visibility', 'hidden');
                        loadRefinery();
                    }
                }, 100);
            }
        }, false);
        loadSubcategoryNavigation();

        if (hasRefinery || hasRefineryAnnex) {
            loadRefinery();
        }
        */

But the facets don't appear. This is what is rendering on the page. The li's that should have the facets in them don't render at all:

<form method="get" action="https://dev.website.com/c/category-name.html">
<fieldset>
<legend>Search Facets</legend>
<input type="hidden" name="Search" value="">
<input type="hidden" name="Sort_By" value="disp_order">
<input type="hidden" name="Per_Page" value="16">
<ul class="c-form-list x-facets">
</ul>
</fieldset>
</form>

[Matt Zimmermann]

Are you on a category page and does that category have product with facets?

[afiumano]

Yes, on a category page with products that have a product custom field assigned that is set as a facet.

[Matt Zimmermann]

The fact that the loop for the facets isn't showing anything is odd. Do you have default facets set like price or attributes? If not, try enabling one of them and see if anything shows.

[afiumano]

I added price and it is showing up. So I must have something set wrong with the custom field?

[afiumano]

Something weird happened. I selected one of the check boxes for the price facet, and when the page refreshed, the custom field facet appeared under the price one. But the custom field facet needs to appear without checking a price first.

[Matt Zimmermann]

If you have a live version of your facets working on Colossus, I would check for any custom code there and add it to the dev version you are working on here.

[afiumano]

I don't have a live version of facets working in colossus - I am redesigning a really old site in Colossus.

So I changed the Facet Display Type from checkbox to dropdown and now it is appearing - even if I remove 'price'.

But does the display type have to match what is selected for the custom field? I had the custom field in admin set as a dropdown but would like it to appear on the website as a checkbox.

[Matt Zimmermann]

To the best of my knowledge, it shouldn't matter what the custom field type is in relation to the facet display type. You may check if there is anything custom in your CSS or JavaScript which would be causing that behavior.

[afiumano]

So now I am really stumped. I left it yesterday as the facet type of dropdown. I came in this morning, changed it back to facet type of checkbox to start troubleshooting and it was working - the facet displays as checkboxes on the CTGY page. I did nothing to fix it. Very, very odd.