We've all been there. You're working with a CMS, and a situation arises where your site has a very specific requirement for its content architecture that isn't possible to build in a clean way with the off-the-shelf parts your CMS provides. Even Webpop and its powerful standard library of Pop Tags can't possibly cover every content architecture situation.
But the cool thing about Webpop is that it's an open system which makes it easy for you to create custom Pop Tags that render out content exactly how you like it. In this post, I'll show you how to create a simple extension that uses elastic search to create an events calender.
Creating your own Pop Tag essentially means that you will author a common.js module which returns a data object that can be used render values in your templates like any other Pop Tag. There is a great primer on the basics of it in our extension documentation. But for now, just follow along with this post and you'll get a pretty good idea of how things work.
Make friends with Elastic Search
One of the core pieces of infrastructure that the Webpop cloud supplies is an elastic search engine. It's a serious powertool you should have in your arsenal when forging a new Pop Tag.
It lets you search your dynamic content for the information that you need to build a custom information architecture, and is incredibly fast.
I'm going to use it here to build a simple extension that organizes a collection of tour dates into years and months.
Building a Tour Dates Calendar
In this example, we will be working with a set of tour date entries that span from 2013 - 2014. Each entry has a 'date' field which specifies when the tour date occurs. This field will be the key piece of information we will query with elastic search to organize our entries into a calendar.
We'll start with the calendar.js extension itself:
The first thing you'll notice is that calendar.js exports three modules, 'years', 'months' and 'entries_for'. The first two, 'years' and 'months' perform a similar task, they return a simple timeline array that we will use to structure our calender into years and months. The third 'entries_for' returns the entries who's 'date' field falls within a given month.
Once this exension get assigned to the tour dates section, we can use these three exports as Pop Tags in the tour dates template. Here's what that looks like:
Rather than dig into every last detail of whats going on here. I'm just going to go over what is happening in the big picture. There's really three steps:
<pop:years>does a search to figure out how many years this calender will have, and then iterates through them in the template. In this case it will just be two, 2013 and 2014. The value of the year gets rendered on Line 9.
(1 search occurs here)
- We then pass the 'start' and 'end' dates of the current year to
<pop:months>which then returns a collection of the months where tour dates occer in the given year.
(2 searches occur here, since we're iterating through two years)
- Finally, we pass the 'start' and 'end' of each month to
<pop:entries_for>which renders out the actual tour dates entries for the given month.
(9 searches occur here, since that is the number of months in our collection which have tour dates)
Now it might seem crazy to do 12 searches to render out this simple tour date calendar ( and if we added more tour dates in other months, it would be even more ). But that's simply because we are not robots. These sorts of repetitive, raw computational tasks are what Webpops search cluster and caching mechanisms eat for breakfast every day.
While it's techically possible to combine this search into one single module that would achieve the same result, breaking it out into these three logical modules and nesting them in your templates like this gives you a lot of flexibility. For example, it would be trivial to switch out the 'months' module with 'weeks' and create a weekly listing.
Once you grasp the concept of creating your own tags and combining their scope in your templates, you have the keys to the kingdom to architect the presentation of your dynamic content in pretty much any way imaginable!
I encourage you to roll up your sleaves in dig in. To see this extension in action check out this Tour Dates theme!« Back to Blog Index