Jump to content

Select multiple Categories using Filter Code

Go to solution Solved by abigailallen,

Recommended Posts

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

 

 

Screenshot 2023-03-22 at 14.43.21.png

Edited by abigailallen
Link to comment
  • abigailallen changed the title to Select multiple Categories using Filter Code
  • 3 months later...
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

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
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?

Link to comment
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 🙂.

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
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! 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.