• Trapta Singh

  • August 03, 2021 08:03

  Community Moderator

  Hi @Micah Ballif,

  Zendesk does not provide any default functionality for this. You might have to write your own feature/custom code to achieve something like this.

  Thanks

• Ifra Saqlain

  • August 04, 2021 05:55

  Community Moderator

  

  

  Hi Micah Ballif, 

  I tried the star rating plugin and that's working on post pages. I wanna share with you.

  

   

   

  The steps are below to embed the plugin in my theme:

  1). Add the CDN into document_head.hbs file.

  <!-- JQuery CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
  
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

   

  Screenshot for the same

  

   

  2). Go to the script.js file and copy-pats the below code at the bottom under the DOM function.

  function rating(){
  //Make sure that the dom is ready
  $(function () {
   
    $("#rateYo").rateYo({
      rating: 3.6
    });
   
  });
    }
    
     rating();

   

  Screenshot for the same

  

   

  3). Go to the community_post_page,hbs file and copy-paste the below code at anywhere you want. I added at the top of my post.

  <div id="rateYo"></div>

   

  Screenshot for the same

  

   

  4). Output is.

  

   

   

  More Images:

  

  

   

   

  Note:
  
  Plugin I picked from: https://rateyo.fundoocode.ninja/
  
  More plugins: https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins

   

  Thanks

  Team Diziana

• Ifra Saqlain

  • August 04, 2021 06:19

  Community Moderator

  

  

  If you want to add just like the articles, follow the below steps:

  1). Copy the below code and paste into your post page at the bottom.

  {{#with post}}
  <div class="post-vote-control">
    <h2>Rate for posts</h2>
     <div class="post-votes-controls" role="group" >
           {{vote 'up' role='radio' class='button post-vote-up button-primary' selected_class='vote-voted'}}
           {{vote 'down' role='radio' class='button post-vote-down button-primary' selected_class='vote-voted'}}
      </div>
           <small class="post-votes-count ">
           {{vote 'label' class='post-vote-label'}}
          </small>
      </div>
     {{/with}}

   

  Screenshot for the same:

  

   

  2). Copy the CSS code and paste at the bottom of stylesheet.

  .post-vote-control{
       text-align: center;
      border: 1px solid #eee;
      padding: 20px;
  }
  .post-votes-controls{
    margin: 10px 0;
  }

   

  3). See the output.

  

   

  Thanks

   

• Trapta Singh

  • August 04, 2021 07:49

  Community Moderator

  Wow! The trick seems to be very helpful. It would be great to have this as a tip. +1

  Thanks

• Micah B

  • August 04, 2021 19:33

  @... Thank you so much, this is tremendously helpful! Can't wait to implement this. 

• Ifra Saqlain

  • August 05, 2021 01:50

  Community Moderator

  

  

  Micah Ballif, happy to hear, please go ahead and try hope it work for you as you want.

Please sign in to leave a comment.