Supply Theme filter - swapping active tag if in same group

New Member
3 0 0

Hi All, 

 

I am trying to customize the behavior of the side bar filter in the supply theme.

The default behaviour of the filter is (using the photo below as an example):

If one selected Tag Cannon under the group Brand, it would filtered the products to show on Canon products.

If an user wants to instead look at Fuji products, he/she will need to first de-select Canon before selecting Fuji.

If the user doesn't de-select Canon first and try to select both Canon and Fuji at the same time, the page will simply refresh with nothing happened (i.e. Canon still checked with Fuji unchecked)

 

My desire behavior is that if the user click on Fuji and if there is already another tag that under the same group is selected (in the case here is Canon) , the filter will simply swap the Canon tag with the Fuji tag so that the user doesn't need to de-select existing tags

 

I have looked at the Supply theme's default code under collection-sidebar.liquid and there is a part of the code that seems to do the trick and with the comment " // If the tag clicked is not already active and its group contains an active tag, we will swap tag within the group.". However the behaviour shown is not what I expected or i just mis-understand what this part of the code does

 

If someone can point me to the right direction I will greatly appreciate it.

filter1.png

0 Likes
New Member
3 0 0

Anyone can help please? 
Below is the part of the code from the Supply theme that I believe should do the job ,yet it is not working

I will appreciate if someone can point me to the right direction please

 

<script>
$(function() {
var filters = $('.advanced-filter'),
el,
elGroup,
elHandle,
activeTagInGroup;

filters.on('click', function(e) {
el = $(this);
elGroup = el.data('group');
elHandle = el.data('handle');
activeTagInGroup = $('.active-filter[data-group="'+ elGroup +'"]');

// If the tag clicked is not already active and its group contains an active tag, we will swap tag within the group.
if ( !el.hasClass('active-filter') && activeTagInGroup.size() ) {
// e.preventDefault(); commented out by mo_kk
location.href = location.href
// swap tag
.replace(activeTagInGroup.data('handle'), elHandle)
// go back to page 1
.replace(/(&page=\d+)|(page=\d+&)|(\?page=\d+$)/, '');
}
});
});
</script>

0 Likes