Hiding downvote totals on article pages | Community
Skip to main content

Hiding downvote totals on article pages

  • April 7, 2022
  • 7 replies
  • 0 views
M

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!

      7 replies

      Pulkit12
      • Pulkit12
      • April 11, 2022

      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

      M
      • Michael68
      • Author
      • July 28, 2022

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

      Pulkit12
      • Pulkit12
      • August 2, 2022

      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

      Lucas38
      • Lucas38
      • February 16, 2023

      hi @pulkit12, 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. 

      C
      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";
      Lucas38
      • Lucas38
      • March 6, 2023

      hi @christopher53, 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>

      C
      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>
       
       
      Terms & ConditionsCookie settingsAccessibility statement