In this tutorial, we explain how to set up the system for retrieving and displaying reviews using the habeuk/rating-app module.   

In the final rendering, we will have

• A block for summarizing all reviews given for the entity, which also serves to filter the reviews to be displayed
• The first 10 reviews among those to be displayed
• A pagination block if necessary (reviews to display > 10)

These different parts of the module will be displayed one below the other in the order Summary>Reviews>Pagination with the default style shown in the series of images below

Now that we have seen what we want to achieve, we can move straight on to implementing it 😉😉

Setting up the module:

First, you need to clone the rating-app module repository into your working directory using the command below

git clone https://github.com/Habeuk/rating-app.git

The JavaScript file you need to import is already there, so you don't need to make any changes to the modules to get the results shown above. 

After cloning our repository, you need to retrieve the ratingApp.umd.js  and style.css files from the files directory at the root of the module and import them into the page where you want your reviews to appear.

Finally, on the page where you want your reviews to appear, add the id #app (id=“app”) to the section that will contain them. This is the default id, and you can change it directly in the main.js file of the rating-app module.

In addition to the id, you must add the “data-product-handler” attribute (the value of this attribute must be filled in dynamically so that it adapts to the current product).

Keep in mind that almost everything mentioned above is done for the default configuration to work with Shopify. If you want to make changes to the module, you will need to install and compile it (according to the documentation at https://github.com/Habeuk/rating-app.git) to update the ratingApp.umd.js and style.css files before using them.