How to add tabs to your Help Center home page
I implemented tabs using jQuery-UI tabs plugin, which makes it quite simple to embed in Zendesk Help Center home-page.
First, download jquery-ui from their website, with your favorite design, and add jquery-ui.css as an asset to your theme.
In the Document Head section add the following:
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="{{asset 'jquery-ui.css'}}">
<script>
$(function() {
$( "#product_updates_tabs" ).tabs();
});
</script>
In the Home section, add the following:
{{#each categories}}
{{#is name "Product Updates"}}
<h2>{{name}}</h2>
<div id="product_updates_tabs">
<ul>
{{#each sections}}
<li><a href="#{{id}}">{{name}}</a></li>
{{/each}}
</ul>
{{#each sections}}
<div id="{{id}}">
<ul>
{{#each articles}}
<a href="{{url}}"><li>{{title}}</li></a>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/is}}
{{/each}}
============
You can of course customize the design by editing the jquery-ui.css.
The above is based on the example in the jquery-ui tabs example page:
https://jqueryui.com/tabs/
In my example, the category "Product Updates" has two sections - "Left Tab" and "Right Tab" and each have 3 articles in it.
You can add more sections which will added as tabs automatically.
Let me know if you have any questions.
-
Thanks for the tip! I tried it on my sandbox and my sections aren't appearing. I'm on the Swiftest Elk theme.
Assets: http://www.screencast.com/t/N1WGjLClLe
Document head: http://www.screencast.com/t/fg6VgWB7
Home page: http://www.screencast.com/t/il2sx1cwWKH
Any idea what I did wrong? They don't appear at all when I save.
-
Thanks for sharing this, Tal!
-
Hi Samantha,
If I've understood the code correctly, it'll only work in it's current form for categories called 'Product Updates'.
Try making the changes below.
In the Document Head:
<script>
$(function() {
$( "#agents_only_tabs" ).tabs();
});
</script>In the Home Section:
{{#each categories}}
{{#is name "Agents only"}}
<h2>{{name}}</h2>
<div id="agents_only_tabs">
<ul>
{{#each sections}}
<li><a href="#{{id}}">{{name}}</a></li>
{{/each}}
</ul>
{{#each sections}}
<div id="{{id}}">
<ul>
{{#each articles}}
<a href="{{url}}"><li>{{title}}</li></a>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/is}}
{{/each}}This should apply Tal's tabs to your Agents Only category.
-
Hi, how should the tabs for categories be looking like on the home page? Thanks in advance for help.
-
Hey Lazar -
I believe it should look like the screenshot on the top right in the original post.
Also, I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the Welcome Thread in The Lounge to introduce yourself.
We look forward to seeing you around the Community. Happy Zendesking!
댓글을 남기려면 로그인하세요.
5 댓글