Help Guide: Use Categories as page links

Hi 1263169183150 

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?

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

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

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

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

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.

Happy to hear that it worked!

Success - thank you so very much 1263169183150!

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.

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>