Karen D Snyder

We have a brand in our HelpDesk that shows a sidebar with the sections on article pages, as shown below. So it's not a full table of contents, but does provide navigation to sections.

I can share the code, but I didn't write the code, and I don't know who wrote the code. You might be able to work with it to also list the articles under the sections.

This is in script.js inside the document.ready function:

// get id and template name
var _location = window.location.href.split('/en-us/');
console.log('window.location.href: ' + window.location.href + ', _location: ');
console.log(_location);
if (_location.length > 1) {
  var _split = _location[1].split('-')[0];
  var _templatename = _split.split('/')[0];
  var _templateid = _split.split('/')[1];
}

var categoriesList = function(_categories) {
  if(typeof HelpCenter.user.locale == 'undefined') {
    HelpCenter.user.locale = window.location.pathname.replace('/', '').replace('?','/').split('/')[1];
  }

  $.ajax({
    url: '/api/v2/help_center/'+HelpCenter.user.locale+'/categories.json',
    type: 'GET',
    dataType: 'json',
    success: _categories
  });
};

var _list = '';

$(document).ajaxStart(function(){
  $('#loader').show();
});
$(document).ajaxStop(function(){
  $('#loader').hide();
});

categoriesList(function(data){
  $(data.categories).each(function (idx, itm) {
    if (itm.name !== 'General') {
      _list = _list + '
' + itm.name + '
'
    } 
  });
  $('.left-side-category-list').html(_list);
  $('.left-side-category-list a#' +_templateid).addClass('active');

  if(_templatename=='sections' || _templatename=='articles') {
    var categoryid = $('.breadcrumbs > li:nth-child(2) > a').attr('href').split('/categories/')[1].split('-')[0];
    $('.left-side-category-list a#' + categoryid).addClass('active');
  }

});

This is in article_page.hbs:

 

  

    

      
      

      

    

  


   [article HTML]

  

This is in style.css:

.left-side-category-list li a.active {
background-color: #e1253b;
}

.wrapper-column .left-col > ul > li > a:hover, 
.left-side-category-list li a.active {
background-color: #e1253b;
}

.wrapper-column .left-col {
float: left;
padding-right: 15px;
width: 33.667%;
}

.wrapper-column .right-col {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 66.333%;
}

.wrapper-column .left-col > ul > li {
background-color: #f0f0f0;
margin-bottom: 3px;
}

.wrapper-column .left-col > ul > li > a {
color: #2d2d2d;
display: block;
font-size: 1.2em;
font-weight: 400;
padding: 10px 35px;
text-transform: uppercase;
width: 100%;
}

.wrapper-column .left-col > ul > li.active a
{
background-color:#e1253b;
color:#fff;
}

.wrapper-column .left-col > ul > li > a:hover, .left-side-category-list li a.active {
color:#fff;
}

Hope this helps.

Hi Ruthy,

I'm glad that I helped you figure this out, because I was really perplexed by this. I'm still not sure that I fully understand what the problem was. Did the section title have a dash or space at the end?

This is very strange, because the before pseudoclass should exist automatically in the Font Awesome style sheet. Did you add Font Awesome in your theme by adding a line like this in document_head.hbs? (Not sure if it makes a difference how you added it.)

To simulate this, I added Font Awesome icons in the category page of my test Copenhagen theme. I think I set it up like yours, and used an icon that doesn't work for you and an icon that does work for you, and they both display.

  {{#each sections}}
    

      

        
           
         {{name}} 
       
     
 

The before pseudoclass for fa-search-dollar specifies to display code "\f688" before the content, which makes the icon appear before Forms. 

So no matter which icon you try to display on the 'Help me save money' section, it doesn't display? Can you send a screenshot of the entire element when you inspect it, like my screenshot above, showing it from to , with all the inner elements expanded?

@... It looks like you're using font awesome, so now I see you don't need to have uploaded icons to assets.

It looks like your code is missing the closing quote and angled bracket, so I'm not sure how any of your lines work. Don't you need to have "> after the last {{/is}}?

Is it correct to use class fa before fas fa-[icon-name]? The examples at https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use just show class="fas fa-[icon-name]". Also, I noticed that your second one is using far class, which according to that link requires font awesome Pro, so do you have that?

I see that the icons you are using do exist at https://fontawesome.com/cheatsheet, so they seem to be correct. Still, you could try changing them to the icons used on the lines that work, just to double check. And you could try changing the icons on the lines that work to the icons used on the lines that don't work.

Another suggestion would be to inspect the element at the section name, and see what the generated HTML looks like. That may give you a clue to what's happening. And sorry for the obvious, but have you double checked that the section names are correct? 

Hope this helps you to locate the problem.

@... I found in my notes that I also ran into this problem last September that zd-autocomplete-option seemed to have changed to zd-autocomplete-multibrand. My speculation was that it was related to having switched to using unified search results (https://support.zendesk.com/hc/en-us/articles/360036357753-Announcing-the-new-Guide-unified-search-results-page-and-helpers).

I am just wondering, how did you manage to set a breakpoint to be able to stop so that you could inspect the instant search elements? 

@..., are you having problems with the icon showing on the category link on the home page, or with the icon showing on the category page?

Some things I could think of to check:

• Was the image you are using for the icon uploaded to assets, and are you using the correct placeholder for it?
• Do all the classes used in your templates exist in style.css?

@... 

To remove a form from the dropdown, first you need to get the form ID, which you can do by navigating to Settings > Manage > Ticket Forms, and clicking the ticket form to open it. The form ID is the number in the URL.

Then add the following code in script.js, inside the document.ready function, replacing the form ID with your form ID in both lines where it appears:

$('#request_issue_type_select option[value="360000512152"]').remove();
$('.nesty-panel').on('DOMNodeInserted', function(e){
    $(this).children('ul').children().remove('#360000512152');
});

That should remove the form from the dropdown.

@... and @..., I had the same problem last week where I was creating an HTTP target, and got back status HTTP 401 Unauthorized with { "error": "Couldn't authenticate you" }. I solved it (with help from Zendesk support) as follows: In the target settings where you put in your email address, add the string "/token". Where you put in your password, paste in your token.

We use SSO to sign into Zendesk, so not sure if this solution would apply to everybody.

The problem:

Recently when I tried to add a theme by uploading a zipped theme, the import failed, and the error dialog box contained: Failed to import theme. We were unable to complete the import of this theme. As this was not enough information for me to be able to solve the problem, I had to open a ticket with Zendesk support, who were able to tell me that the error in their error log was source sequence is illegal/malformed utf-8, which meant that one of the files in the theme was encoded in an invalid way. To locate the file with the invalid encoding, I exported an existing theme, and then replaced the files in the zipped theme one at a time, attempting to import after each replacement. In this way I did locate the file, but it was a laborious process, as it was the 14th file that I replaced.

My suggestion:

When an import fails, put the specific error in the error dialog box, and also put in the name of the file where the error occurred. Additionally, the import error dialog box disappears after a few seconds, although it has a functioning close button. The dialog box should disappear only when the close button is clicked, to give the user time to take a screenshot of it.

Update from Community Team: jQuery has removed in v2 themes and this tip doesn't work without jQuery.

 

How to require an attachment in a ticket if a particular dropdown option is selected

We needed to require an attachment if a certain dropdown option was selected by the user when they are filling out a certain form to submit a ticket. Without being able to require the attachment, extra time would need to be spent by the agent to contact the user and ask for the additional document. 

Solution Overview

This was done by creating a custom checkbox field that is set to be required, and adding the checkbox to the form, hiding the checkbox via CSS, then programatically selecting or clearing the checkbox according to the dropdown option selected and the number of attachments present.

Limitations 

• This solution detects that an attachment has been uploaded, but doesn't verify that the attachment is the particular document that needs to be attached.
• This solution uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), which is not supported in some older browser versions
• A user could get around the requirement to upload an attachment by using the DOM inspector to show the checkbox, and then selecting it manually. 

Steps

Add the custom checkbox field

Create the custom checkbox field

1. Navigate to the Ticket Fields page
2. Click Add field
3. Select Checkbox type
4. Under Permissions, select Editable for end users
5. Enter whatever title you would like, in Title shown to agents and Title shown to end users. I used the title 'Attachment'
6. Select the Required to submit a request option.
7. Click Save to create the field
8. Note the field ID shown in the list of ticket fields for the new ticket field

Add the custom checkbox field to the form

1. Navigate to the Ticket Fields page
2. Locate the form for which you need to require the attachment, and click it
3. Drag the new field from the list of fields on the right to the list of fields in the form. Make sure that it is the last field in the form (because you want the error notification that appears if an attachment is required but not uploaded, to appear above the attachment upload box).
4. Click Save form to save the change.

Hide the checkbox field

Add the following to style.css to hide the field label and the field (replace the custom field ID in this code with your custom field ID). You have to hide the field label and field individually instead of hiding the