Recent searches


No recent searches

Karen D Snyder's Avatar

Karen D Snyder

Joined Apr 15, 2021

·

Last activity Nov 22, 2024

Following

0

Followers

0

Total activity

153

Votes

81

Subscriptions

44

ACTIVITY OVERVIEW

Latest activity by Karen D Snyder

Karen D Snyder commented,

Community comment Q&A - Help center and community

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.

     

     

     

    View comment · Posted Mar 27, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Discussion - Tips and best practices from the community

    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?

    View comment · Posted Mar 26, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Discussion - Tips and best practices from the community

    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?

    View comment · Posted Mar 25, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Discussion - Tips and best practices from the community

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

     

    View comment · Posted Mar 25, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Q&A - Help center and community

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

    View comment · Posted Mar 24, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Discussion - Tips and best practices from the community

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

    View comment · Posted Mar 24, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Q&A - Help center and community

    @... 

    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.

     

     

    View comment · Posted Mar 02, 2020 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder commented,

    Community comment Discussion - Tips and best practices from the community

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

    View comment · Posted Dec 13, 2019 · Karen D Snyder

    0

    Followers

    0

    Votes

    0

    Comments


    Karen D Snyder created a post,

    Post Feedback - Help Center (Guide)

    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.

    Posted Sep 25, 2019 · Karen D Snyder

    2

    Followers

    1

    Vote

    1

    Comment


    Karen D Snyder created a post,

    Post Discussion - Tips and best practices from the community

    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

    that contains them, because if there is an error notification that an attachment wasn't uploaded, it is inside the
    .

    #request_custom_fields_360017775731_label,
    #request_custom_fields_360017775731 {
    display: none;
    }

    Set the checkbox according to the attachments and dropdown

    1) Determine the field ID of the dropdown. You can do this from the Ticket Fields page or with the DOM inspector by opening the form in your Zendesk, and then inspecting the dropdown. The screenshot below shows the dropdown on the web page, and the element inspector portion that shows the field ID

    2) Add the following code in script.js inside the document ready function, e.g.after $(document).ready(function () { :  and before the ending line }); [You have to adjust the field IDs in attachmentCheckboxField and formDropdownClass to match your field IDs, and adjust the option checked in function isFormAttachmentRequired to match the particular option in your case]:

    // Function to start observing node for mutations
    var startObserveMutations = function (nodeSelector, options, callbackFunction) {
    var node = document.querySelector(nodeSelector);
    if (node) {
       var observer = new MutationObserver(callbackFunction);
       observer.observe(node, options);
      return observer;
      }
    };

    // Callback function to execute when mutations in form attachments or dropdown are observed: 
    // clear or select Attachment checkbox according to dropdown
    var mutationObservedForm = function (mutationsList) {
      mutationsList.forEach(function (mutation) {
        if (mutation.type == 'childList') {
          setFormAttachmentCheckbox();
        }
      });
    };

    // Define some variables for requiring form attachments
    var attachmentCheckboxField = 'request_custom_fields_360017775731';
    var attachmentCheckboxId = '#' + attachmentCheckboxField;
    var attachmentErrorNotification = 'Report must be attached';
    var formDropdownClass = '.request_custom_fields_360017548611';
    var formObserveMutationOptions = { childList: true, subtree: true };

    // Clear or select checkbox according to dropdown and attachments:
    // Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
    function setFormAttachmentCheckbox() {
      if (isFormAttachmentRequired()) {
        if ($('#request-attachments-pool .upload-item').length) {
          selectCheckbox(attachmentCheckboxId);
        }
        else {
          clearCheckbox(attachmentCheckboxId);
        }
      }
      else {
        selectCheckbox(attachmentCheckboxId);
      }
    }

    // Return true if dropdown option 'ABCD' is selected
    function isFormAttachmentRequired() {
      return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
             $(formDropdownClass + ' a.nesty-input').text() === 'ABCD';
    }

    // Select checkbox
    function selectCheckbox(eltselector) {
      $(eltselector).prop('checked', true);
    }

    // Clear checkbox
    function clearCheckbox(eltselector) {
      $(eltselector).prop('checked', false);
    }

    // If attachment checkbox field exists:
    //   Select the checkbox if attachment is not required
    //   Watch for changes to attachments and dropdown
    if ($(attachmentCheckboxId).length) {
      if (!isFormAttachmentRequired()) {
        selectCheckbox(attachmentCheckboxId);
      }
      startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
      startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);
    }

    // Adjust attachment error notification
    var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
    if (attachmentErrorElt.length) {
      attachmentErrorElt.text(attachmentErrorNotification);
    }

    Note: The code that detects changes to the attachments and dropdown uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), as mentioned above. Basically you create an observer instance and pass it a callback function to execute when changes are observed. Then you start the observer, passing it the target node and options specifying what changes to observe.

    When the above steps are done, and style.css and script.js are changed as shown above, then you will see that if you open the form and select the dropdown option that requires an attachment, and then click Submit, an error notification is displayed:

    Hope this helps somebody!

    Posted Mar 27, 2019 · Karen D Snyder

    0

    Followers

    39

    Votes

    59

    Comments