• Sam

  • 25. Januar 2022 17:20
  • Bearbeitet

  Community Moderator

  Hi Budke, John!

  You could do this through your script.js file by adding the following:

  document.addEventListener("DOMContentLoaded", function() {
  $(".request-status.request-status--answered").html("Pending");
  }); 

  The above will only replace the label, not the hover-over title, or any of the other statuses. A more complex (but still easy-to-implement) solution would be to instead include the following in your script.js file:

  $(".my-activities-items__col.my-activities-item__meta").each(function() {
  $( ".request-status.request-status--answered" ).replaceWith( '<span class="request-status request-status--answered" title="This ticket is pending.">Pending</span>' );
  $( ".request-status.request-status--open" ).replaceWith( '<span class="request-status request-status--open" title="We are working on your ticket.">Open</span>' );
  $( ".request-status.request-status--solved" ).replaceWith( '<span class="request-status request-status--solved" title="This ticket has been solved.">Solved</span>' );
  });

  What the above does:

  • It loops through every line on the My Activities page, looking for the specific table elements
  • It will replace each matching child object (the statuses, like .request-status.request-status--answered) with entirely new span HTML, which allows you the flexibility to change both the hover-over title element and the label text.

  For each of the three lines, replace the text between title="text" to update the hover-over text. Replace the text between >Status</span> to update the actual label shown on the page.

• Budke, John

  • 25. Januar 2022 20:29

  Thanks! This is great.  One question - is the "answered" value the same as when My Activities displays "Awaiting your Reply?"  For example, I changed the colors of the status displays (i.e.; Open from red to green) but when I changed the "pending" status to something other than green, it didn't update. I can't find the code for the "awaiting..." value.

• Sam

  • 25. Januar 2022 21:09

  Community Moderator

  Budke, John Excellent catch! It would depend on your theme, and I apologize for not clarifying. We use the Lotus One theme in our implementation.

  If you are using Copenhagen v2, the requisite code would be 

  $(".requests-table-status").each(function() {
  $( ".status-label.status-label-answered" ).replaceWith( '<span class="status-label status-label-answered" title="This ticket is pending.">Pending</span>' );
  $( ".status-label.status-label-open" ).replaceWith( '<span class="status-label status-label-open" title="We are working on your ticket.">Open</span>' );
  $( ".status-label.status-label-solved" ).replaceWith( '<span class="status-label status-label-solved" title="This ticket has been solved.">Solved</span>' );
  });

  This does require jQuery; more info on adding that in (if not already) can be found at Importing or Upgrading jQuery.

  Your theme may differ slightly, but it's easy to determine what those might be! To do so:

  1. Go to the My Activities page in Zendesk
  2. On most browsers: Right-click on one of the ticket status labels -> Inspect or Inspect Element
  3. In the new Inspect window, note the following values: The highlighted span class and the parent td class values. You only need one td class value - they're always the same per-row. Gather the appropriate values for the span class value, one each for Open, Pending, and Solved.
     
  4. Update the script.js file using the template below.

  $(".td_class_here").each(function() {
  $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="This ticket is pending.">Pending</span>' );
  $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="We are working on your ticket.">Open</span>' );
  $( ".span_class_here_without_spaces" ).replaceWith( '<span class="span_class_here_with_spaces" title="This ticket has been solved.">Solved</span>' );
  });

  Also, do the following:

  •  Replace the "td_class_here", "span_class_here_without_spaces", and "span_class_here_with_spaces" with the variables specific to your theme
  • For "td_class_here" and "span_class_here_without_spaces", remember there is a preceding period (.td_class_here, .span_class_here_without_spaces)
  • Examples of each:

  td class shown in browser: my-activities-items__col my-activities-item__meta
  td class to use: my-activities-items__col.my-activities-item__meta
  
  td class shown in browser: requests-table-status
  td class to use: requests-table-status
  
  span class shown in browser: status-label status-label-answered
  span class to use without spaces: status-label.status-label-answered
  span class to use with spaces: status-label status-label-answered

  Important to remember: 

  • The code block needs to reside somewhere within the document.addEventListener('DOMContentLoaded', function() { function, not just tacked onto the bottom of the script.
  • Your CSS may call these labels something else, when looking for color. Match the values you see in the span class with your CSS to fix the colors. (e.g. span class="status-label status-label-solved" <-- look for status-label-solved in your CSS)

  Hope this helps!

• Budke, John

  • 25. Januar 2022 21:11

  Thanks so much!

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.