How to create a rating system using Custom Fields

Custom Fields in Joomla offers a large number of opportunities. You can, if you like, create an override using Custom Fields directly into the article, or you can put them into an article wherever you want.

Joomla has since version 3.8 offered a large number of Custom Fields in the Core install. 

Custom Fields that comes preinstalled with the Joomla Core: 

• Calendar Field
• Checkboxes Field
• Color Field
• Editor Field
• Integer Field
• List Field
• List of Images Field
• Media Field
• Radio Field
• Repeatable Field
• SQL Field
• Text Field
• Textarea Field
• Url Field
• User Field
• Usergroup Field

 You can read all about them here. 

In this tutorial, we will try to make a system to do rating in your content; this is how we rate our reviews of extensions/templates using Custom Fields and ReReplacer from Regular Labs. We also use FontAwesome to publish thestar. You can even make a Content Template for simple access to the Review system using Content Templater that comes from Regular Labs useing your favorite Editor of Choice.

To make Custom Fields in Joomla, go to Content Fields (It is, by the way, it is recommended to sort the Fields into Field Groups, you can create a category by going to Content Fields Groups).

Witch Custom Fields to use? 

The Fields that we have used are Ratio Field; you may also use the Checkbox to get the same result. Here you can read about how to make a Ratio Field.

We have created fields for Total, Functionality, Ease of use, and Documentation Ratio Fields, containing values from 0 to 5.

We will then get these Ratio Fields:

How do I display the Fields in my Article?

It is easy to get the fields to appear in your Articles, you use the shortcode {field [FIELD NUMBER]} in our example, this will be field 1, field 2, field 3 and field 4.

 In our solution we use an table that looks like this:

 <table style="width: 100%;">
    <tbody>
        <tr class="stars-rating-rows">
            <td class="star-rating-stars label">
            <span><strong>Total</strong></span></td>
            <td class="star-rating-stars"><strong>
            <span>❴field 1❵</span></strong></td>
         </tr>
         <tr class="stars-rating-rows">
             <td class="star-rating-stars label">
             &nbsp;Functionality</td>
             <td class="star-rating-stars">
             &nbsp;❴field 2❵</td>
          </tr>
          <tr class="stars-rating-rows">
              <td class="star-rating-stars label">
              &nbsp;Ease of use</td>
              <td class="star-rating-stars">
              &nbsp;❴field 3❵</td>
           </tr>
           <tr class="stars-rating-rows">
               <td class="star-rating-stars label">
                &nbsp;Support / Documentation</td>
               <td class="star-rating-stars">
               &nbsp;❴field 4❵</td>
             </tr>
       </tbody>
</table>

How to get thestars showing in the Front End Article?

We have chosen to use the Regular Labs’  Extension ReReplacer to replace the content for eachstar in our solution. This Extension replaces HTML content in your article with HTML content of choice. 

We have done it this way:

The HTML Code for this solution is:

Thestar 0:

Search For:

<span class="field-value">0</span>

Replace with:

<span class="field-value">
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i> 
</span>

Thestar 1:

Search For:

<span class="field-value">1</span>

Replace with:

<span class="field-value">
 <i class="fa fa-star" style="color:#ffd700;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i>
 <i class="fa fa-star" style="color:#666;"></i> 
</span>

Forstar 2 to 5:

Change out the:

<i class="fa fa-star" style="color:#666;"></i>

with

<i class="fa fa-star" style="color:#ffd700;"></i>

for thestar 1 to 5 each in its own ReReplacer.