Guest Posted December 10, 2020 Share Posted December 10, 2020 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'. Link to comment
Guest Posted December 10, 2020 Share Posted December 10, 2020 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. Link to comment
sruss76 Posted December 10, 2020 Share Posted December 10, 2020 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. Link to comment
Guest Posted December 10, 2020 Share Posted December 10, 2020 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)? Link to comment
Guest Posted December 11, 2020 Share Posted December 11, 2020 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? Link to comment
Guest Posted December 11, 2020 Share Posted December 11, 2020 <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. Link to comment
tuanphan Posted December 13, 2020 Share Posted December 13, 2020 try changing this #block-7739bbdad2f9392982d3 to this Quote .summary-item-list 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
Guest Posted December 14, 2020 Share Posted December 14, 2020 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 Link to comment
Guest Posted December 16, 2020 Share Posted December 16, 2020 The sorting problem seems to have sorted it self out, somehow. Everything is working as expected atm. Link to comment
Guest Posted December 28, 2020 Share Posted December 28, 2020 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. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.