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>