How to implement product filters and sort options like this?

Hi there, i´m going to made a website that needs product sorting and filter options like this example ( check left column):
http://www.dafiti.com.ar/femenino/indumentaria/jeans-femenino/

Categories, Brands, Color, Price range, sex, etc.

Any ideas?

Thank you!

Sebastián.

That depends entirely on how you want to manage your content/inventory. Are you asking how to set up a storefront that would include this feature or do you already have a plan for how you're handling your content and inventory and you want advice on how to incorporate sorting and filtering? If you're planning on using standard documents for item management you could use a combination of tagging, URL parameters, and a couple existing snippets to handle your filtering.

There are hundreds of ways to handle something like this, you will probably need to be more specific to get useful answers.

Hi claytonk! Thanks for your reply.

I need advice on how to incorporate sorting and filtering options, i´m thinking of using standard documents with tv´s for all the information. The website will be only for shoes, so it´s simpler to develop than the example.

What i need is how to implement the filtering ( Categories, Brands, Color, Price range, sex, etc. ), of course this information will be set in each product with tv´s, what i want to know is the best way to implement it in the frontend. And the sorting options too.

Thanks!

Quote from: claytonk at Mar 10, 2015, 07:39 PM

That depends entirely on how you want to manage your content/inventory. Are you asking how to set up a storefront that would include this feature or do you already have a plan for how you're handling your content and inventory and you want advice on how to incorporate sorting and filtering? If you're planning on using standard documents for item management you could use a combination of tagging, URL parameters, and a couple existing snippets to handle your filtering.

There are hundreds of ways to handle something like this, you will probably need to be more specific to get useful answers.

There are lots of ways to do this, but here's a quick way that jumps to mind:

• If you have very general categories (like mens/womens/boots/etc.) separate these by folder
• Use an autotag tv to add specific features to your products (color, brand, etc.)
• Setup your display page to populate with a getResources or pdoResources call and use something like getUrlParam (http://rtfm.modx.com/extras/revo/geturlparam) inside the call to populate the parents/resources, tvFilters, and where parameters.
• Setup your filter links to refer back to your display page with an appended URL parameter that matches a corresponding keyword you've used for your products

For example:

Let's say you have a filter for color that includes filter links for red, green, and pinkalicious. The filter link href for red could be something like



This appends the &color=red URL parameter. Your getResources/pdoResources call would include



This will return only items that have "red" as a keyword in your tv.

If you want to pull only contents from a specific folder (i.e. boots, which has resource ID 10) your link to "Boots" would include an href like



and your getResources/pdoResources call would include



Price ranges could be done using the &where parameter and links with URL parameters set for minimum/maximum range. NOTE: This doesn't work with TV values that I know of so you would have to place the price in a standard resource field, like [[*description]]. Something like



You may want to place this inside a conditional call so it's only triggered if the url parameters exist. This isn't ideal, but if you don't want to write a snippet to accomplish some of this it might bet you by.

Hope that helps get you started.

Thanks claytonk four your response and time!

Nice approach, and very well explained! I use fastField (http://rtfm.modx.com/extras/revo/fastfield) instead of geturlparams, but the idea is the same, send variables and values via url and filter getresources calls. One question, if i have for example checkboxes with multiple values, for example, colors, and the user should select one or more colors to filter, do you know how to pass this multiple values via url, i suppouse it´s and array with values but don´t know how to implement it.

Thanks!!

Sebastián.

Each value needs a name, so your url would need to look something like this:

You can have as many url variables as you like this way. Hope that answers your question.