How to Create a Voting System in Drupal 8

How to Create a Voting System in Drupal 8

One of OSTraining’s customers asked how to implement content voting on their site.

In Drupal 7, the popular choice was the Fivestar module, but that’s still not ready for Drupal 8.

In this tutorial, I’ll show you how to use the Votingapi Widgets module in Drupal 8. This module makes use of a “Rating” field, which you can customize and insert into your content.


Step #1. Install the Voting System Module

With so many Drupal users relying on Composer now, we’re going to give you two sets of instructions: with and without Composer.

  • If your Drupal installation is not based on Composer, then download the jQuery Bar Rating Plugin from Github.
  • Uncompress it.
  • Place it in the /libraries folder in the root of your installation.
  • Download the Votingapi Widgets module from its project page and enable it as usual.

If your Drupal installation is based on Composer, follow this procedure:

  • Place the yaml code available in the projects page into the composer.json file inside the root folder of your installation (not the composer.json file inside the core folder)

Place the yaml code

  • Download with Composer the library and the module

Download with Composer the library and the module

Whether you used Composer or not, make sure you enable the Voting API and Votingapi Widgets modules:

Enable the Voting API and Votingapi Widgets


Step #2. The Voting API Settings

Now that we have the modules and libraries we need, let’s configure the settings.

  • Click Configuration > Voting API Settings.

Click Configuration

These are the default settings for when a user (anonymous or authenticated) gives their vote.

  • Choose the options that fit your site most.
  • Click Save Configuration.

Choose the options that fit your site most


Step #3. The Voting Widgets

In this step, we’ll create the widgets that can later be added to our content.

  • Click Structure > Content types.
  • Click “Manage fields” in the Article row.
  • Add a field from type “Voting api” field.
  • Click “Save and continue”.

Click Save and continue

  • Choose “Fivestar rating” and click “Save field settings”.

Choose Fivestar rating

  • Repeat this process and add another field of the type “Useful rating”.

Repeat the process

  • Click the “Manage display” tab and rearrange the order of the Voting widgets.
  • Click the cogwheel on the right of the Fivestar widget in order to select its style.
  • Click “Update” and then “Save” at the bottom of the screen.

Click Update


Step #4. Test the Voting Widgets

Now that you’ve created your widget, it’s time to test.

  • Click Content > Add content > Article.
  • Create an article.
  • Make sure both votes fields are marked as “Open”.
  • Click “Save”.

Click Content

  • You should now see the published node with the voting widgets just above the Comments section.
  • Click them to verify they work correctly.

Test the voting widgets


Step #5. Configure Access Permissions

Finally, now that our voting widgets are working correctly, let’s control who can vote. We’re going to give voting access to all our site’s visitors.

  • Click People > Permissions.
  • Scroll down to the “Votingapi Widgets section at the bottom of the page.
  • Check the relevant permissions for Anonymous and Authenticated Users.
  • Click “Save permissions”.

Click Save permissions


Step #6. Find the Voting Results

To display the results of the voting, we’ll need to make a View.

  • Click Structure > Views > Add view.
  • Show Content of type Article.
  • Create a page.
  • Display format: Unformatted list of fields.
  • Click “Save and edit”.

Click Save and edit

  • Click the “Add” button in the FIELDS section of the Views UI
  • Look for the Voting Widget fields. Select them and click “Add and configure fields”.

Look for the Voting Widget fields

  • Click the “Show results” checkbox and click “Apply” twice

Apply twice

  • Save the View.
  • The View page will show a summary of all votes per article with their average

The View page will show a summary of all votes per article


Summary

The Votingapi Widgets module allows you to implement a basic voting system for your content and other fieldable entities.

The module works properly, although it is still in alpha stage.

Please, give this module a try and share with us your experience in the comments below.

I hope you liked this tutorial. Thanks for reading it!

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

0 0 votes
Article Rating
Subscribe
Notify of
9 Comments
Oldest
Newest
Inline Feedbacks
View all comments
morovinger
morovinger
5 years ago

How do you clean results then

jfm
jfm
4 years ago
Reply to  Jorge Montoya

Hi, I’ve found a way to clear votes: Modules > Uninstall – then look for Voting API. There are links to clear votes. And thanks for this nice article!

Drew
Drew
5 years ago

Thank you so much for this. Dozens of mickey mouse modules for this when it’s all there, everything you ever wanted the whole time. =D

Drew

Paula
Paula
5 years ago

Hi Jorge,

Why the new vote only implemented after I refreshed the page?

Thanks

Fred
Fred
5 years ago

I was under the impression that you should not be manually modifying your composer.json file, but rather run a composer require. Is there a reason you’re recommending a manual modification of this file?

Anderz
Anderz
4 years ago
Reply to  Fred

I used composer require and it works.

9
0
Would love your thoughts, please comment.x
()
x