Recent searches
No recent searches

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
BADGES
ARTICLES
POSTS
COMMUNITY COMMENTS
ARTICLE COMMENTS
ACTIVITY OVERVIEW
Latest activity by Karen D Snyder
Karen D Snyder commented,
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 + '
}
});
$('.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,
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,
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.
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,
@... 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,
@... 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,
@..., 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,
@...
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,
@... 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,
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,
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
- Navigate to the Ticket Fields page
- Click Add field
- Select Checkbox type
- Under Permissions, select Editable for end users
- Enter whatever title you would like, in Title shown to agents and Title shown to end users. I used the title 'Attachment'
- Select the Required to submit a request option.
- Click Save to create the field
- Note the field ID shown in the list of ticket fields for the new ticket field
Add the custom checkbox field to the form
- Navigate to the Ticket Fields page
- Locate the form for which you need to require the attachment, and click it
- 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).
- 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
#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