help editing liquid code - not showing reviews for products with 0 reviews

[jaimistarr]

Hi there,

I have installed the productreviews core script and want to utilise their ratings badges for my products. However, I only want to ratings badge to appear on products that have a review - currently for any items with no reviews, a message appears under the product title that says "no reviews yet" (which obviously looks bad).

Is there an easy way to omit the reviews badge from showing if a product has no reviews?

The code for the ratings badge (installed on the Sections > product-template.liquid section) is:

<div data-id="{% if product.selected_or_first_available_variant %}{{ product.selected_or_first_available_variant.id }}{% else %}{{ product.id }}{% endif %}" class="pr-inline-rating"> &nbsp; </div> <script> window.__productReviewCallbackQueue = window.__productReviewCallbackQueue || []; window.__productReviewCallbackQueue.push(function(ProductReview) { ProductReview.use('inline-rating', { "alias": "collection", "identificationStrategy": "from-catalog-external-entry-external-id" }); }); </script>

Thanks!

Jaimi

[drakedev]

Hi Jaimi,

what about hiding the "no reviews yet" message with CSS? Can you post the URL of your Shop?

[jaimistarr]

thanks for replying @drakedev!

you can see the reviews displaying as desired here: https://babybeeprams.com.au/products/rover2019

and here where the no reviews yet shows: https://babybeeprams.com.au/products/maxi-cosi-mico-plus

[drakedev]

Hello,

I analyzed the code and unfortunately is not possible to use CSS because there is no class that differentiate between no reviews and >0 reviews.

But you can use JavaScript or JQuery (that is already loaded in your theme)

You can try this code:

$(window).on("load", function() {
    $(".pr-inline-rating span:contains('No reviews yet')").hide();
})

You can edit your theme code and add this at the end of file theme.js.liquid inside Assets folder.

You can check this Shopify introduction guide, if it is the first time you do some theme modifications Editing theme code

[jaimistarr]

Thanks @drakedev ! Works great, only thing is it appears then disappears once the page loads - is there a slight modification that we can make so its removed prior to the page load? If not this is definitely still a solution! Thanks heaps!

[drakedev]

This is could be a workaround. 

We hide the element until the page is loaded and the we can show it.

Assets -> theme.js.liquid

$(window).on("load", function() {
    $(".pr-inline-rating span:not(:contains('No reviews yet'))").parentsUntil(".pr-inline-rating").show();
});

Assets -> theme.scss.liquid

.pr-inline-rating {
    display: none;
}

Let me know if it works!