How to add character count to just about any OpenCart 2.x comments box

This article will show you how to add a character counter to any text area on your OpenCart website. Without further ado let’s see what steps you need to take to implement this.

For demonstration purposes, we will be adding the character counter to the review form text area on the product page.

The implementation of this functionality will require a little HTML5 and JavaScript knowledge. 

Let’s begin.

Step #1

The first step of this process is to implement logic which will count the characters at the time of their input. There are numerous ways to do that and below is our implementation:

 function countCharacters(textarea, charCounter){
    var count = $('#'+textarea+'').val().length;
    $('#'+charCounter+'').html(count);
     
    window.messageLength = $('#'+textarea+'').val().length;

    $('#'+textarea+'').keyup(function(e) {  
        count = $(this).val().length;
        window.messageLength = $(this).val().length;   
        $('#'+charCounter+'').html(count); 
    });
};

This is a simple JavaScript function which takes two values as parameters. The first one “text area” would hold a string value representing the specific text area you want to count characters from. It is recommended to use the “id” HTML attribute of the text field since it's an unique identifier. The second parameter  will represent the field holding the number of typed characters.Here is the sample HTML code we would use in our example.

<p>Characters : <span id="character-counter">0</span> </p>

Step #2

Now that we have all that we need let’s see how to use it.

To be able to use our JavaScript function across the entire website I would suggest to include it in the common.js file which is loaded in the header of each OpenCart page. Please open your favorite FTP client, connect to your OpenCart site and navigate to catalog->view->javascript. Find the file called common.js and open it with a text editor of your choice.

Scroll down to the bottom of the file and paste the JavaScript snippet.

Save the changes. Now we can access this function from the page templates in the front end of the website.

Step #3

The next step in our example is to open the product page template file. Navigate to catalog->view->theme->yourtheme->template->product->product.tpl. The default review form does not have HTML markup which we can use to output the number of counted characters. Let’s create it. For this purpose, you would need to find where the text area is located in your template file. 

Here is a trick. 

Open your browser (in this tutorial we are using Google Chrome)  and navigate to a product page on your website. Hit F12 on your keyboard. Chrome Dev Tools console will open. Scroll down to your review form and right click on it. The review form will be highlighted as well as the specific line where its markup is.

Find the id attribute and copy it. Once you do that, you can return to your text editor and use its search tool to find the form by pasting the value of the form id. Take note of this value since we will be using it later as the first parameter of our JavaScript function.

Now take the HTML snippet we have provided and paste it below the review form text area.

Note the id attribute of the span element we have just pasted. We will use that as the second parameter of our JavaScript function. After saving the template file this is how your product page will look like.

Great! We have a place to output the number of entered characters. 

The last step is to initialize the JavaScript function we created earlier. To do so, you would need to insert one last line of code in your product page template. Navigate to the bottom of the product.tpl file and paste this line of code: 

countCharacters('input-review','character-counter'); right before the last closing </script> tag.

To avoid any complications, I will elaborate a bit more on the last step. 

The function we defined earlier was called countCharacters(). By pasting the last line of code we initialize it and pass the two parameters it needs so it can output the number of entered characters. During the definition, we specified two parameters text area and charCount. When we initialize this function, we pass two string values to it 'input-review' and ‘'character-counter' which represent the text area we are targeting and the character counter <span> element. 

Let’s see what are the results of our efforts. Save the file and open a product page. Scroll down to the review from and start typing.

Well done! 

The code we have just written will help you add such functionality on any text area on your website. Just remember that when initializing the charCount() function you need to provide exactly two parameters. One identifying the targeted text area and on for the HTML element that will display the number of counted characters.