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

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@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.

  <ul class="blocks-list">
          <li class="blocks-item">
              <a href='www.google.com' class="blocks-item-link">
                <span class="blocks-item-title">Article Name/Box Title</span>
                <span class="blocks-item-description">It's optional - add or not</span>
              </a>
            </li>
        
        <li class="blocks-item">
              <a href='www.google.com' class="blocks-item-link">
                <span class="blocks-item-title">Article Name/Box Title</span>
                <span class="blocks-item-description">It's optional - add or not</span>
              </a>
            </li>
        
        <li class="blocks-item">
              <a href='www.google.com' class="blocks-item-link">
                <span class="blocks-item-title">Article Name/Box Title</span>
                <span class="blocks-item-description">It's optional - add or not</span>
              </a>
            </li>
        
        <li class="blocks-item">
              <a href='www.google.com' class="blocks-item-link">
                <span class="blocks-item-title">Article Name/Box Title</span>
                <span class="blocks-item-description">It's optional - add or not</span>
              </a>
            </li>
          </ul>

 

Screenshot for the same:

 

 

Output:

 

If any confusion do let me know :)

 

Thanks

Team

0


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Cara Rebernick :)

 

Use the code below:

$(document).ready(function(){

if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
   $(".blocks-item > a").attr("href", "amazon.com");
}
  
else  if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
   $(".blocks-item > a").attr("href", "google.com");
}
});



Note: Remove CATEGORY NAME ONE and write your category name for which you wanna add custom url.
Remove amazon.com and write your URL.

 

If any confusion feel free to ask.

Thanks

 

 

0


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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.

For Danish

$('a[href^="/hc/da/categories/11695152081172-generel"]').attr("href", "google.com");

$('a[href^="/hc/da/categories/11695154093332-forfremmet"]').attr("href", "amazon.com");


For English

$('a[href^="/hc/en-us/categories/360002539551-General"]').attr("href", "https://wordpress.com/");

$('a[href^="/hc/en-us/categories/4404022102548-promoted"]').attr("href", "https://www.zendesk.com/in/#georedirect");



Output:

Danish -




English -

 

 

There are more ways but I used this. If any issue let me know :)

Thanks

 

0


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:

$(document).ready(function(){

if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
   $(".blocks-item > a").attr("href", "amazon.com");
}
  
else  if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
   $(".blocks-item > a").attr("href", "google.com");
}
});



Note: Remove CATEGORY NAME ONE and write your category name for which you wanna add custom url.
Remove amazon.com and write your URL.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

@Mason Bjerke, that snippet will be add to script.js file at the end of all code of that file.

 

$(document).ready(function(){

if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
   $(".blocks-item > a").attr("href", "amazon.com");
}
  
else  if ($('.blocks-item > a > span:contains("CATEGORY NAME TWO")')) {
   $(".blocks-item > a").attr("href", "google.com");
}
});

1


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Amanda Barber,

I tried it and it's working, I add {{isnt}} condition in anchor tag, see the screenshot:





Code:

{{#isnt id 4404022102548}} -- My category ID, which I want to redirect to external website.
              
<a href='{{url}}' class="blocks-item-link">
                
{{else}}
                
<a href='https://www.google.com/' class="blocks-item-link"> -- External URL
            
{{/isnt}}

1


That's great, Ifra Saqlain - it worked, but now my icons are not showing on the category blocks. Any ideas?

0


Ifra Saqlain - any ideas for getting the icons to show up as well?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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.

<script>
  $('.icon').each(function (idx, itm){
    var categoryID = $(this).attr('data-title');
    $(itm).attr('src', categoryIcons[categoryID]);
  });
</script>

Screenshot:

 

ii). Add the given code inside the blocks item code.

 <img src="{{asset 'spinner.gif'}}" class="icon" data-title="{{id}}">


Screenshot:

 

iii). Add CSS to style.css file at the bottom.

/***** CSS Modifications for Category Images *****/
.categories .blocks-item-link {
  display: flex;
  align-items: center;
}

.blocks-item img, .category-page-images, .section-page-images {
  margin-right: 20px;
  width: 32px;
  height: 32px;
}


Screenshot:



 

 

iv). Add this code to document_head.hbs file.

<script>
  var categoryIcons = {
    "4404022102548" : "{{asset 'img_1.png'}}",
    "360004039672" : "{{asset 'img_2.png'}}",
    "360003781252" : "{{asset 'img_3.png'}}",
    "360003781212" : "{{asset 'img_4.png'}}",
  }
</script>


Screenshot:


Note: These are category's ID, replace this with yours IDs.

"4404022102548" : "{{asset 'img_1.png'}}",
    "360004039672" : "{{asset 'img_2.png'}}",
    "360003781252" : "{{asset 'img_3.png'}}",
    "360003781212" : "{{asset 'img_4.png'}}",


Category ID - 4404022102548
Image Name - img_1.png

 

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


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Add this line of code inside blocks-item:

<span class="category-icon" id="category--{{id}}"><i class="lni lni-laptop-phone"></i></span>


Screenshot:

 

Try this and let me know.

1


Success - thank you so very much Ifra Saqlain!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Happy to hear that it worked!

0


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


Hi Ifra

 

I am using the following code to add an external link to a category.

 


$(document).ready(function(){
if ($('.blocks-item > a > span:contains("CATEGORY NAME ONE")')) {
  $(".blocks-item > a").attr("href", "amazon.com");
}
});

 

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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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


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


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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


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


Please sign in to leave a comment.

Didn't find what you're looking for?

New post