abigailallen Posted March 22, 2023 Share Posted March 22, 2023 (edited) Hi, We are using a custom filter code to allow us to use Categories and Tags to filter blog posts here:https://pepper-chicory-pbsc.squarespace.com/our-people Password: hm23 We need to allow the selection of multiple categories (and tags) in order to filter posts by ‘Job Role’ and ‘Location’ simultaneously. I can currently pick one category and one tag but I need the user to be able to pick multiple tags and categories to filter the search. More specifically I need help with making the filter do the following: Functionality: allow user to pick multiple categories and tags (i.e. Solicitor, Director, Glasgow, Prestwick) to filter the blogposts. Styling: I need the filter options to appear underneath Filter By (see screenshot). I need the blogposts to appear in 3 columns rather than two (on desktop). The filter options also seem to stick to the top of the page on navigation, does anyone know how to apply that to the Filter By as well? Or remove the fixed attribute. We’d also like to make some simple front-end styling tweaks to the filters – but arent sure what is possible here. The filter needs to work on mobile devices as well. The designer that has made this site has used the following page header code injection but as I’m unfamiliar with it I’m wondering if anyone in the community could point out which parts of the code that needs to change? (code) <link rel="stylesheet" href="//assets.squarewebsites.org/custom-filter/custom-filter.min.css"/> <script> window.customFilterSettings = { 'targets': [{ container: '#block-e70159f1b4c5bee91316',// css selector for filter container items: '.summary-item',// css selector for items to filter settings: { position: 'left',//set the position for filter to appear. May be: top, left, right align: 'left',// align filter options, may be: left, center, right, space-between showItemsCount: false, // show (true) or hide (false) Items count collectionUrl: '/blog-2',// you need to set source collection url slug (like /blog) if your items have external links (not linked to themselves) 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 }, keepDropdownsOpenOnInit: false, // if set to true, dropdowns will be opened initially customClasses: 'lite-dropdowns', /* 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), cf-ctrls-inline (makes dropdowns fit one line space)*/ view: 'dropdowns', // available: dropdowns, breadcrumbs, modern, buttons, buttons-round, buttons-pill, buttons-inline sticky: {// if enabled: true - trying enable sticky position of Filter to be seen on scroll enabled: true, top: '6%' }, simpleFilter: { show: { effect: 'fade', transitionDuration: 300, stagger: 60 }, hide: { effect: 'fade', transitionDuration: 100, stagger: 18 } }, pagination: { enabled: true, // enable pagination pageSize: 30, // set the page size to 30 }, /*----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', // 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: false, // mobile panel closed if user searced something in searc field closeOnOutsideClick: false // 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: false, // disabling default Category dropdown tag: false, // disabling default Tag dropdown items: [{ name: 'Job role', // give the dropdown (fiter entity) name you want multiple: true, // if true, allow to select multiple options logic: 'and', // how to combine dropdown options with other dropdowns logic. Other value is or multipleLogic: 'or',// combine each selected option with OR or AND logic within one dropdown closedSubOptions: false, // works for Products 7.1 subcategories onl sort: 'asc', // may be asc, desc, asAllowed (need define options list in allowedOptions), or your own custom function getAttr: 'categories'// here you say Filter to look for options in items categories }, { name: 'Location',// give the dropdown (fiter entity) name you want multiple: true,//if true, allow to select multiple options getAttr: 'tags'// here you say Filter to look for options in items tags }] }, sort: {// define the sorters enabled: false,// if false - no sorters visible/working //defined: 'date_desc',// select which of defined sorters will work initially items: [{ name: 'Alphabetical', order: 'asc|desc', orderTexts: 'A-Z|Z-A', hideName: false, sort: '.summary-title-link' },{ name: 'Date',// name your sorter order: 'asc|desc',// apply the orders you want to use orderTexts: 'Older|Newer',// name the orders in format you need hideName: false,// if true, you will not see Date name sort: '[data-publish-on] parseInt'//if properly configured, each Squarespace item will have publish date as data attribute. parseInt saysFilter operate it as integer number }, { 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: false,// if false, no Search input will be showed text: 'Search', //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> Grateful for any help to understand this! More than happy for suggestions of alternative code for the filter if anyone knows easier ways. Thanks, Abigail Edited March 22, 2023 by abigailallen Link to comment
tuanphan Posted March 25, 2023 Share Posted March 25, 2023 Hi, Have you solved it yet? Have you tried contacting Author or Post on their Slack Group? Also, don't post code on public forum Earvin 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
Solution abigailallen Posted March 28, 2023 Author Solution Share Posted March 28, 2023 Solved it, thanks anyway! Link to comment
quirkadvertising Posted July 26, 2023 Share Posted July 26, 2023 Hello! We need the same feature on a website we are building. Could you share the finalized code you used to make this happen? Thanks, Link to comment
tuanphan Posted July 27, 2023 Share Posted July 27, 2023 17 hours ago, quirkadvertising said: Hello! We need the same feature on a website we are building. Could you share the finalized code you used to make this happen? Thanks, Can you share link to page where you use Filter Plugin? We can take a look Earvin 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
quirkadvertising Posted July 30, 2023 Share Posted July 30, 2023 On 7/27/2023 at 3:52 AM, tuanphan said: Can you share link to page where you use Filter Plugin? We can take a look Hello! Here is the link: https://johnaskewhomes.squarespace.com/test-home-blog password: testing We are hoping to do the following: Have four dropdown lists: Neighborhood City Interior Exterior Under each dropdown list will be a list of tags associated with that dropdown name We will add the right tags to the blogs used so when they select a specifc tag in the dropdown the blogs with this tag will show up Can you help with this? LaurenZA 1 Link to comment
tuanphan Posted July 31, 2023 Share Posted July 31, 2023 You can open Universal Filter Plugin instructions page > Scroll down to this Earvin 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
quirkadvertising Posted July 31, 2023 Share Posted July 31, 2023 10 hours ago, tuanphan said: You can open Universal Filter Plugin instructions page > Scroll down to this I am not sure where to find this. Is this separate from Squarespace? Thanks, Link to comment
paul2009 Posted July 31, 2023 Share Posted July 31, 2023 On 7/30/2023 at 2:23 AM, quirkadvertising said: On 7/27/2023 at 9:52 AM, tuanphan said: Can you share link to page where you use Filter Plugin? We can take a look Hello! Here is the link: https://johnaskewhomes.squarespace.com/test-home-blog This thread is about using the third party plugin called Universal Filter. Your post above suggested that you are already using this. This advanced filtering isn't a built-in feature so, if you need the same feature on a website we are building, you'll need to consider purchasing the add-on 🙂. tuanphan and Earvin 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
quirkadvertising Posted July 31, 2023 Share Posted July 31, 2023 1 hour ago, paul2009 said: This thread is about using the third party plugin called Universal Filter. Your post above suggested that you are already using this. This advanced filtering isn't a built-in feature so, if you need the same feature on a website we are building, you'll need to consider purchasing the add-on 🙂. Thank you for letting me know. I just purchased the plugin. It looks like it gave me the same code as what was above, but I see they have a slack group as well. I will see what happens from there or await a reply here. Thanks! Earvin 1 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