With the addition of our Help Center templating language Curlybars, the ability to add conditional statements was exposed which allows for dynamically impacting the rendering of your Help Center pages. By using conditional statements, we can target the unique id number of a category, section, article, topic, or post and hide that item while displaying others.
If you need to find the id of the item you would like to hide, just navigate to the page for that item and look to the URL. You should find something like /hc/en-us/categories/200420805-General
. The 200420805
is the id of my category.
Here's a little animation to highlight what I'm trying to achieve when I hide a category on the home page of the Help Center (watch 'Category 1'):
The code
I will cover a few scenarios here to elaborate on how these can be used. In these examples I will be using the default code found in the Copenhagen Help Center theme. I will primarily be using the isnt
helper, as the basic idea with it is that if the value does not match, then render the displayed code - effectively hiding (or not rendering) the identified item. You can see here I want to exclude a specific category on the home page, so I've passed it through the isnt
statement:
I have attached the entire code of my homepage template from this example here. You can change my category id for your own, and then you will be able to hide your categories.
Hiding multiple items
Hiding multiple items adds a couple more lines of code as we cannot pass multiple id numbers into a single conditional statement. Instead we will want to nest the conditional statements so they can be analyzed appropriately. Here's an example:
If you would like to download the code for hiding multiple categories, you can find that code here.
Another example with articles
I know I've been talking about categories quite a bit, so I wanted to show how to implement this in another space. My scenario is I want to reduce the exposure of a certain article, but make it accessible via Search or a direct link to my customers. I've chosen the article page in the Copenhagen theme where other articles in the same section as the current article appear in a sidebar like this:
You may have hidden your article already at the section level, but we also will want to target the article here:
And again, here is the code if you would like to try it in your article template.
Some tech notes about this functionality
You may have noticed a pattern here that the code was being implemented in the {{#each}}
helper which iterates through the array of the specific items being requested. The each helper is native to handlebars.js, and you can read more on it in their documentation here. In the last image above, you can see the {{#each section.articles}}
in the code which renders the articles for the current section, but when the article is encountered with the id 219527708
, that code is instead skipped and the rendering moves onto the next article.
There may be some other ways to achieve a similar behavior, so feel free to try your hand at some other conditional helpers, but this should be a good start.
47 Comments
Jake this is great and much appreciated.
One option that is missing from this is that of hiding an article from the /hc/en-us/categories section. How would this be achieved in terms of an example?
Thanks.
Hi Ian,
I can provide a quick example in the default Copenhagen theme. To hide an article, the isnt has to go within the article iterator like this:
That will hide my article 204156349 on the category page, but show all others. Does that help?
Jake, you are an absolute legend. Well done, it worked and thank you so much.
This code works for hiding a category. How do we hide a section?
@Ian glad that worked!!
@Tess do you mean hiding an article on the section page template or are you trying to completely hide a section somewhere?
Category has 5 sections and I want to hide 1 of them.
Hi Tess,
This is a similar idea to the other solutions, we just need to put the condition around the block which renders each section within the appropriate #each statement. Here is the solution to hide section 200952599 in my account (note the closing isnt right before the else which dictates the behavior for an empty category):
Hope this is useful for you!
Hi Jake -
This has all been so helpful. Thanks! I have very little coding experience, but I've been able to follow along to make a few small changes. I'm wondering if you could help me find a way to ignore our article template for just one of our articles. Basically, I've redirected our 'Video Tutorials' category button on our homepage to lead straight to the first article in that category. Now, for a better user experience, I would like this Video Tutorial article page to ignore most of the formatting that comes with the rest of our templates. Mainly, I'd like to remove the side bar with other article suggestions so I can embed a larger video player in the center of the page, and eventually a scrolling menu of additional videos below.
I understand that this is a large undertaking, but if you could guide me in the right direction to avoiding the template for a specific article, that'd be awesome! Thanks!
Hi Jacob!
I'm glad you were able to use this!
This is pretty achievable, especially if it's only for one article. We would use an #is condition to check if the currently viewed article is the one where you want the special behavior. Then below the 'else' we will have the fallback behavior for all other articles:
If there is a certain part of the template you want to use for the special video article and the rest of your articles, you would just leave that outside of this conditional statement.
Hope that helps!
Thanks, Jake! It was the 'article.id' that was tripping me up. My next challenge is to figure out how to incorporate this 'slick' carousel code I found!
Is there a way to the inverse of hiding multiple categories and only show multiple categories? Say I have 20 categories and I only want to display 3, I'd rather specify the three I want to display rather than add 17 isnt blocks for ones I don't want to display.
Thanks!
Hi @Chris,
You can use {{#is}} instead of {{#isnt}} for the three categories you want to list.
Team Diziana
Thanks @Trapta. You can use {{#is}} but you have to replicate the block of html you want to display for each category.
e.g.
I'd like to be able to do something like:
Hi there,
Is there a way I can write logic into footer.hbs to selectively hide content only if the user is viewing the new request form? I have a global link to submit a new request that I'd like to hide if that's what the user is already in the middle of doing. Thanks.
Hi Michelle,
There isn't a way to implement a conditional statement to check the current page, but you could possibly add a Javascript snippet in a <script> block only on the new request template which hides the link you're presenting in the footer. It's not a perfect solution, but may help you accomplish the behavior which you seek.
Hi,
I would like to hide meta data for articles - making sure author and edit date is hidden. I have succeeded in the article-view, but when articles are shown in search results, the meta data is shown.
Can you please help me in the right direction for hiding this info in search results as well?
Thank you!
Hey Ole, all you need is to edit the search page template and remove these highlighted lines of the code:
Let us know if this doesn't help!
Sweet, it helped a lot! Thanks!
Hi,
I would like to display different sidebars on different category pages. On one category page there should a certain picture on the side and another picture for another category page. Is it possible to somehow check for the current page and then display the content accordingly?
Thanks!
Hi!
Could you maybe add alternate templates for these categories instead to render different sidebar experiences? We go into more detail on this in Adding multiple article, section, and category templates to your theme. This could remove some or all of the need to code the different behavior into a single template.
Hi!
I am looking at only displaying the web widget on specific articles in my Help Center.
How do i go about achieving this?
Thanks!
Hi - we are preparing to use ZD Connect, and we'd like to restrict articles so that they only appear in Connect, but not in search or while browsing KB. Is that achievable with the curly bars? If so, how can we go about doing that? Thanks!
I'm looking to hide certain requests on the My requests page. I think I have found a way to do this based on subject and using the isnt helper, as below. All requests with the subject "hide me" will be hidden.
But as soon as I go live, this is going to impact all my users, so I want to make sure it's going to work as I expect. Does anyone have any experience with this use case?
Has anyone hid a request based on a tag or label set on the ticket?
Thanks!
<tbody>
{{#each requests}}
{{#isnt subject "hide me"}}
<tr {{#is status 'closed'}} class="request-closed" {{/is}}>
<td class="request-info requests-table-info">
<a href="{{url}}" class="striped-list-title" title="{{subject}}">
{{#if subject}} {{subject}} {{else}} {{excerpt description characters=50}} {{/if}}
</a>
</td>
</tr>{{/isnt}}
{{/each}}
</tbody>
I think I got this working. Our goal was to hide requests that were submitted by email, because we want customers to use the portal to submit, not email,
We set a trigger to change Emailed requests to Type=Task
Then I made sure that Type was an active field as Read Only for the end user.
On the My Requests and the Request page, I hid "Type" column and field, and then I used the tip above to hide all requests that were Type=Task.
Seems to be working. I'll share the code if anyone is interested.
This is super helpful :)
Thanks for sharing Amy!
If you'd like, you can submit this as a separate Guide Community Tip as well and I will get it added to our monthly Community Roundup.
Cheers!
Hey all! Has anyone had any success with hiding a specific category based on user tags? I am looking to do something similar as we do a soft launch/beta of our Community roll out, and want to hide this category block so it's only visible to the users we've identified as being beta users for the Community launch. I know it works at the HTML level for sections/articles using the tips in this article. However, I want to do it for Categories so that when users visit our support portal home page, if they are tagged they see the category block, if they are not tagged, they do not see the category block.
Or is this locked down to only look at whether or not there is visible content to be able to display the Category block?
Hey Jeremy,
If this Category should only display for certain users, have you looked into setting up User Segments in your account and restricting content that way?
If all Articles within a Section are restricted to a certain User Segment, then that Section would not show up for anyone outside that segment. If all Sections within a Category are hidden, then the Category itself will also be hidden from anyone outside the User Segment.
Let me know if I'm misunderstanding your question.
I'm able to hide a category from appearing on the main page, but is it possible to hide this category's articles from users who are searching our FAQs?
Hi there,
I'm looking to find a way to hide the new post button on the community for end-users only. Does anyone know of a way to do this with some custom code at all? Been hunting around but not quite finding what i'm after.
Thanks in advance for any help on this one. :)
Best,
Amie
Hey Amy,
Have you head a chance to look at the following article: How can I hide or show HTML based on user's role or group?
This goes over hiding/showing HTML based on the user's role.
Is that enough to help get you started?
Let me know!
Please sign in to leave a comment.