Based on article ID clicked, redirect to another site, java script code/jquery code

답변함

15 댓글

  • Socorro Fernandez

    Hey Javar!

    I am not sure on the element and value for jquery but I currently have a work around where if a user clicks an article link in the section page, it will link redirect them to another site.

    Please let me know where you are wanting to see this functionality and maybe this work around will work for you

    0
  • Javar Harris

    Here's the algorithm:

    1. User clicks on a specific article in a section page

    2. if the article id = [article_id], then loction.href = [new site]

    Does the help? 

     

    Use case Scenario

    I am the user (actor) and i click on a how to article or section in the on the help center, I want it to redirect me to another site (for example, another different help center's article/section).

     

    0
  • Socorro Fernandez

    Thanks Javar,

    I at least wanted to confirm the use case matched mine. The following works for my help center in the section page. This is also going to depend on your html set up but hopeful it is similar. 

    Locate the following code on the section_page.hbs html template:

    {{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}
    <a href="{{url}}" class="article-link">
    <h3 class="article-link-title">{{title}}</h3>
    </a>
    </li>
    {{/each}}
    </ul>
    {{else}}
    <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}

    The line I bolded above is where we here going to insert a line of code, right after <a as this is where it starts identifying the article links.

    {{#is id articleidhere}} href="https://www.redirect_site.com" class="article-link" {{/is}}

    You will need to enter the id number of the article above at articleidhere and the href of the site you want to redirect to. Below for example, clicking article 123456789 from the section page would redirect me to zendesk.com:

    <a 
    {{#is id 123456789}} href="https://www.zendesk.com" class="article-link" {{/is}}
    href="{{url}}" class="article-link">

    You can add multiple if needed and would justneed to insert one after the other:

    <a

    {{#is id articleid1}} href="https://www.redirect_site.com" class="article-link" {{/is}}
    {{#is id articleid2}} href="https://www.redirect_site.com" class="article-link" {{/is}}
    {{#is id articleid3}} href="https://www.redirect_site.com" class="article-link" {{/is}}

    href="{{url}}" class="article-link">

    Hope this helps and at least get your towards the functionality you are needing. Thanks!

    1
  • Javar Harris

    Thanks, Socorro! I owe you a beer!

    0
  • Socorro Fernandez

    I won't say no to that!

    Glad it worked for you! I am always worried posting a wall of text not knowing if it is going to work for other users. Thank you for replying back!

    0
  • Javar Harris

    Wall of Text? Could you elaborate? Are you referring to the code you post? If so, no worries, i understood it.

    0
  • Socorro Fernandez

    Yes, my large comment reply!

    I am glad it made sense and worked for you! Happy Zening!

    0
  • Lisa Sedlak

    Hi all! 

    I tried this today and the link to the article does not go to the link. Unfortunately our site is not live now, so I can't show the links. Here is the url to the article https://blockonehelp1572270118.zendesk.com/hc/en-us/articles/360039655211-Terms-of-Use Here is the code I put in section_page: 

    <div class="container-divider"></div>
    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    {{search submit=false}}
    </nav>

    <div class="section-container">
    <section class="section-content">
    <header class="page-header">
    <h1>
    {{section.name}}
    </h1>
    {{#if settings.show_follow_section}}
    {{subscribe}}
    {{/if}}
    {{#if section.description}}
    <p class="page-header-description">{{section.description}}</p>
    {{/if}}
    </header>

    {{#if section.sections}}
    <ul class="section-list section-list--collapsed">
    {{#each section.sections}}
    <li class="section-list-item">
    <a href="{{url}}">
    <span>{{name}}</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
    </svg>
    </a>
    </li>
    {{/each}}
    <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
    </ul>
    {{/if}}


    {{#if section.articles}}
    <ul class="article-list">
    {{#each section.articles}}
    <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}" class="icon-star"></span>
    {{/if}}

    <a {{#is id 360039655211}} href="https://voice.com/legal/terms-of-use/" class="article-link" {{/is}}
    href="{{url}}" class="article-link">
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{else}}
    <i class="section-empty">
    <a href="{{section.url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}

    {{pagination}}

    </section>
    </div>
    </div>

    THANKS! 

    0
  • Socorro Fernandez

    Hi Lisa,

    I was able to test the line of code successfully in the default Copenhagen theme.

    Are you able to share a screenshot of your section page of where you are clicking the article?

    I will add that you would need to be on the section page only for this to work. If you were on say, the Categories page that showed Sections with a list of articles underneath, it would not work on that page since this code that we applied is on the Section page only and additional code may need to be added to the Categories Page if you needed the functionality to work there.

    Please let me know. Thank you.

    0
  • Lisa Sedlak

    Hmm. Still not working. 

    then click and get 

    It should link to a different page out of Zendesk and the help center. 

    0
  • Lisa Sedlak

    Did I need code in style or script as well? Or in the article itself? 

    Thanks! 

    0
  • Socorro Fernandez

    Hi Lisa,

    You shouldn't need any additional style or script. 

    I did notice that the <a in your code is not closed as well as their is no title. Maybe I am missing something but here is how I have it in my help center in the section_page.hbs (Of course put your Article ID):

    <a {{#is id 360024798053}} href="https://voice.com/legal/terms-of-use/" class="article-link" {{/is}}
    href="{{url}}" class="article-list-link">{{title}}</a>

     

    If you add the bolded part to your code, do you have any difference in results? Thank you

    1
  • Lisa Sedlak

    THAT WAS IT! 

    Thank you so much! 

    0
  • Juan Espinosa

    Hi, 

    Is there a way to have a search bar show another site as a result? 

    Example; 

    User is on Help Center A, on Help Center A he sees a search bar and types "Help Center B" on the result drop down he sees Help Center B, clicks on it and is redirected there. 


    Is this possible? 


    Thanks! 

    0
  • Brett Bowser
    Zendesk Community Team

    Hey Juan,

    I did some digging on my end and it may be possible to include an external search feature by the use of JS inside the Help Center. For example, you could use the Google Custom Search Engine (CSE) which could be integrated and amended to provide the external search results. I've found some documentation from Google below:

    However, as this would go beyond the scope of our support, you would need to ask your Development team to set this up on your end.

    This may not be the exactly solution you're looking for but hopefully this helps point you in the right direction!

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공