Button to show/hide filters - advanced

Use the Script to add show/Hide button functionality on desktop

const FILTER_SHOW_ICON = "//cdn.shopify.com/s/files/1/0062/3040/9298/t/27/assets/filter_black.svg?v=7134740416640415590";
const FILTER_HIDE_ICON = "//cdn.shopify.com/s/files/1/0062/3040/9298/t/27/assets/filter_black.svg?v=7134740416640415590";

var __isp_options = { 

isp_serp_callback: function (data) {

filtersContainer();
filtersActivationButton();
Filter.set();

},

};

const Filter = {
set: () => {
Filter.colorsFacet();
Filter.sizesFacet(9);
Filter.collapsing();
Filter.customOnClick();
},

colorsFacet: () => {
const $facet = $('#single_facet_Colors, #single_facet_Color');

$facet.find('.isp_facet_value_color_swatch').each(function () {
$(this).find('.isp_facet_value_name span').appendTo($(this).find('a'));
})
},

sizesFacet: (colorsShow) => {
const $facet = $('#single_facet_Size');
const $visibleSizes = $facet.children('.isp_facet_value');
const $hiddenSizes = $facet.find('.isp_facet_unvisible_values');

if ($hiddenSizes) {
const visibleLength = $visibleSizes.length;
const takeHiddenColors = colorsShow - visibleLength;
$hiddenSizes.find('.isp_facet_value').slice(0, takeHiddenColors).insertBefore($hiddenSizes);

if (!$facet.find('.isp_facet_unvisible_values .isp_facet_value')) {
$facet.find('.isp_facet_show_hide_values').hide();
}
}
},

collapsing: () => {
$('.isp_single_facet_wrapper').each(function () {
const $facet = $(this);

$facet.find('.isp_facet_title').on('click', function (e) {
const expanded = $(this).attr('aria-expanded');
let h = 0;

if (expanded === 'true') {
$facet.children().each(function () {
h += $(this).outerHeight(true);
});

} else {
h += $(this).outerHeight(true);
}

$facet.css('max-height', h);
})
})
},

customOnClick: () => {
const $facet = $('.isp_facet_value>a');
$facet.removeAttr('onclick');

$facet.click(function (e) {
if ($('#isp_search_result_page_container').hasClass('showFilters')) {
ispDoFacetedSearchWrapper(e, this);
$('#isp_left_container').addClass('display_refine_slide').css({'opacity': 1, 'visibility': 'visible'});
$('#isp_center_container').addClass('display_refine_slide');
}
})
}
};

function filtersActivationButton() {
if (!$('#isp_refine_nevigation').hasClass('with_custom_icons')) {
let $filter = $('#isp_refine_nevigation'),
$searchResults = $('#isp_search_result_page_container'),
$filterText = $filter.find('#isp_refine_button'),
iconsHTML = '';
$mobileFilter = $('<span id="isp_refine_button_mobile">Filters</span>');

$filter.removeAttr('onclick');
$filter.append($mobileFilter);

iconsHTML += '<span class="isp_filter_icons">';
iconsHTML += '<img src="' + FILTER_SHOW_ICON + '" class="isp_filter_icon_show">';
iconsHTML += '<img src="' + FILTER_HIDE_ICON + '" class="isp_filter_icon_hide">';
iconsHTML += '</span>';

$filter.append(iconsHTML).addClass('with_custom_icons');


if ($filter.attr('refine_display') === 'yes') {
$searchResults.addClass('showFilters');
$filterText.text('Hide Filters');
} else {
$searchResults.removeClass('showFilters');
$filterText.text('Show Filters');
}

setTimeout(function () {
$('.isp_center_container_header').css({
'margin-left': 'calc(-16px - ' + $('#isp_left_container').width() + 'px',
'width': 'calc(100% + 16px + ' + $('#isp_left_container').width() + 'px)'
})
}, 700);

$filter.on('click', function (e) {
ispRefineSectionDisplay(e, this);

if ($filter.attr('refine_display') === 'yes') {
$searchResults.addClass('showFilters');
$filterText.text('Hide Filters');
const leftContainerWidth = $('#isp_left_container').width();
$('.isp_center_container_header').css({
'margin-left': 'calc(-16px - ' + leftContainerWidth + 'px',
'width': 'calc(100% + 16px + ' + leftContainerWidth + 'px)'
})
} else {
$searchResults.removeClass('showFilters')
$filterText.text('Show Filters');
$('.isp_center_container_header').css({'margin-left': 0, 'width': '100%'})
}

SizeGroups.init(__serpVar.data)
});
}
}

function filtersContainer() {
if (window.matchMedia('(min-width: 641px)').matches) {
$('#isp_left_container').addClass('display_refine_slide').css({'opacity': 1, 'visibility': 'visible'});
$('#isp_center_container').addClass('display_refine_slide');
$('#isp_refine_nevigation').attr('refine_display', 'yes');
$('#isp_search_result_page_container').addClass('showFilters');
}
}