We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version. 

1. My Widget shows an ellipse or weird circle before loading more reviews.

Cause

Our widgets are designed to fit the container you choose to put them in, but sometimes the characteristics of those containers can override things like, in this case, a good size for the loading icon (the loading icon is distorted because it is trying to fit the container). So, we need to apply a rule to give it a fixed size to avoid this issue.

Solution

What do I need?

  • Access to the main CSS theme file.
  • CODING LEVEL: none, almost no level.

What do I do?

1) Access the main CSS file of your theme (Don't know what file is that? Check this article)

2) Go to the very bottom of the file and add.

.jdgm-rev-widg__paginate-spinner-wrapper .jdgm-spinner {
  width: 40px !important;
}

Tip
If you need your icon bigger/smaller, just change 40px on the example for the desired size

3) Save the changes.

Expected result

2. 404 error page when clicking on links (stars, pagination) in our widgets - Fix for Motion Theme

Go to theme.js.liquid you should find this line:

$('a:not(.js-no-transition)').bind('click', function(evt) {

Please add  

.jdgm-paginate__page, .jdgm-star

to the jQuery selector like this:

$('a:not(.js-no-transition, .jdgm-paginate__page, .jdgm-star)').bind('click', function(evt) {

Sometimes you have to find the class of the error elements. For example:

.jdgm-rev__body-read-more

is the class for the Read more button. In this case, the class needs to be added to the js script:

$('a:not(.js-no-transition, .jdgm-star, .jdgm-rev__body-read-more, .jdgm-paginate__page)').bind('click', function(evt) {