Recent searches
No recent searches
Help Guide: Use Categories as page links
Answered
Posted Feb 08, 2022
Does anyone know how I can use the Category boxes on the home page as hyperlinks to articles rather than jumping to sections? I would like users to go directly to an article or Ticket Form when clicking them.
0
22
22 comments
Ifra Saqlain
@Morris Coyle, you can add blocks on the homepage and put the classes and HTML structure from category blocks, see below how I did, pick the below code, and paste it at your homepage.
In this code, you can write your box title, box description (Optional), add a custom URL in the anchor tag which redirect the box directly wherever you want.
Screenshot for the same:
Output:
If any confusion do let me know :)
Thanks
Team
0
Cara Rebernick
Hi Ifra,
I tried doing the above, and it all worked except I'd like the custom urls to not be added to the help center url. Is that possible? For example, I want a category button to lead to honelearners.zendesk.com but instead it leads to https://help.honehq.com/hc/www.honelearners.zendesk.com. Any thoughts on how I can fix this?
Thanks!
0
Ifra Saqlain
Hey Cara Rebernick :)
Use the code below:
If any confusion feel free to ask.
Thanks
0
Rocio Andujar
Hi Ifra!
I'm trying to do this but it doesn't work since we have two languages in our help center. How can I implement the page links in this scenario?
Thank you in advace.
0
Ifra Saqlain
Hey Rocio Andújar, you can check the href value of your blocks via JS code:
Blocks are same, but href values are different for different languages.
There are more ways but I used this. If any issue let me know :)
Thanks
0
Mason Bjerke
Hey Ifra Saqlain,
Where does the following go? Is it in script.js or in the home_page.hbs? I am having the same issue as Cara:
0
Ifra Saqlain
@Mason Bjerke, that snippet will be add to script.js file at the end of all code of that file.
1
Amanda Barber
Trying to have our Training Hub category redirect to another website rather than the section in Zendesk, but have been rather unsuccessful. Using the Obscu template and have this in the home_page.hbs file:
0
Ifra Saqlain
Hi Amanda Barber,
I tried it and it's working, I add {{isnt}} condition in anchor tag, see the screenshot:
1
Product Support
That's great, Ifra Saqlain - it worked, but now my icons are not showing on the category blocks. Any ideas?
0
Product Support
Ifra Saqlain - any ideas for getting the icons to show up as well?
0
Ifra Saqlain
Hi Product Support,
To show the category block's icon, follow the steps below:
i). Add the script code at the bottom of your home_page.hbs file.
ii). Add the given code inside the blocks item code.
iii). Add CSS to style.css file at the bottom.
iv). Add this code to document_head.hbs file.
Credit: https://community-tutorial.zendesk.com/hc/en-us/articles/115004178674-Adding-Images-in-Copenhagen-theme?_ga=2.257155657.310386109.1685456562-607324386.1685001940#bottom
If any query feel free to ask :)
Thanks
0
Product Support
I'm using a different template that seems to already have images that should appear?
<h1 class="visibility-hidden">{{ help_center.name }}</h1>
{{!-- Hero block --}}
<section id="main-content" class="hero {{#is settings.hero_show_elements 'background_image'}}hero-image{{/is}} {{#is settings.hero_show_elements 'background_gradiant'}}hero-gradiant{{/is}}">
<div class="container {{#is settings.container_layout 'full'}}full--width{{/is}}">
<div class="hero-inner {{#is settings.search_position 'center'}}search--center{{/is}}">
<h2 class="visibility-hidden">{{ t 'search' }}</h2>
<h1 class="welcome_text">{{#if settings.translations_enable}}{{dc settings.hero_title}}{{else}}{{settings.hero_title}}{{/if}}</h1>
<p class="help-center-details">{{#if settings.translations_enable}}{{dc settings.hero_info}}{{else}}{{settings.hero_info}}{{/if}}</p>
{{search instant=settings.instant_search class='search search-full' placeholder=settings.search_placeholder}}
</div>
</div>
</section>
{{!-- Categories section --}}
{{#if categories}}
<section class="home__categories">
<div class="container {{#is settings.container_layout 'full'}}full--width{{/is}}">
<section class="knowledge-base">
<h2 class="visibility-hidden">{{ t 'categories' }}</h2>
<h2 class="hc--title b-700">{{#if settings.translations_enable}}{{dc settings.kb_title}}{{else}}{{settings.kb_title}}{{/if}}</h2>
<section class="categories blocks">
<ul class="blocks-list {{#is settings.icon_position 'center'}}icon--center{{/is}}">
{{#each categories}}
{{#if ../has_multiple_categories}}
<li class="blocks-item">
{{#isnt id 202700727}}
<a href='{{url}}' class="blocks-item-link">
{{else}}
<a href='https://support.gradecam.com/training-hub/' class="blocks-item-link">
{{/isnt}}
{{!--
<span class="category-icon">
<img src="{{asset id prefix='category-' suffix='.svg'}}"/>
</span>
--}}
<span class="blocks-item-title">{{name}}</span>
<span class="blocks-item-description">{{excerpt description characters=150}}</span>
</a>
</li>
{{else}}
{{#each sections}}
<li class="blocks-item" id="{{id}}">
<a href='{{url}}' class="blocks-item-link">
<span class="category-icon" id="category--{{id}}"><i class="lni lni-laptop-phone"></i></span>
<span class="blocks-item-title">
{{name}}
</span>
<span class="blocks-item-description">{{excerpt description characters=150}}</span>
</a>
</li>
{{/each}}
{{/if}}
{{/each}}
</ul>
{{pagination}}
</section>
</section>
</div>
</section>
{{/if}}
<div class="container {{#is settings.container_layout 'full'}}full--width{{/is}}">
<section class="section knowledge-base">
{{!-- Promoted article block --}}
<section class="quick-articles pt-30">
{{#is settings.toggle_promoted_articles "yes"}}
{{#if promoted_articles}}
<section class="articles">
<h2>{{t 'promoted_articles'}}</h2>
<ul class="promoted-articles">
{{#each promoted_articles}}
<li class="promoted-articles-item">
<a href="{{url}}">
{{title}}
{{#if internal}}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
<rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
<path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
</svg>
{{/if}}
</a>
</li>
{{/each}}
</ul>
</section>
{{/if}}
{{/is}}
{{!-- Recent article block --}}
{{#is settings.toggle_recently_viewed_article "yes"}}
{{recent_articles}}
{{/is}}
{{!-- Recent activity block --}}
{{#is settings.toggle_recent_activity "yes"}}
<section class="home-recent-activity">
{{recent_activity}}
</section>
{{/is}}
</section>
</section>
</div>
{{!-- Get in touch section --}}
{{#is settings.contacts_blocks "yes"}}
<section class="contact--blocks">
<div class="container {{#is settings.container_layout 'full'}}full--width{{/is}}">
<section class="knowledge-base">
<h2 class="hc--title b-700">{{#if settings.translations_enable}}{{dc settings.contacts_title}}{{else}}{{settings.contacts_title}}{{/if}}</h2>
<section class="categories blocks">
<ul class="blocks-list {{#is settings.icon_position 'center'}}icon--center{{/is}}">
{{!-- Custom block 1 --}}
{{#isnt settings.first_block_title '-'}}
<li class="blocks-item">
<a href="{{#if settings.translations_enable}}{{dc settings.first_block_url}}{{else}}{{settings.first_block_url}}{{/if}}" class="blocks-item-link">
<span class="category-icon"><i class="{{settings.first_block_icon}}"></i></span>
<span class="blocks-item-title">{{#if settings.translations_enable}}{{dc settings.first_block_title}}{{else}}{{settings.first_block_title}}{{/if}}</span>
<span class="blocks-item-description">{{#if settings.translations_enable}}{{dc settings.first_block_description}}{{else}}{{settings.first_block_description}}{{/if}}</span>
</a>
</li>
{{/isnt}}
{{!-- Custom block 2 --}}
{{#isnt settings.second_block_title '-'}}
<li class="blocks-item">
<a href="{{#if settings.translations_enable}}{{dc settings.second_block_url}}{{else}}{{settings.second_block_url}}{{/if}}" class="blocks-item-link">
<span class="category-icon"><i class="{{settings.second_block_icon}}"></i></span>
<span class="blocks-item-title">{{#if settings.translations_enable}}{{dc settings.second_block_title}}{{else}}{{settings.second_block_title}}{{/if}}</span>
<span class="blocks-item-description">{{#if settings.translations_enable}}{{dc settings.second_block_description}}{{else}}{{settings.second_block_description}}{{/if}}</span>
</a>
</li>
{{/isnt}}
{{!-- Custom block 3 --}}
{{#isnt settings.third_block_title '-'}}
<li class="blocks-item">
<a href="{{#if settings.translations_enable}}{{dc settings.third_block_url}}{{else}}{{settings.third_block_url}}{{/if}}" class="blocks-item-link">
<span class="category-icon"><i class="{{settings.third_block_icon}}"></i></span>
<span class="blocks-item-title">{{#if settings.translations_enable}}{{dc settings.third_block_title}}{{else}}{{settings.third_block_title}}{{/if}}</span>
<span class="blocks-item-description">{{#if settings.translations_enable}}{{dc settings.third_block_description}}{{else}}{{settings.third_block_description}}{{/if}}</span>
</a>
</li>
{{/isnt}}
</ul>
</section>
</section>
</div>
</section>
{{/is}}
<script type="text/javascript">
$(document).ready(function() {
$('#category--{{settings.category1_id}}').append('<i class="{{settings.category1_icon}}"></i>');
$('#category--{{settings.category2_id}}').append('<i class="{{settings.category2_icon}}"></i>');
$('#category--{{settings.category3_id}}').append('<i class="{{settings.category3_icon}}"></i>');
$('#category--{{settings.category4_id}}').append('<i class="{{settings.category4_icon}}"></i>');
$('#category--{{settings.category5_id}}').append('<i class="{{settings.category5_icon}}"></i>');
$('#category--{{settings.category6_id}}').append('<i class="{{settings.category6_icon}}"></i>');
});
</script>
0
Ifra Saqlain
Add this line of code inside blocks-item:
Try this and let me know.
1
Product Support
Success - thank you so very much Ifra Saqlain!
0
Ifra Saqlain
Happy to hear that it worked!
0
Binh Du
Is there a way to change the color of the box so that it's different than the system boxes? We want the link box to stand out separately from the existing category boxes.
0
Hetal Shah
Hi Ifra
I am using the following code to add an external link to a category.
But I want the link to open in a new tab. I tried to add “target_blank” but that is breaking the link. Can you please assist with the above code and let me know what code to add to open link in a new tab?
Thank you.
Cheers
Hetal
0
Ifra Saqlain
Hi Hetal,
Use the given code:
$(document).ready(function() {
if ($('.blocks-item > a > span:contains("promoted")')) {
$(".blocks-item > a").attr("href", "https://www.amazon.com/");
$(".blocks-item > a").attr("target", "_blank");
});
Thanks
0
Hetal Shah
Hi Ifra
Thank you for the solution. It works. BUT I only want one category to open in a new tab/window. With adding the new code all categories are opening in a new tab/window.
Thank you.
Cheers
Hetal
0
Ifra Saqlain
Hi Hetal,
Check my another post for specific categories changes then with if condition put that provide code into that if(){…} condition And let me know if you face any issue.
Thank you
0
Hetal Shah
Hi Ifra Saqlain
I tried to look as advised but got nowhere.
$(document).ready(function() {
if ($('.blocks-item > a > span:contains("promoted")')) {
$(".blocks-item > a").attr("href", "https://www.amazon.com/");
$(".blocks-item > a").attr("target", "_blank");
});
What part of the code I can edit such that only this one category opens in a new window?
0