Recent searches

No recent searches

Hiding downvote totals on article pages

Answered
image avatar

Michael Lorch

Posted Apr 07, 2022

Hello everyone,

We are curious to sample only displaying the helpful vote totals on customer facing articles. We want to see if hiding downvotes gets rid of any negative bias or tendency to join a trend of downvotes, etc..

Is there a way we can do this? All your advice and highly cherished!

1

7

7 comments

Date
    image avatar

    Pulkit Pandey

    Zendesk LuminaryCommunity Moderator

    Hi Michael Lorch

    You can hide the article votes button using the CSS.

    Let me know if you need any further assistance

    Thanks

    Pulkit
    Team Diziana

    0

    image avatar

    Michael Lorch

    Pulkit Pandey Thanks for getting back to me on this! May you provide further information? I just want the information at the bottom of an article to display the total number of helpful votes, not the total number of helpful votes out of all votes. 

     

    Currently, it says something like '10 out of 17 users found this helpful'. I'd want it to say '10 users found this article helpful'. Can we do this?

    Thanks again for your time.

    0

    image avatar

    Pulkit Pandey

    Zendesk LuminaryCommunity Moderator

    Hi Michael Lorch

    This can be possible using the API where you need to get the list of votes based on the article and only list positive votes.

     

    Thanks 

    Pulkit

    Team Diziana

    0

    image avatar

    Lucas Zhu

    hi Pulkit Pandey, I am a bit confused, the api can only list votes if I need the numbers, so what we want is to change the display on any article page from "77 out of 100 found this helpful" to "77 found this helpful" by removing "out of 100", do you know how I can edit the theme code to achieve this? Thank you. 

    0

    image avatar

    Christopher Kennedy

    Zendesk Developer Advocacy

    Hi Lucas,
     
    You can also use JS to pull the upvote count from the rendered label and replace the label's text without the downvote count.  Here's an example that does this:
     
    const label = document.querySelector(".article-vote-label");
    const text = label.innerText;
    const position = text.indexOf("out of");

    label.innerHTML = text.slice(0 , position) + "found this helpful";

    0

    image avatar

    Lucas Zhu

    hi Christopher Kennedy, thank you for the reply. I have added the code into article_page.hbs file like below, it did work for the first time, but when I click Yes or No button, the label text changed back to "xx out of xx found this helpful". Do you know anywhere else we need to change to keep " out of xx " always hidden under whichever situations? Thanks. 

             <small class="article-votes-count">
                {{vote 'label' class='article-vote-label'}}
                    <script>
                        const votelabel = document.querySelector(".article-vote-label");
                                    const text = votelabel.innerText;
                                    const position = text.indexOf("out of");
                                    votelabel.innerHTML = text.slice(0 , position) + "found this helpful";
                          </script> 
              </small>

    0

    image avatar

    Christopher Kennedy

    Zendesk Developer Advocacy

    Hi Lucas,
     
    That's a good catch.  What's happening is when the user changes the vote, a new vote label replaces the previous one that had updated text.  So your script will need to track when a new label gets added due to a vote change and update the new label's text.  One straightforward way to do this is to use JS' MutationObserver.  Here's an example to demo:
     
    <script>
    const label = document.querySelector(".article-vote-label");
    swap(label);

    // Create an observer to track new vote labels added to the DOM
    const observer = new MutationObserver(mutationRecords => {
      for (const mutation of mutationRecords) {
       if (mutation.addedNodes[0]) {
            swap(mutation.addedNodes[0]);  
        }
      }
    });

    observer.observe(label, {
      childList: true
    });

    // Swap the label text for the supplied label 
    function swap (node) {
        const text = node.innerText ? node.innerText : node.data;
        const position = text.indexOf("out of"); 
        if(position) {
            node.textContent = text.slice(0 , position) + "found this helpful";
        }
      }
    </script>
     
     

    0

    Please sign in to leave a comment.

    Didn't find what you're looking for?

    New post