News Category Dropdown
People have asked numerous times: How do I create a pulldown of categories from the News (or some other module)... so that the user can select a category from a pulldown, and have the page automatically filter the results.
Well, I knew it would be relatively simple with some smarty magic, and a custom built (but simple) form. So I set out to do it.... it took me all of 10 minutes.
For this demo we'll be using the News module, though the principle still applies for things like the products module, CGBlogs, or even CompanyDirectory, or if you wanted to allow the user to change the sorting. But we'll leave that as an exercise for you to do on your own.
The first step is to create a new BrowseCategory template in the news module. I called mine 'dropdown' and used this text:
{if $count > 0}
<form method="get">
<select name="news_category">
<option value="-1">All</option>
{foreach from=$cats item=node}
{if $node.count > 0}
<option value="{$node.news_category_id}" {if $news_category == $node.news_category_id}selected="selected"{/if}>{$node.news_category_name}</option>
{/if}
{/foreach}
</select>
<input type="submit" name="submit" value="Submit"/>
</form>{/if}
As you can see here, I'm creating a simple form with a dropdown and a submit button. The dropdown has one hardcoded entry with a value of -1 and a label of "All"... the rest of the entries in the dropdown are populated dynamically from the News categories.... and only the categories with entries are added to the list. The form uses the GET method (which means all of the parameters will be returned on the URL) but you could have just as easily used POST. The GET method has the advantage that people will be able to bookmark the result page properly. That's the first part of the solution.
The second part of the solution is to create a new page (or edit an existing page) and do some smarty magic on some built in smarty variables to determine what dropdown option was selected, and then call News appropriately. Here's the code I have in my page:
{assign var='news_category' value='-1'}
{if isset($smarty.get.news_category)}
{assign var='news_category' value=$smarty.get.news_category}
{/if}
{news action=browsecat}
<h3>Debug: News category = {$news_category}</h3>
<fieldset>
<legend>Articles:</legend>
{if $news_category != -1}
{news category_id=$news_category}
{else}
{news}
{/if}
</fieldset>
Lets start from the top. First I use the smarty "assign" plugin to create a smarty variable called news_category with a value of -1. Secondly, I test to see if the smarty variable $smarty.get.news_category is set, and if it is, I re-adjust the news_category smarty variable to its value. If you look up, I gave the select box in the News browse_category template the name of news_category.
Next, I simply call {news action=browsecat}, and because I marked the dropdown browse category template as the 'default' browse category template, this will display my form. If I didn't want to set my dropdown template as the default, I could have called news like: {news action=browsecat browsecattemplate=dropdown}.
Finally, I need to display the news articles that match the category id stored in the "news_category" smarty variable.... but if "All" is selected in the dropdown, I want to display the news articles from all categories. I put that code inside of a fieldset with a legend so it would be easier to see.
And that's it. Three simple steps that took me 10 minutes to implement, with no PHP coding what-so-ever. This is the power of CMSMS and Smarty. Once you get your head wrapped around this, the power you have in your fingers is unlimited, without really having to know how to program.
Extensions to this would be to modify the form, and page code to allow for a sort order, or maybe a page limit... and a further extension would be to get rid of the submit button (optionally) and just use some jquery triggers. This would be trivial to do.
I hope you have fun with this.
