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;
}

NOTE: 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:

Ex:

.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) {