Taisei Posted July 23, 2021 Share Posted July 23, 2021 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> EarvinChong 1 Link to comment
tuanphan Posted July 25, 2021 Share Posted July 25, 2021 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 webbroi, creedon and EarvinChong 3 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Taisei Posted July 25, 2021 Author Share Posted July 25, 2021 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? EarvinChong 1 Link to comment
tuanphan Posted July 25, 2021 Share Posted July 25, 2021 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 }, EarvinChong and webbroi 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Taisei Posted July 25, 2021 Author Share Posted July 25, 2021 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... Link to comment
tuanphan Posted July 27, 2021 Share Posted July 27, 2021 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; } EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Taisei Posted August 11, 2021 Author Share Posted August 11, 2021 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 Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 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. EarvinChong 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment