Knowledge Base

Knowledge base

Explore How-To's and learn best practices from our knowledge base.

Troubleshooting Review Widget (Advance)

Modified on: Thu, 29 Aug, 2019 at 3:42 PM


Troubleshooting Review Widget (Advance)


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

ISSUE:

Loading Icon/Spinner looks deformed

CAUSE:

Our widgets elements sizes do their best to fit the container you choose to put them: 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 trying to fit the container). So we need to apply a rule to give it a fixed size and avoid this behavior.

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 ( You don't know what file is that? Click here )

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 click on links (stars, pagination) in our widgets - Fix 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 jQuerry 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 Read more button.


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

 



Did you find it helpful? Yes No Still have questions? Talk to us here

Can you please tell us how we can improve this article?

More articles in Review Widget

See all 12 articles