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

Highlighted
Tourist
7 0 2

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

0 Likes
Highlighted

Hi Jaimi,

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

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
7 0 2

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

0 Likes
Highlighted

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

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
Highlighted
Tourist
7 0 2

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!

0 Likes

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!

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes