Help with Universal Filter Extension

Site URL: https://dirtyrubbers.com/exs

Hey everyone,

I recently purchased Universal Filter from SQUAREWEBSITES and tried installing it by injecting the code on my site but it doesn't seem to be working.

My goal is to have the Filter work on all summary product pages of my site.

I wasn't sure how to do that though, so to start with I only targeted the CSS selector of the summary block located on this page (#block-7739bbdad2f9392982d3): https://dirtyrubbers.com/exs

Here's what I have so far after inserting the CSS selector mentioned above:

// Header Injection
<link rel="stylesheet" href="//assets.squarewebsites.org/custom-filter/custom-filter.min.css"/>

// Footer Injection
<script>
window.customFilterSettings = {
            container: '#block-7739bbdad2f9392982d3',
            items: '.summary-item',
            settings: {
                /*----Main Look Section----*/
                hidden: false, // entire filter may be hidden if you need this
                runOnDOMReady: false, //if true, Filter init will start only after window load event
                wrapFilterContainer: false, // if true, filter container will be pasted inside <div class="cf-items-wrapper"></div> and become container itself
                placeFiltersTo: null, //css selector where to place filters like '#mycontainer'. It appends filters by default, but you may prepend, use this way: '#mycontainer|prepend'
                shuffle: false, // if true, will randomize items on page
                position: 'top', //set the position for filter to appear. May be: top, left, right
                align: 'left', // align filter options, may be: left, center, right, space-between
                noResultMessage: 'No Results', //html sting to show if no results found {filter}, {search}
                noResultOnStart: false, // if no filter selected - hide results and show noResultMessage
                customClasses: '', //add any custom classes to filter container, available: cf-sort-right, cf-sort-left, lite-dropdowns
                view: 'dropdowns', //available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline
                showItemsCount: false, // show (true) or hide (false) Items count
                itemsCount: {
                    enabled: false, //same as showItemsCount
                    text: '', //set the items text before counter, it is Items: by default and you may set your own text
                    positionOrder: 1 //items counter position, higher means last
                },
                showCheckboxes: true, // show the styled checkboxes with options
                closeOptionsOnSelect: false, // close dropdowns immediately after select
                closeOnOverScroll: false, // close opened dropdowns if they become invisible on scroll
                closeOnMouseOut: true, // close dropdowns after cursor leaving
                accordionDropdowns: false, // if true, others dropdowns closed on current one opens
                keepDropdownsOpen: false, // make dropdowns always opened
                handleImagesLoading: true, // load images with Filter and handle resizes if needed
                stripHTMLComments: true, // removes HTML comments nodes in filter grid, we do not need extra nodes there
                /*----Urls, Ajax, Query Section----*/
                urlQuery: true, // check the location url query to parse filter values from there
                listCollection: {
                    enabled: true,
                    container: null, // custom css selector that container has
                    getItemsHTMLOnly: true, // fetching will get filter items HTML by selectors from config, if set to false - 
                    itemLinkSelector: 'a' //make sure you set there the right selector to get item link
                },
                requestAttrWithAjax: true, //request items json with ajax (using Squarespace ?format=json, ?format=main-context queries), that's needed to retrieve additional values of filtered items
                waitForAjax: false, //do not filter until ajax goes and received additional json data
                collectionUrl: null, // you may set there your collection url to fetch JSON data. Required if using Filter on Summary or Gallery blocks where items have external links (or just links not to itself).
                //May be set multiple urls if Filter is activated on Products or Blog list: that way allows to fatch from multiple collections: collectionUrl: '/shop-1|/shop-2|/shop-3',
                useLocalCache: false, //save json data to localStorage if possible
                compatCatTagInQuery: true, //recognize custom dropdowns options from regular Squarespaces categories/tags queries
                useSQSProxy: {
                    enabled: true, //if enabled, Ajax response after going will be saved on my server - it is cached and faster than Squarespace
                    cacheTime: 10, // minutes to update cache 
                    removeFields: 'excerpt,variants' //by default all needed things are there, but you may add own in format: 'body,variants,excerpt'
                },
                useHistory: false, // it will use browser history to control filtering (it will pushState filter options as queries to your url)
                initState: {}, // define what options need to be enabled on filter start
                parentFilter: '.summary-item', // define the css selector of another container with Filter instance
                performanceMode: false, // disable images reloading and Squarespace Galleries/Summaries re-layout, contol elements yourself
                /*----Options Description Section----*/
                optionsDescription: {
                    container: null // if existing CSS selector there, it will show the description there
                },
                /*----Options and Options Counters Section----*/
                updateFilterOptions: {
                    enabled: true, //enable options update
                    nonExistOptions: {
                        hide: false, //if true - completely hide those that produce No results
                        disable: false, // fade out not-exists
                        disableHard: false, //fade out and make not clickable
                        moveBottom: false // in plans
                    },
                    showOptionsCounters: false, // if true - you will see a number of available items there
                    optionsCounterWrap: '- ()', // available items number will be pasted inside circle brackets
                },
                /*----Filter Pagination (Load More) Section----*/
                pagination: { //enabling pagination allows to show less items on page and even improve page loading if many items with images used
                    enabled: false, //disabled by default, set true to enable
                    pageSize: 20, // create pagination buttons
                    place: 'bottom', //or top if need prepend to place block on top
                    scrollToTop: { //use if place:bottom and want animate scrool to top
                        duration: 600 //animation duration in ms
                    },
                    backgroundColor: 'transparent', //the back color of pagination container
                    margin: '3% 0', //margins
                    padding: '0', //paddings
                    align: 'center', // align te pages numbers
                    pagesRange: 3, //show 4 first and 4 last pages
                    pagesAround: 2, //show links around active page
                    showPrevNext: { //will show next/prev elements arrows
                        enabled: false,
                        hideItems: false,
                        next: 'Next', //next link text
                        prev: 'Prev' //previous link text
                    },
                    items: { //styles of pages numbers
                        style: 'square', //square, pillow
                        width: '32px', //navigation item width
                        margin: '20px', //navigatin items margin
                        borderWidth: '2px', //items border width
                        backgroundColor: '#fff', //default background color
                        activeBackgroundColor: '#555', //active item backround color
                        color: '#000', // default items text color
                        activeColor: '#fff' //active items text color
                    },
                    loadMoreButton: {
                        enabled: true, // if enabled - will show you Load more button, no pages
                        text: 'Load More >',
                        alignment: 'center',
                        size: 'small',
                        ignoreLZSSetings: false //ignore Lazy Summaries Settings if true
                    }
                },
                /*----Mobile Panel Section----*/
                mobilePanel: { // control if you want to have separate offscreen panel with filters on small screens
                    enabled: true, // if set to false, no filter buttons on mobiles will be showed
                    forceOnWidth: '500px', // here you may force mobile view on the width you need
                    triggerButtonName: 'Filter & Sort', // trigger button text
                    align: 'left', //align the mobile filter button and panel
                    closeButtonPosition: 'left', // close button position: left, right, bottom
                    keepDropdownsOpen: null, // if false it overrides desktop settings, if true - dropdowns opened
                    closeOnSelect: false, // mobile panel closed just after user selected something
                    closeOnSearch: true, // mobile panel closed if user searced something in searc field
                    closeOnOutsideClick: true // if true, mobile panel will be closed if user clicks outside it
                },
                /*----Map Block Section----*/
                advancedMap: { // activate Filter to work with Map Block and our Advanced Map Block plugin
                    advancedMapContainer: null, // valid css selector of existing map on page
                    activateMarkerInfoOnItemHover: true, // will show marker popup on Map if you hover the item
                    activateItemOnMarkerClick: true, // if you click Marker on Map - it will add marker-activated class to item in DOM
                    activateMarkerInfoOnItemClick: false, // if you click on item In DOM - it will will show Marker info Popup
                    desactivateMarkerOnItemMouseOut: false, // hide Marker info popup after mouseleave the item in DOM
                    updateMapBound: true, // if true, Map zoom and view will change to show filtered Markers only
                    followMapBounds: false, // if true, Filter items will be filtered according to visible markers on Map
                    autocomplete: { //enable autocomplete field to search by addresses, zips, etc. Google place used
                        enabled: false,
                        positionOrder: 100,
                        text: 'Search Zip',
                        minLength: 3,
                        customSearchFunc: false,
                        timeout: 300,
                        dimension: {
                            enabled: true,
                            val: '',
                            values: {}
                        },
                        radius: { //enable radius control field and control min/max and step there
                            enabled: true,
                            hidden: false,
                            val: 100,
                            step: 1,
                            max: 200,
                            min: 10
                        },
                        circle: { // style showed radiuse circle with collors you need there
                            strokeColor: '#65bedc',
                            strokeWeight: 1,
                            strokeOpacity: 1,
                            fillColor: '#65bedc',
                            fillOpacity: 0.4
                        },
                        options: {
                            types: ['(regions)'],
                            componentRestrictions: { 'country': 'usa' } //limit the country you want to search
                        }
                    }
                },
                /*----External Filter Links, may be Filter Links for Example----*/
                externalFilterLinks: {
                    enabled: false, //disable if false
                    hideFilters: false, //hide or show real filter container
                    container: null, // css selectors where to look for filter triggers. Otherwise body will be used
                    items: 'a[href]' // css selector to bind clicks
                },
                /*----Filter Engine Section----*/
                simpleFilter: { //this is built-in filtering/sorting/searching engine, the best option to use
                    anim: true, //use defined animations or disable at all
                    layoutAnim: false,
                    show: { // define animation you filtered items will appear with
                        effect: 'scale', //available anims: 'fade','scale','slideLeft','slideTop','slideRight','slideBottom'
                        transitionDuration: 600, // time in ms to animate items
                        stagger: 16, //a step in ms to wait before animate next item
                        easing: 'ease-in-out' // valid CSS easings
                    },
                    hide: { // define animation you filtered items will hide with
                        effect: 'scale', //available anims: 'fade','scale','slideLeft','slideTop','slideRight','slideBottom'
                        transitionDuration: 200, // time in ms to animate items
                        stagger: 36, //a step in ms to wait before animate next item
                        easing: 'ease-in-out' // valid CSS easings
                    }
                },
                isotope: {
                    enabled: false, // enable Isotope if true
                    transitionDuration: 300, // transition duration, ms
                    columnWidth: null, // set the column width
                    gutter: null, // set the gutter between items
                    layoutMode: null,
                    stamp: null
                },
                mixitup: {
                    enabled: false,
                    transitionDuration: 300
                },
                /*----Filter, Sort and Search Section----*/
                clearAllButton: { //Button that resets all filter and search control
                    enabled: true, // if true, you will see Clear button, clicking it resets all filters
                    text: 'Clear All', // button value
                    place: 'before' // may be before (all dropdowns) or after or valid css selector to append in
                },
                sort: {
                    enabled: true, //enable, show or hide sort control
                    title: 'Sort', //name the sort control
                    positionOrder: 99,
                    items: [] // here you set your custom sorter functions
                },
                filter: {
                    enabled: true, //enable or disable (hide) filter controls at all
                    useItemsClassesForData: false, // try to get data without requesting JSON from item classes SS adding by default: category-something, tag-something (all parsed will be first letter Capsed)
                    cacheOptions: true, // cache options for fast build and show dropdowns even if items data not received yet
                    setCategoriesClasses: true, // add categories classes to filter items, required to filter by categories (default config)
                    setTagsClasses: true, // add tags classes to filter items, required to filter by tags (default config)
                    followNewProductsCategories: true, // follow new Products 2.0 categories (2-levels only), set to false if splitting categories to several dropdowns
                    category: { //default Categories dropdown
                        positionOrder: 2,
                        main: 'categoriesDropdown',
                        hideValueLabel: false,
                        name: 'Brand',
                        sort: 'asc',
                        getAttr: 'categories',
                        multiple: true,
                        strict: true,
                        hideDefaultLabelIfDirty: false,
                        showAll: false
                    },
                    tag: { //default Tags dropdown
                        positionOrder: 3,
                        main: 'tagsDropdown',
                        hideValueLabel: false,
                        name: 'Features',
                        sort: 'asc',
                        getAttr: 'tags',
                        multiple: true,
                        strict: true,
                        hideDefaultLabelIfDirty: false,
                        showAll: false
                    },
                    items: [] //here you set your custom dropdowns
                },
                search: {
                    enabled: true, //enable or disable search field
                    positionOrder: 100, //make the search last position
                    text: 'Search', // placeholder
                    minLength: 1, // min chars to start search
                    submitOnEnter: false, // apply search field value on enter only if true
                    timeout: 400, // debounce for typing, ms
                    regExpWordsDelimiter: null, // if null, searches exactly words order, but if set to space or custom char may split the string and search any of words
                    searchFunc: 'exst_text', // default value "exst_text" means search existing text inside this item on page. You may add addition text values to search this way: 'exst_text|tags|categories|body'. May be set to your custom function
                    customSearchFunc: false // custom function to work after searchFunc
                },
                /*----Helper Functions Section----*/
                productsBadges: null, //
                hooks: {
                    beforeCreate: null, //runs when container found but before build Filter stuff, the Filter init may be stopped there if needed
                    beforeInit: null, //function, run before filter init
                    onInit: null, //function run when main things configured 
                    afterInit: null, // after init function
                    htmlListFetched: null, // run after HTML List collection fetched (when Filter activated on Blog, Products, Events collections)
                    htmlListJSONTransform: null, // need return the transformed or untouched first argument of HTML List (Blog, Products, Events collections)
                    onStart: null, // run when some data available 
                    onDropdownsBuilt: null, // run eact time adding/checking filter options
                    afterRequest: null, //run after received data and 
                    beforeFilter: null, //run before start filter
                    onFilter: null, // run after main filter/sort thing done
                    afterFilter: null //run after animated items according to filter params
                }
            }
        };
</script>
<script src="//assets.squarewebsites.org/custom-filter/custom-filter.min.js"></script>

Any help will be appreciated!

Keep in mind I did manage to get the code to work at some point by using a simpler version of it offered by SQUAREWEBSITES, but not all functions were visible/working, even after I made sure they were set to 'true'.

1 hour ago, IXStudio said:

Hi,
Please contact to the author of it. Michael Mashai. You can contact via the slack of them or website!

Please use the like button if it helps you!

Best,
Leopold

Thank you, though I already have through the website's contact form.

Since this doesn't seem like such a complicate problem to solve though, I figured someone here would be able to provide some guidance.

All I need is for the filter to work as is.

I'm not looking to make any stylistic or functional changes that would necessarily require the author's assistance. 

well, the best person to help troubleshoot your issue, no matter how small, is the author of the extension. they know their code inside out so they are the ones i would go to for help and are in the best position to help you. you said you have already contacted them and if they don't get back to you in a day or two, contact them again.

33 minutes ago, sruss76 said:

well, the best person to help troubleshoot your issue, no matter how small, is the author of the extension. they know their code inside out so they are the ones i would go to for help and are in the best position to help you. you said you have already contacted them and if they don't get back to you in a day or two, contact them again.

I'm aware, but the code isn't even that complicated imo.

Also, can you imagine the volume of emails the author receives in any given week considering he has produced the greatest filtering & sorting extension for Squarespace (among other good extensions)?

20 hours ago, Sotiris said:

Site URL: https://dirtyrubbers.com/exs

Hey everyone,

I recently purchased Universal Filter from SQUAREWEBSITES and tried installing it by injecting the code on my site but it doesn't seem to be working.

My goal is to have the Filter work on all summary product pages of my site.

I wasn't sure how to do that though, so to start with I only targeted the CSS selector of the summary block located on this page (#block-7739bbdad2f9392982d3): https://dirtyrubbers.com/exs

Here's what I have so far after inserting the CSS selector mentioned above:

// Header Injection
<link rel="stylesheet" href="//assets.squarewebsites.org/custom-filter/custom-filter.min.css"/>

// Footer Injection
<script>
window.customFilterSettings = {
            container: '#block-7739bbdad2f9392982d3',
            items: '.summary-item',
            settings: {
                /*----Main Look Section----*/
                hidden: false, // entire filter may be hidden if you need this
                runOnDOMReady: false, //if true, Filter init will start only after window load event
                wrapFilterContainer: false, // if true, filter container will be pasted inside <div class="cf-items-wrapper"></div> and become container itself
                placeFiltersTo: null, //css selector where to place filters like '#mycontainer'. It appends filters by default, but you may prepend, use this way: '#mycontainer|prepend'
                shuffle: false, // if true, will randomize items on page
                position: 'top', //set the position for filter to appear. May be: top, left, right
                align: 'left', // align filter options, may be: left, center, right, space-between
                noResultMessage: 'No Results', //html sting to show if no results found {filter}, {search}
                noResultOnStart: false, // if no filter selected - hide results and show noResultMessage
                customClasses: '', //add any custom classes to filter container, available: cf-sort-right, cf-sort-left, lite-dropdowns
                view: 'dropdowns', //available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline
                showItemsCount: false, // show (true) or hide (false) Items count
                itemsCount: {
                    enabled: false, //same as showItemsCount
                    text: '', //set the items text before counter, it is Items: by default and you may set your own text
                    positionOrder: 1 //items counter position, higher means last
                },
                showCheckboxes: true, // show the styled checkboxes with options
                closeOptionsOnSelect: false, // close dropdowns immediately after select
                closeOnOverScroll: false, // close opened dropdowns if they become invisible on scroll
                closeOnMouseOut: true, // close dropdowns after cursor leaving
                accordionDropdowns: false, // if true, others dropdowns closed on current one opens
                keepDropdownsOpen: false, // make dropdowns always opened
                handleImagesLoading: true, // load images with Filter and handle resizes if needed
                stripHTMLComments: true, // removes HTML comments nodes in filter grid, we do not need extra nodes there
                /*----Urls, Ajax, Query Section----*/
                urlQuery: true, // check the location url query to parse filter values from there
                listCollection: {
                    enabled: true,
                    container: null, // custom css selector that container has
                    getItemsHTMLOnly: true, // fetching will get filter items HTML by selectors from config, if set to false - 
                    itemLinkSelector: 'a' //make sure you set there the right selector to get item link
                },
                requestAttrWithAjax: true, //request items json with ajax (using Squarespace ?format=json, ?format=main-context queries), that's needed to retrieve additional values of filtered items
                waitForAjax: false, //do not filter until ajax goes and received additional json data
                collectionUrl: null, // you may set there your collection url to fetch JSON data. Required if using Filter on Summary or Gallery blocks where items have external links (or just links not to itself).
                //May be set multiple urls if Filter is activated on Products or Blog list: that way allows to fatch from multiple collections: collectionUrl: '/shop-1|/shop-2|/shop-3',
                useLocalCache: false, //save json data to localStorage if possible
                compatCatTagInQuery: true, //recognize custom dropdowns options from regular Squarespaces categories/tags queries
                useSQSProxy: {
                    enabled: true, //if enabled, Ajax response after going will be saved on my server - it is cached and faster than Squarespace
                    cacheTime: 10, // minutes to update cache 
                    removeFields: 'excerpt,variants' //by default all needed things are there, but you may add own in format: 'body,variants,excerpt'
                },
                useHistory: false, // it will use browser history to control filtering (it will pushState filter options as queries to your url)
                initState: {}, // define what options need to be enabled on filter start
                parentFilter: '.summary-item', // define the css selector of another container with Filter instance
                performanceMode: false, // disable images reloading and Squarespace Galleries/Summaries re-layout, contol elements yourself
                /*----Options Description Section----*/
                optionsDescription: {
                    container: null // if existing CSS selector there, it will show the description there
                },
                /*----Options and Options Counters Section----*/
                updateFilterOptions: {
                    enabled: true, //enable options update
                    nonExistOptions: {
                        hide: false, //if true - completely hide those that produce No results
                        disable: false, // fade out not-exists
                        disableHard: false, //fade out and make not clickable
                        moveBottom: false // in plans
                    },
                    showOptionsCounters: false, // if true - you will see a number of available items there
                    optionsCounterWrap: '- ()', // available items number will be pasted inside circle brackets
                },
                /*----Filter Pagination (Load More) Section----*/
                pagination: { //enabling pagination allows to show less items on page and even improve page loading if many items with images used
                    enabled: false, //disabled by default, set true to enable
                    pageSize: 20, // create pagination buttons
                    place: 'bottom', //or top if need prepend to place block on top
                    scrollToTop: { //use if place:bottom and want animate scrool to top
                        duration: 600 //animation duration in ms
                    },
                    backgroundColor: 'transparent', //the back color of pagination container
                    margin: '3% 0', //margins
                    padding: '0', //paddings
                    align: 'center', // align te pages numbers
                    pagesRange: 3, //show 4 first and 4 last pages
                    pagesAround: 2, //show links around active page
                    showPrevNext: { //will show next/prev elements arrows
                        enabled: false,
                        hideItems: false,
                        next: 'Next', //next link text
                        prev: 'Prev' //previous link text
                    },
                    items: { //styles of pages numbers
                        style: 'square', //square, pillow
                        width: '32px', //navigation item width
                        margin: '20px', //navigatin items margin
                        borderWidth: '2px', //items border width
                        backgroundColor: '#fff', //default background color
                        activeBackgroundColor: '#555', //active item backround color
                        color: '#000', // default items text color
                        activeColor: '#fff' //active items text color
                    },
                    loadMoreButton: {
                        enabled: true, // if enabled - will show you Load more button, no pages
                        text: 'Load More >',
                        alignment: 'center',
                        size: 'small',
                        ignoreLZSSetings: false //ignore Lazy Summaries Settings if true
                    }
                },
                /*----Mobile Panel Section----*/
                mobilePanel: { // control if you want to have separate offscreen panel with filters on small screens
                    enabled: true, // if set to false, no filter buttons on mobiles will be showed
                    forceOnWidth: '500px', // here you may force mobile view on the width you need
                    triggerButtonName: 'Filter & Sort', // trigger button text
                    align: 'left', //align the mobile filter button and panel
                    closeButtonPosition: 'left', // close button position: left, right, bottom
                    keepDropdownsOpen: null, // if false it overrides desktop settings, if true - dropdowns opened
                    closeOnSelect: false, // mobile panel closed just after user selected something
                    closeOnSearch: true, // mobile panel closed if user searced something in searc field
                    closeOnOutsideClick: true // if true, mobile panel will be closed if user clicks outside it
                },
                /*----Map Block Section----*/
                advancedMap: { // activate Filter to work with Map Block and our Advanced Map Block plugin
                    advancedMapContainer: null, // valid css selector of existing map on page
                    activateMarkerInfoOnItemHover: true, // will show marker popup on Map if you hover the item
                    activateItemOnMarkerClick: true, // if you click Marker on Map - it will add marker-activated class to item in DOM
                    activateMarkerInfoOnItemClick: false, // if you click on item In DOM - it will will show Marker info Popup
                    desactivateMarkerOnItemMouseOut: false, // hide Marker info popup after mouseleave the item in DOM
                    updateMapBound: true, // if true, Map zoom and view will change to show filtered Markers only
                    followMapBounds: false, // if true, Filter items will be filtered according to visible markers on Map
                    autocomplete: { //enable autocomplete field to search by addresses, zips, etc. Google place used
                        enabled: false,
                        positionOrder: 100,
                        text: 'Search Zip',
                        minLength: 3,
                        customSearchFunc: false,
                        timeout: 300,
                        dimension: {
                            enabled: true,
                            val: '',
                            values: {}
                        },
                        radius: { //enable radius control field and control min/max and step there
                            enabled: true,
                            hidden: false,
                            val: 100,
                            step: 1,
                            max: 200,
                            min: 10
                        },
                        circle: { // style showed radiuse circle with collors you need there
                            strokeColor: '#65bedc',
                            strokeWeight: 1,
                            strokeOpacity: 1,
                            fillColor: '#65bedc',
                            fillOpacity: 0.4
                        },
                        options: {
                            types: ['(regions)'],
                            componentRestrictions: { 'country': 'usa' } //limit the country you want to search
                        }
                    }
                },
                /*----External Filter Links, may be Filter Links for Example----*/
                externalFilterLinks: {
                    enabled: false, //disable if false
                    hideFilters: false, //hide or show real filter container
                    container: null, // css selectors where to look for filter triggers. Otherwise body will be used
                    items: 'a[href]' // css selector to bind clicks
                },
                /*----Filter Engine Section----*/
                simpleFilter: { //this is built-in filtering/sorting/searching engine, the best option to use
                    anim: true, //use defined animations or disable at all
                    layoutAnim: false,
                    show: { // define animation you filtered items will appear with
                        effect: 'scale', //available anims: 'fade','scale','slideLeft','slideTop','slideRight','slideBottom'
                        transitionDuration: 600, // time in ms to animate items
                        stagger: 16, //a step in ms to wait before animate next item
                        easing: 'ease-in-out' // valid CSS easings
                    },
                    hide: { // define animation you filtered items will hide with
                        effect: 'scale', //available anims: 'fade','scale','slideLeft','slideTop','slideRight','slideBottom'
                        transitionDuration: 200, // time in ms to animate items
                        stagger: 36, //a step in ms to wait before animate next item
                        easing: 'ease-in-out' // valid CSS easings
                    }
                },
                isotope: {
                    enabled: false, // enable Isotope if true
                    transitionDuration: 300, // transition duration, ms
                    columnWidth: null, // set the column width
                    gutter: null, // set the gutter between items
                    layoutMode: null,
                    stamp: null
                },
                mixitup: {
                    enabled: false,
                    transitionDuration: 300
                },
                /*----Filter, Sort and Search Section----*/
                clearAllButton: { //Button that resets all filter and search control
                    enabled: true, // if true, you will see Clear button, clicking it resets all filters
                    text: 'Clear All', // button value
                    place: 'before' // may be before (all dropdowns) or after or valid css selector to append in
                },
                sort: {
                    enabled: true, //enable, show or hide sort control
                    title: 'Sort', //name the sort control
                    positionOrder: 99,
                    items: [] // here you set your custom sorter functions
                },
                filter: {
                    enabled: true, //enable or disable (hide) filter controls at all
                    useItemsClassesForData: false, // try to get data without requesting JSON from item classes SS adding by default: category-something, tag-something (all parsed will be first letter Capsed)
                    cacheOptions: true, // cache options for fast build and show dropdowns even if items data not received yet
                    setCategoriesClasses: true, // add categories classes to filter items, required to filter by categories (default config)
                    setTagsClasses: true, // add tags classes to filter items, required to filter by tags (default config)
                    followNewProductsCategories: true, // follow new Products 2.0 categories (2-levels only), set to false if splitting categories to several dropdowns
                    category: { //default Categories dropdown
                        positionOrder: 2,
                        main: 'categoriesDropdown',
                        hideValueLabel: false,
                        name: 'Brand',
                        sort: 'asc',
                        getAttr: 'categories',
                        multiple: true,
                        strict: true,
                        hideDefaultLabelIfDirty: false,
                        showAll: false
                    },
                    tag: { //default Tags dropdown
                        positionOrder: 3,
                        main: 'tagsDropdown',
                        hideValueLabel: false,
                        name: 'Features',
                        sort: 'asc',
                        getAttr: 'tags',
                        multiple: true,
                        strict: true,
                        hideDefaultLabelIfDirty: false,
                        showAll: false
                    },
                    items: [] //here you set your custom dropdowns
                },
                search: {
                    enabled: true, //enable or disable search field
                    positionOrder: 100, //make the search last position
                    text: 'Search', // placeholder
                    minLength: 1, // min chars to start search
                    submitOnEnter: false, // apply search field value on enter only if true
                    timeout: 400, // debounce for typing, ms
                    regExpWordsDelimiter: null, // if null, searches exactly words order, but if set to space or custom char may split the string and search any of words
                    searchFunc: 'exst_text', // default value "exst_text" means search existing text inside this item on page. You may add addition text values to search this way: 'exst_text|tags|categories|body'. May be set to your custom function
                    customSearchFunc: false // custom function to work after searchFunc
                },
                /*----Helper Functions Section----*/
                productsBadges: null, //
                hooks: {
                    beforeCreate: null, //runs when container found but before build Filter stuff, the Filter init may be stopped there if needed
                    beforeInit: null, //function, run before filter init
                    onInit: null, //function run when main things configured 
                    afterInit: null, // after init function
                    htmlListFetched: null, // run after HTML List collection fetched (when Filter activated on Blog, Products, Events collections)
                    htmlListJSONTransform: null, // need return the transformed or untouched first argument of HTML List (Blog, Products, Events collections)
                    onStart: null, // run when some data available 
                    onDropdownsBuilt: null, // run eact time adding/checking filter options
                    afterRequest: null, //run after received data and 
                    beforeFilter: null, //run before start filter
                    onFilter: null, // run after main filter/sort thing done
                    afterFilter: null //run after animated items according to filter params
                }
            }
        };
</script>
<script src="//assets.squarewebsites.org/custom-filter/custom-filter.min.js"></script>

Any help will be appreciated!

Keep in mind I did manage to get the code to work at some point by using a simpler version of it offered by SQUAREWEBSITES, but not all functions were visible/working, even after I made sure they were set to 'true'.

@michaeleparkour can you pls take a look at this?

<script>
window.customFilterSettings = {
    'targets': [{
        container: '#block-7739bbdad2f9392982d3', //css selector to target container where you want to place filter
        items: '.summary-item', //css selector for items you want to filter
        settings: {
            position: 'top',//set the position for filter to appear. May be: top, left, right
            align: 'center',// align filter options, may be: left, center, right, space-between
            showItemsCount: false, // show (true) or hide (false) Items count
            itemsCount: {
                enabled: false, // same as showItemsCount
                text: '', // set the items text before counter, it is Items: by default and you may set your own text
                positionOrder: 1 // items counter position, higher means last
            },
            keepDropdownsOpen: true,
            customClasses: 'lite-dropdowns cf-sort-right',
            /* Add any custom classes to filter container if you want to have your own to use in CSS styling,
            available: cf-sort-right (move sorting element right), cf-sort-left (move sort left), lite-dropdowns(gives lighter dropdowns stylings)*/
            view: 'dropdowns', // available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline
            /*----Mobile Panel Section----*/
            mobilePanel: {// control if you want to have separate offscreen panel with filters on small screens
                enabled: true,// if set to false, no filter buttons on mobiles will be showed
                triggerButtonName: 'Filter & Sort', // trigger button text
                keepDropdownsOpen: null, // if false it overrides desktop settings, if true - dropdowns opened
                closeOnSelect: false, // mobile panel closed just after user selected something
                closeOnSearch: true, // mobile panel closed if user searched something in search field
                closeOnOutsideClick: true // if true, mobile panel will be closed if user clicks outside it
            },
            /*----Filters Section----*/
            filter: {// here you define all filters you need and name them
                category: true,// disabling default Category dropdown
                tag: true,// disabling default Tag dropdown
                items: [{
                    name: 'Brand',// give the dropdown (fiter entity) name you want
                    multiple: true,// if true, allow to select multiple options
                 // multipleLogic: 'or',// combine each selected category with OR or AND logic
                    getAttr: 'categories'// here you say Filter to look for options in items categories
                }, {
                    name: 'Features',// give the dropdown (fiter entity) name you want
                    multiple: true,//if true, allow to select multiple options
                 // multipleLogic: 'or',// combine each selected category with OR or AND logic
                    getAttr: 'tags'// here you say Filter to look for options in items tags
                }]
            },
            sort: {// define the sorters
                enabled: true,// if false - no sorters visible/working
                items: [{
                    name: 'Price',// name your sorter
                    order: 'asc|desc',// define orders
                    hideName: false,// hide the Price name
                    orderTexts: '€ - €€€|€€€ - €'// define orders naming
                    /* If sorter named as Price, you do not need define sort selectors or function: it will work the same like you defined:
                    sort: '[data-price] parseInt'
                    */
                }]
            },
            search: {
                enabled: true,// if false, no Search input will be showed
                text: '', //set the placeholder to your search field, otherwise Search will be used
            }
        }
    }]
};
</script>
<script src="//assets.squarewebsites.org/custom-filter/custom-filter.min.js"></script>

I managed to get the filter to work using a simpler version of the code offered on the Docs.

It seems that all issues have been resolved but I will keep this topic open for a few more days until I'm 100% sure.

On 12/13/2020 at 4:06 AM, tuanphan said:

try changing this 

#block-7739bbdad2f9392982d3

to this

 

Thank you! This (almost) works perfectly.

I noticed that when I try to sort the summary block without filtering it first, the sorting functions don't work (only on desktop). 

Try it for yourself to see what I mean: https://dirtyrubbers.com/exs 

The sorting problem seems to have sorted it self out, somehow.

Everything is working as expected atm.

I'll just manually create Google Calendar links and upload the ones, and sort within the time, timezone, and the truth that it is digital close to the pinnacle of the "weblog post." It's now not a high-quality answer, however it's the excellent workaround I've come up with this website. Since blogs, like activities, are collections, this will nonetheless permit me to have "blog post" events feed into summary blocks elsewhere on my website.