[howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

progre55 · 2012-08-03 14:33:30

Recently I had a project where I needed to to give the front end user the ability to filter their results using drop-down select and multi-select menus. To help you understand the below example, think of a vehicle buying website where you have 1000 vehicles (all individual articles in TXP) and you need to give the user the ability to narrow their options.

What You Need

Set Up

A Section To Store All Your Vehicles
A Section Called Search
A Page that the Search Sectiion looks to
Two Forms called: SearchForm and SearchResults

Page

blah, blah, blah

<div id=container>
<txp:output_form form="SearchForm"/>
<txp:output_form form="SearchResults"/>
</div>

blah, blah, blah

SearchForm

<form action='<txp:page_url />' method="get">

<select name="Model">
<txp:if_variable name="Model" value="">
<option value="">Model</option>
<txp:else />
<option value="">All</option> </txp:if_variable>
<option <txp:if_variable name="Model" value="Ford">selected</txp:if_variable> value="Ford">Ford</option>
<option <txp:if_variable name="Model" value="Honda">selected</txp:if_variable> value="Honda">Honda</option>
</select>

<select name="Color">
<txp:if_variable name="Color" value="">
<option value="">Color</option>
<txp:else />
<option value="">All</option>
</txp:if_variable>
<option <txp:if_variable name="Color" value="Red">selected</txp:if_variable> value="Red">Red</option>
<option <txp:if_variable name="Color" value="Blue">selected</txp:if_variable> value="Blue">Blue</option>
<option <txp:if_variable name="Color" value="Green">selected</txp:if_variable> value="Green">Green</option>
</select>

<select name="Style">
<txp:if_variable name="Style" value="">
<option value="">Style</option>
<txp:else />
<option value="">All</option>
</txp:if_variable>
<option <txp:if_variable name="Style" value="Roadster">selected</txp:if_variable> value="Roadster">Roadster</option>
<option <txp:if_variable name="Style" value="SUV">selected</txp:if_variable> value="SUV">SUV</option>
</select>
<BR><BR><BR>

<INPUT NAME="Features[]" TYPE="CHECKBOX" <txp:if_variable name="Features" value="XMRadio">selected</txp:if_variable>value="XMRadio">XMRadio<BR>
<INPUT NAME="Features[]" TYPE="CHECKBOX" <txp:if_variable name="Features" value="Moon Roof">selected</txp:if_variable>value="Moon Roof">Moon Roof<BR>
<BR><BR><BR>

<input type="submit" value="Go!">
</form>

To learn more about how the above form works, please read this TXP Tip As you can see the difference between the above and this tip is that we have added a multi-select field. To learn more about this part of the form, please read the following forum discussion starting here between myself and etc

SearchResults

<txp:adi_gps name="Model" quiet="1" />
<txp:adi_gps name="Color" quiet="1" />
<txp:adi_gps name="Style" quiet="1" />

<txp:variable name="Features"><txp:etc_query globals="_GET" data="%{?Features||doarray($,htmlspecialchars).implode (%,$)}%" markup="raw" argsep="," /></txp:variable>

<txp:etc_query globals="variable" data="{?Model}{?Color}{?Style}{?Features}">

<txp:article_custom {$?({?Model}|Model='<txp:variable name="Model" />'|)} {$?({?Color}|Color='<txp:variable name="Color" />'|)} {$?({?Style}|Style='<txp:variable name="Style" />'|)} {$?({?Features}|Features='<txp:variable name="Features" />'|)}
  />

<txp:else />
<txp:article />
</txp:etc_query>

To learn more about how the above form works, please read this TXP Tip To learn more baout this part of the form, please read the following forum discussion starting here between myself and etc

Results

If I did not make any mistakes with the above, you should now have a fully functional form to help your end users filter their results. Obvioulsy, this form can be modified for numerous projects especially real estate websites which I know has been mentioned many times.

If you have any questions, let me know and I will attempt to pay-it-forward with assistance.

Thank You

Hands down the difference between TXP and the others is our community. The community of core developers, moderators, plug in authors and users is tremendous. I cannot emphasize this enough or credit everyone who has helped me in the past. For this project, I need to make special mention and give special credit to the following people:

etc: Without your skills, plug-in , time and patience the multi-select would not have happened nor would the search results form be as streamlined and user friendly
gomedia: Without your skills, plug-in and tip , the foundation of this tutorial would not have happened
gerahrd: Plain and simple your plug-in rocks and is used on all my projects and allows me to really open up the possibilites
dimitri: Your Post kicked off my research and was a tremendous guide
bloke: Although your plug-ins were not used for this tutorial the work that you do is the reason TXP is where it is today. The fact that you think out of the box gives encouragement to all. I use your plug-ins on all my projects. Thank you again and keep up the efforts.

Last edited by progre55 (2012-08-15 16:44:54)

uli · 2012-08-03 14:58:53

progre55, thanks for posting this!

One plea: Where you linked to the etc_query topic, you linked to pages. These are user/pref defined, however, depending on the number of posts per page one has chosen. Could you try to find the two posts you originally meant? Thanks.

Additions re using custom fields.

Last edited by uli (2013-08-21 11:09:54)

progre55 · 2012-08-03 15:01:34

Uli: I think I fixed it now. Let me know.

mrdale · 2012-08-07 21:22:09

Great job! Can you publish the site you used this on?

progre55 · 2012-08-07 21:43:42

mrdale:

Will do once the site is finished — still currently in development. Will not be going live until Fall.

progre55

etc · 2012-08-15 16:12:42

progre55: you should remove the final ? in <txp:etc_query globals="variable" data="{?Model}{?Color}{?Style}{?Features}?">, otherwise it will never enter the <txp:else /> part. Also, be sure to keep Features[] inputs in the same order that in glz_custom_fields.

progre55 · 2012-08-15 16:43:25

etc.

Thanks. I will make sure to do so as I move forward with the project. I also updated the above code in case people are following or using it.

progre55

Last edited by progre55 (2012-08-15 16:45:28)

etc · 2012-08-24 19:47:30

With the latest version of adi_gps you should be able to import and implode the Features array as

<txp:adi_gps name="Features" glue="%" quiet="1">

which is much simpler than

<txp:variable name="Features"><txp:etc_query globals="_GET" data="%{?Features||doarray($,htmlspecialchars).implode (%,$)}%" markup="raw" argsep="," /></txp:variable>

Then just change for Features='%<txp:variable name="Features" />%' the corresponding part of article_custom inside etc_query. Thanks to Adi for the update.

progre55 · 2012-08-24 19:54:03

etc.

Will definitely take a look and Thank you Adi.

progre55

gomedia · 2012-08-24 22:44:27

Hi progre55,

Let me know if the new adi_gps beta is OK & I’ll do an official version.

Cheers,

Adi

progre55 · 2012-09-04 19:30:08

Adi:

Sorry for the delayed response. Will be working on this project next week and will let you know. Another project took priority and reason for the delay.

progre55

progre55 · 2012-09-25 21:14:22

Adi:

Quick question — have been working on the project now — was about to make the change to the Beta and associated updates — if things go south — can I upload the old one without any issues. Just want to check before doing it since the rest of the porject or most of it is set and working with the old set up.

progre55

Textpattern CMS

Textpattern CMS support forum

#1 2012-08-03 14:33:30

[howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#2 2012-08-03 14:58:53

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

Additions re using custom fields.

#3 2012-08-03 15:01:34

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#4 2012-08-07 21:22:09

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#5 2012-08-07 21:43:42

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#6 2012-08-15 16:12:42

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#7 2012-08-15 16:43:25

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#8 2012-08-24 19:47:30

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#9 2012-08-24 19:54:03

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#10 2012-08-24 22:44:27

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#11 2012-09-04 19:30:08

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

#12 2012-09-25 21:14:22

Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu

Board footer