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)
- 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:
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.
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.
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”.
- Choose “Fivestar rating” and click “Save field settings”.
- Repeat this process and add another field of the type “Useful rating”.
- 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.
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”.
- You should now see the published node with the voting widgets just above the Comments section.
- Click them to verify they work correctly.
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”.
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 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”.
- Click the “Show results” checkbox and click “Apply” twice
- Save the View.
- The View page will show a summary of all votes per article with their average
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!
How do you clean results then
Hi morovinger. That’s a good question. I don’t know, but I guess you can remove them directly from the database.
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!
Hi jfm, thanks for the hint. I guess you could also filter the view by date. You would have 2 (or more) views. The advantage is that the data won’t get lost
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
Thanks for your feedback, Drew. Glad you found the tutorial useful!
Why the new vote only implemented after I refreshed the page?
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?
I used composer require and it works.