[howto] Filter article lists by custom field using drop-down select menus

aswihart · 2010-02-21 17:54:05

Here is a way to make custom field drop-down select menus on the front-end of your site to filter your article list display, as seen here, displaying article lists with category page and custom field context sensitivity. It requires adi_gps and use of the variable / if_variable tags (but glz_custom_fields is a logical complement). This example uses one or two custom fields as filter parameters, but you could expand on this to include as many custom fields as you want if you make sure to set up your if_variable tag logic correctly with separate article_custom tags for each condition. Maybe smd_if would come in handy if you wanted to get more complicated with several filters.

I’ve hard-coded the option elements in my html form with all the possible custom field values that I have assigned to articles (here presented using only three values per custom field), and each of those has if_variable tags to test for the current value for each variable (as set by adi_gps). This will give the current options in each drop-down the selected attribute after you submit the form and arrive at the filtered article list page (so you can’t select them again if they are already selected). The form will automatically submit all selected values when you change one of them using a drop-down menu.

Create variables from url queries with adi_gps:

<txp:adi_gps name="Ethnicities" quiet="1" />
<txp:adi_gps name="Ingredients" quiet="1" />

Make the form for selecting custom fields and submitting url queries:

<form action='<txp:page_url />' method="get"> <!--use the current url as the base for submitting url queries, preserving whatever section or category you're currently in-->

<select name="Ethnicities" onChange="this.form.submit();"> <!--the onChange javascript attribute will automatically submit the form when the user selects any value other than the current one-->
  <txp:if_variable name="Ethnicities" value="">
    <option value="">Ethnicities...</option> <!--if not currently filtering by Ethnicity, show a title for this custom field menu-->
  <txp:else />
    <option value="">All</option> <!--if currently filtering by Ethnicity, create an option with no value set, so when selected it will reset the filter by Ethnicity-->
  </txp:if_variable>
  <option <txp:if_variable name="Ethnicities" value="Italian">selected</txp:if_variable> value="Italian">Italian</option>
  <option <txp:if_variable name="Ethnicities" value="Indian">selected</txp:if_variable> value="Indian">Indian</option>
  <option <txp:if_variable name="Ethnicities" value="Mexican">selected</txp:if_variable> value="Mexican">Mexican</option>
</select>

<select name="Ingredients" onChange="this.form.submit();"> 
<txp:if_variable name="Ingredients" value="">
  <option value="">Ingredients...</option>
<txp:else />
  <option value="">All</option>
</txp:if_variable>
<option <txp:if_variable name="Ingredients" value="Garlic">selected</txp:if_variable> value="Garlic">Garlic</option>
<option <txp:if_variable name="Ingredients" value="Peppers">selected</txp:if_variable> value="Peppers">Peppers</option>
<option <txp:if_variable name="Ingredients" value="Chicken">selected</txp:if_variable> value="Chicken">Chicken</option>
</select>

<noscript><input type="submit" value="Go!"></noscript> <!--only needed for the tiny fraction who have javascript turned off and won't automatically submit the form on selecting new values-->
</form>

Make your conditional article lists:

<txp:if_variable name="Ethnicities" value="">
<txp:if_variable name="Ingredients" value=""> 
         <!--if no url queries-->
         <txp:article />
<txp:else />
         <!--if Ingredients but no Ethnicities in url query-->
         <txp:article_custom category='<txp:category />' Ingredients='<txp:variable name="Ingredients" />'  />
</txp:if_variable>
<txp:else />
<txp:if_variable name="Ingredients" value="">
         <!--if Ethnicities but no Ingredients in url query-->
         <txp:article_custom category='<txp:category />' Ethnicities='<txp:variable name="Ethnicities" />'  />
<txp:else />
         <!--if both Ethnicities and Ingredients in url query-->
         <txp:article_custom category='<txp:category />' Ingredients='<txp:variable name="Ingredients" />' Ethnicities='<txp:variable name="Ethnicities" />'  />
</txp:if_variable>
</txp:if_variable>

whocarez · 2010-07-18 15:11:23

Thanks for this example!
Is it possible to take the values for ethnicity from custom_fields? For example: custom_1 is ethnicity and I have three articles with custom_1 = Italian, Mexican and Indian. Can I somehow automatically generate this list with existing values in custom_1?

<option <txp:if_variable name="Ethnicities" value="Italian">selected</txp:if_variable> value="Italian">Italian</option>
<option <txp:if_variable name="Ethnicities" value="Indian">selected</txp:if_variable> value="Indian">Indian</option>
<option <txp:if_variable name="Ethnicities" value="Mexican">selected</txp:if_variable> value="Mexican">Mexican</option>

Last edited by whocarez (2010-07-18 15:13:33)

aswihart · 2010-07-18 16:41:32

I asked this same question and got a a good answer here. That method involves using article_custom to run through all your articles, pulling out a list of custom field values from those articles, and preventing duplicate values using the if_different tag.

Another option that I like better is to use rah_repeat, like below:

<select name="cf1" onChange="this.form.submit();">
        <option value="">All</option>
<txp:rah_repeat value="value1,value2,value3,value4,value5,..." >
   <txp:if_custom_field name="cf1" val='<txp:rah_repeat_value />'>
        <option selected value='<txp:rah_repeat_value />'><txp:rah_repeat_value /></option>
   <txp:else />
	 <option value='<txp:rah_repeat_value />'><txp:rah_repeat_value /></option>
   </txp:if_custom_field>
</txp:rah_repeat>
</select>

You do have to type out the values in the rah_repeat tag, but this surely easier on your web server than the first solution. You can just go into glz_custom_fields and copy the values, then paste them in the tag like above.

Here’s hoping for a simple custom_field_list tag in the next version of Textpattern.

whocarez · 2010-07-19 06:27:31

Thanks I will give the first variant a try.

Bloke · 2010-07-19 09:28:34

aswihart wrote:

Here’s hoping for a simple custom_field_list tag in the next version of Textpattern.

Not quite, but you’ll be able to do more complex searches with if_custom_field.

Doesn’t glz_cf have a tag that you can get all the values assigned to a given custom field? If not, try asking Gerhard as it would fit rather well, imo.

ChrisBrad51 · 2010-08-08 05:39:05

I am eagerly waiting for the next version of Textpattern…

I think it will be more organized to ease our work…custom_field_list tag must be included in the next version…

Thanks…:)

Last edited by ChrisBrad51 (2010-08-31 16:47:37)

radneck · 2010-09-29 03:55:44

Bloke wrote:

Doesn’t glz_cf have a tag that you can get all the values assigned to a given custom field?

Have a look at esq_glzcfvallist.

dorka · 2013-12-19 23:17:16

aswihart, thank you for the tutorial. It helped me a greate deal in constructing my own form for filtering articles, but I have a problem with it.
Her is my case:
I have a catalogue of items (girl’s dresses), each dress is an article. They are all in one section “Catalogue”. They are grouped in diferent categories by style (baroque, clasic, romantic). I have placed a category list in the section form so that the visitor can only view one category at a time. Further on I need to add a size filter to this category list, using values from a custom field.
I’ve created a select form according to the above article and I used adi_gps to pick the variable of the selected value from the url and use it as a filter parameter.
The problem is that when I select a value in the select form, the url doesn’t keep the information about the selected category. Here is the url of the category list:
bc. http://www.mysite.com/03_v_nabidce/?c=baroko
and here is the url of the same page after I choose the filter value in the select form:
bc. http://www.mysite.com/03_v_nabidce/?SelectSize=116
So when the request of the size is made it doesn’t return the category list filtered by custom field value, but the entire section list filtered by custom field value.
Any idea, please?

etc · 2013-12-20 13:17:06

dorka wrote #277467:

I’ve created a select form according to the above article and I used adi_gps to pick the variable of the selected value from the url and use it as a filter parameter. The problem is that when I select a value in the select form, the url doesn’t keep the information about the selected category.

Have you put both (size and category) <select /> boxes inside the same <form />?

dorka · 2013-12-20 13:22:24

Hi, etc,
I dont use select form for choosing category. I have a submenu with categories. Here is my code:

<!--------------- category menu ------------------>
       <div class="categorylist">
           <ul class="category_list">
             <li<txp:if_category> class="active"</txp:if_category>>
                <txp:section link="1">Všechny modely</txp:section >
             </li>
             <txp:category_list parent='modely' exclude="modely, novinky"  wraptag="" break="" >
                <li<txp:if_category name='<txp:category />'> class="active"</txp:if_category>>
<txp:category title="1" link="1" />
                </li>     
             </txp:category_list>
           </ul>
       </div> <!-- cat_list -->

<!--------------- select size ------------------>

<txp:if_section name="03_v_nabidce">
    <div class="selectsize">
       <form action='<txp:page_url/>' method="get"> <!--use the current url as the base for submitting url queries, preserving whatever section or category you're currently in-->
          <select name="SelectSize" onChange="this.form.submit();"> <!--the onChange javascript attribute will automatically submit the form when the user selects any value other than the current one-->
             <txp:if_variable name="SelectSize" value="">
                <option value="">Všechny velikosti</option> <!--if not currently filtering by Ethnicity, show a title for this custom field menu-->
             </txp:if_variable>
             <option <txp:if_variable name="SelectSize" value="110">selected</txp:if_variable> value="110">110</option>
             <option <txp:if_variable name="SelectSize" value="116">selected</txp:if_variable> value="116">116</option>
             <option <txp:if_variable name="SelectSize" value="122">selected</txp:if_variable> value="122">122</option>
          </select>
       </form>
    </div> <!-- sizes -->
          <noscript><input type="submit" value="Go!"></noscript> <!--only needed for the tiny fraction who have javascript turned off and won't automatically submit the form on selecting new values-->

</txp:if_section>

etc · 2013-12-20 13:27:03

Hi dorka,

then you should put a hidden c input inside <form>:

<txp:if_category><input name="c" type="hidden" value='<txp:category />' /></txp:if_category>

dorka · 2013-12-20 13:46:35

Awsome! I wouldn’t have come up with this by myself. Thanks a lot.

Textpattern CMS

Textpattern CMS support forum

#1 2010-02-21 17:54:05

[howto] Filter article lists by custom field using drop-down select menus

#2 2010-07-18 15:11:23

Re: [howto] Filter article lists by custom field using drop-down select menus

#3 2010-07-18 16:41:32

Re: [howto] Filter article lists by custom field using drop-down select menus

#4 2010-07-19 06:27:31

Re: [howto] Filter article lists by custom field using drop-down select menus

#5 2010-07-19 09:28:34

Re: [howto] Filter article lists by custom field using drop-down select menus

#6 2010-08-08 05:39:05

Re: [howto] Filter article lists by custom field using drop-down select menus

#7 2010-09-29 03:55:44

Re: [howto] Filter article lists by custom field using drop-down select menus

#8 2013-12-19 23:17:16

Re: [howto] Filter article lists by custom field using drop-down select menus

#9 2013-12-20 13:17:06

Re: [howto] Filter article lists by custom field using drop-down select menus

dorka wrote #277467:

#10 2013-12-20 13:22:24

Re: [howto] Filter article lists by custom field using drop-down select menus

#11 2013-12-20 13:27:03

Re: [howto] Filter article lists by custom field using drop-down select menus

#12 2013-12-20 13:46:35

Re: [howto] Filter article lists by custom field using drop-down select menus

Board footer