How to Create a Voting System in Drupal 8

| Drupal
drupal 8 voting intro image

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!


About the author

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.