Universal Filter Extension - I need help with coding

Site URL: https://www.davebella.com.au/shopall

Hi people,

Site URL: https://www.davebella.com.au/shopall

I recently purchased Universal Filter from SQUAREWEBSITES and injected the code on my site but it doesn't seem to be working or appearing at all. I want the sort by and filtering function on the shop page to work but i'm struggling to see what the problem is.

it could be the container targeting that was inaccurate but please, if anyone could help me inject this on to my site, that would be of great help. Thanks

<script>
window.customFilterSettings = {
    'targets': [{
        container: 'content', //css selector to target container where you want to place filter
        items: 'list-grid', //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>

Line 04-Line 05 in your code

container: 'content', //css selector to target container where you want to place filter
        items: 'list-grid', //css selector for items you want to filter

it should be

container: '.list-grid', //css selector to target container where you want to place filter
        items: '.grid-item', //css selector for items you want to filter

2 hours ago, tuanphan said:

Line 04-Line 05 in your code

container: 'content', //css selector to target container where you want to place filter
        items: 'list-grid', //css selector for items you want to filter

it should be

container: '.list-grid', //css selector to target container where you want to place filter
        items: '.grid-item', //css selector for items you want to filter

 

Thank you for your help, it seemed to work with that. However, on the mobile version, the sort by filter is appearing on the side of the product list rather than at the top.

Do you know the CSS code I can enter to fix this so that it can appear at the top?

4 hours ago, Taisei said:

Thank you for your help, it seemed to work with that. However, on the mobile version, the sort by filter is appearing on the side of the product list rather than at the top.

Do you know the CSS code I can enter to fix this so that it can appear at the top?

try changing this

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
            },

to this

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
				position: 'top',
                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
            },

6 hours ago, tuanphan said:

try changing this

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
            },

to this

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
				position: 'top',
                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
            },

 

Unfortunately this didn't fix the filter and sort button. it still stays on the left side...

On 7/25/2021 at 10:33 PM, Taisei said:

Unfortunately this didn't fix the filter and sort button. it still stays on the left side...

Add to Design > Custom CSS

button.mobile-filter-trigger {
    display: block !important;
    width: 100% !important;
}

On 7/25/2021 at 7:23 PM, tuanphan said:

try changing this

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
            },

to this

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
				position: 'top',
                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
            },

 

Hi, sorry to ask again. Would you know a CSS or any altering of this code above to remove the categories and tag drop down while only showing the sort by and search elements?

Thanks

On 8/11/2021 at 7:34 PM, Taisei said:

Hi, sorry to ask again. Would you know a CSS or any altering of this code above to remove the categories and tag drop down while only showing the sort by and search elements?

Thanks

Remove this code

  /*----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
                }]
            },

Since Filter is paid plugin. You should remove code from your question.