I'm sure many of you already know this very convenient trick, but I thought I'd share it for those who don't. When it works, it really makes life a whole lot easier.
THE PLOT:
Say you have a very popular blog and you'd like to give your users the ability (via a dropdownn menu) to browse it based on certain criteria. For example: they can sort the posts by title, date published, topic, comment count, popularity, etc. Tutsplus.com is using a similar approach to allow user to filter tutorials by price (Free/Paid). Have a look:
http://courses.tutsplus.com/topics/webdesign/courses
REQUIRED EXTRAS:
I bet you already have the following extras installed, if not please go ahead and install them:
getResources
getUrlParam => To get values passed through URL parameters
getPage
HitsPage => Our page hits counter plugin that saves the data in a TV. If you have another hit counter plugin, please use it.
Of course, I also assume that you already have a working blog in MODX Revolution. If you don't, there's is a walk-through in the docs to get you started. It's easy!
Anyway, here's how to make this thing work:
THE CALL: (On the parent/container resource)
[[!getPage@Pagination?
&elementClass=`modSnippet`
&element=`getResources`
&parents=`[[*id]]`
&limit=`10`
&tpl=`myTpl`
&includeTVs=`1`
&includeTVList=`Tag,HitsPage`
&tvFilters=`Tag==%[[!getUrlParam? &name=`tag` &default=``]]%`
&sortbyTV=`[[!getUrlParam:replace=`views==HitsPage`? &name=`sortcustom` &default=``]]`
&sortby=`[[!getUrlParam:replace=`title==pagetitle`? &name=`sort` &default=``]]`
&sortbyTVType=`[[!getUrlParam:replace=`int==integer`? &name=`sorttype` &default=``]]`
&showHidden=`1`
]]
(Styled with
Bootstrap)
<!-- Sort selection -->
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Sort: [[!getUrlParam? &name=`sort` &default=`Most recent`]]) <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="[[~[[*id]]]]">Recent</a></li>
<li><a href="[[~[[*id]]? &sort=`title`]]">By title</a></li>
<li><a href="[[~[[*id]]? &sortcustom=`views` &sorttype=`int`]]">Most popular</a></li>
<li><a href="[[~[[*id]]? &tag=`sport`]]">Sport</a></li>
<li><a href="[[~[[*id]]? &tag=`politics`]]">Politics</a></li>
<li><a href="[[~[[*id]]? &tag=`fashion`]]">Fashion</a></li>
</ul>
</div>
<!--/. Sort selection -->
<!-- Pagination -->
[[!+page.nav:notempty=`
<ol class="pagination">
[[!+page.nav]]
</ol>
`]]
<!--/. Pagination -->
- Sort: [[!getUrlParam? &name=`sort` &default=`Most recent`]])
A placeholder text for the downdown menu. It shows the current sort selection. Defaults to most recent. Change as you please.
- getPage@Pagination?
Optional. I'm using a propertyset for custom pagination links. But it's not required.
- &includeTVList=`Tag,HitsPage`
For performance reasons, let's only select the TVs we need.
- &tvFilters=`Tag==%[[!getUrlParam? &name=`tag` &default=``]]%`
Match and list resources that have the specified tag, which we get from the URL parameter. If no tag specified, do not match.
- &sortbyTV=`[[!getUrlParam:replace=`views==HitsPage`? &name=`sortcustom` &default=``]]`
Again, same as above. Except we're being a bit more creative this time. Instead of using "HitPage" in the URL bar, we're using the more intuitive "views" and thanks to output modifiers, we can replace "views" by "HitsPage" just in time for getResources to process it. You'll see why in a moment. Let's carry on!
- &sortbyTVType=`[[!getUrlParam:replace=`int==integer`? &name=`sorttype` &default=``]]`
The data type of the sortbyTV, if specified above. In our case, it's going to be "int" aka "integer", because the HitsPage counts are stored as numbers.
- &sortby=`[[!getUrlParam:replace=`title==pagetitle`? &name=`sort` &default=``]]`
Same as above. Match and list resources based on the specified resource field (pagetitle in our case). If no field specified in the URL parameter, use the default: createdon.
- &showHidden=`1`
Needed if you're managing your blog, as you should, with a Articles, GridClassKey or Collections
CONCLUSION:
Because we're playing with URL parameters, we don't always need the dropdown menu to sort our posts. We can go straight to the URL bar and change our parameters there. This is why naming your parameters intuitively, as discussed above, is important.
For example:
http://myfamousblog.com/posts?tag=politics
Will only list posts with tag "politics"
http://myfamousblog.com/posts?sortcustom=views&sorttype=int
Will sort your posts by popularity. From most to least. To change the direction, use &sortdirTV with getUrlParam as we've done with the other properties. Your URL could then look like this:
http://myfamousblog.com/posts?sortcustom=views&sorttype=int&sortdir=ASC
http://myfamousblog.com/posts?sort=title
Sort posts by pagetitle.
And that's it!
There are always tons of different ways to get things done in MODX. If you know a better way, please share and point out improvements.
Cheers!
[ed. note: treigh last edited this post 12 years, 2 months ago.]
