Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2012-08-03 14:33:30
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
[howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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)
Offline
#2 2012-08-03 14:58:53
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,306
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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)
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#3 2012-08-03 15:01:34
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
Uli: I think I fixed it now. Let me know.
Offline
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
Great job! Can you publish the site you used this on?
Offline
#5 2012-08-07 21:43:42
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
mrdale:
Will do once the site is finished — still currently in development. Will not be going live until Fall.
progre55
Offline
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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
.
Offline
#7 2012-08-15 16:43:25
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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)
Offline
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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.
Offline
#9 2012-08-24 19:54:03
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
etc.
Will definitely take a look and Thank you Adi.
progre55
Offline
#10 2012-08-24 22:44:27
- gomedia
- Plugin Author
- Registered: 2008-06-01
- Posts: 1,373
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
Hi progre55,
Let me know if the new adi_gps beta is OK & I’ll do an official version.
Cheers,
Adi
Offline
#11 2012-09-04 19:30:08
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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
Offline
#12 2012-09-25 21:14:22
- progre55
- Member
- Registered: 2006-05-02
- Posts: 668
Re: [howto] Front End Search: Filter Articles With Drop-Down and Multi-Select Menu
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
Offline