Restrict Low Search toggles to one selection per group

Question

We have a channel with categories that we are filtering on using Low Search, some of the category groups in which assignments are made for an entry are exclusive, i.e. the entry can only ever belong to one category in that group (Country for example).

We need to let users toggle categories on and off to filter results (Show me all mills in 'England' which are 'Water' mills) but we do not want to allow a user to apply multiples in certain categories (Show me all mills in 'England AND Scotland' which are 'Water' mills).

{exp:low_search:filters query="{segment_3}"}
    <ul>
        <li>Countries
            {exp:gwcode_categories
                id="FilterCountries"
                group_id="9"
                show_empty="no"
                orderby="cat_name"
                parse="inward"
                style="nested"
                }
                <li {if cat_id IN ({low_search_category})}class="current_filter"{/if}>
                    <a href="{low_search:url result_page='/results' toggle:category='{cat_id}'}">{cat_name}</a>
                </li>
            {/exp:gwcode_categories}
        </li>

We then repeat the list item for each category group we are using, so we have subsequent groups as per the above for 'Power Sources', 'Rivers' and 'Types'. Some of these (Type for example) may have more than one category assignment so we need a solution that allows us to restrict the additive toggle 'per group'.

Any ideas?

Answer 1

First of all, instead of using a single category parameter for all groups, try giving each group its own parameter using Category Groups. So, for example, use category:sources, category:rivers and category:types.

Each group parameter like that will be combined with AND, as per usual with parameters. But for each group, you can choose to either have any or all categories match, by using the require_all parameter.

Also, per group and using the URL tag, you can choose to either set the entire value, or toggle a value. Toggling a param value will look at the parameter, if the given value is not present, LS will add it, and vice versa. But not using toggle: will set the entire param to the given value.

I'm assuming you're using multiple gwcode_categories tags to output the different groups. As an example, using native tags:

{exp:low_search:filters query="{segment_2}" result_page="search"}

    {!-- Allows you to select multiple categories in this group --}
    {exp:channel:categories category_group="1"}
        <a href="{low_search:url toggle:category:group1="{category_id}"}">{category_name}</a>
    {/exp:channel:categories}

    {!-- Will only select a single category in this group --}
    {exp:channel:categories category_group="2"}
        <a href="{low_search:url category:group2="{category_id}"}">{category_name}</a>
    {/exp:channel:categories}

{/exp:low_search:filters}

Answer 2

Could you use Javascript/jQuery to disable or remove links within one category group if any of the other categories in that group are selected?

I did something the other day with jQuery to look within a list of links and open the group if there was a selected filter in that group. I imagine that it would be quite similar to what you want to do.

Each of my filter groups is being output like this (this is group 6):

{exp:channel:categories channel="products" category_group="6"}
    {if count ==  1}<h4 class="filter closed">Product type</h4>
    <ul class="filter-set">{/if}
        <li{if '{low_search_category}' ~ '/(^|\|)'.category_id.'($|\|)/'} class="selected"{/if}>
           <a href="{low_search:url toggle:category='{category_id}'}">{category_name}</a>
        </li>
    {if count == total_results}</ul>{/if}
{/exp:channel:categories}

So if a particular filter is selected, its parent li gets the class "selected".

I've then got some jQuery which does this;

$('.filter-set').find('.selected').parent().slideDown();

This 'opens' the list if there is a selected item within it.

So to get the other filters in a list we could do

$('.filter-set').find('.selected').siblings('li');

Now, to get rid of the links is a bit more tricky. I think you'd need a function that took the link text, removed the link node and then wrote the link text back in. Of course, you'd need to do the reverse when the selected filter was deselected.

There must be a simpler way of doing that bit though...

How about (not tested)...

$('.filter-set').find('.selected').siblings('li').find('a').removeAttr('href');