star rating link isn't linking to the product reviews box

56 0 1

Hello All,

We have a problem with the Star Rating box in that it's doesn't link to the product reviews box at the bottom of the page.  We have both parts of the app displayed on the product page and the review number is a clickable link but when we click it the page doesn't move to the bottom, it just sits there.  As if the anchor isn't working or directing correctly.  I have looked through the installation instructions but it just tell me to at the section and the block.  It's worked before 2.0 and metafields.  I don't have to create a metafield do I for the star rating box to link to the product review box?

Here is a link to a product clicking on the (14) link doesn't do anything;

Replies 4 (4)

Shopify Partner
111 16 27



Before the var el=document.querySelector part.

The reason is that you have the href="#" part which is just taking you to the top of the page firing after you click the link, so you need to prevent it from doing that by default.

56 0 1

That'll be the problem, thank you.  Problem is I can see what you referring to in the source code but I can't find it in the file to change it.  I have a file titled product.rating.liquid but the code isn't the same 

{%- if != blank or comparison == true -%}

{%- liquid
  if comparison == true and == blank
    assign rating_value_rating = 0
    assign rating_count = 0
    assign rating_scale_max = 5
    assign rating_value_rating =  
    assign rating_count =
    assign rating_scale_max =
  assign rating_decimal = 0
  assign decimal = rating_value_rating | modulo: 1
  if decimal >= 0.3 and decimal <= 0.7
    assign rating_decimal = 0.5
  elsif decimal > 0.7
    assign rating_decimal = 1
  capture rating_value
    echo rating_value_rating | round: 1
    echo ' / '
    echo rating_scale_max

.stars {
  --percent: calc((var(--rating) / var(--rating_max) + var(--rating_decimal) * var(--star_size) / (var(--rating_max) * (var(--star_spacing) + var(--star_size)))) * 100%);

<div class="reviews {% if divider %}form-blocks {% else %}bottompad-quarter {% endif %}clearfix" {{ block.shopify_attributes }}>
  <span class="stars-rating" role="img" aria-label="{{ '' | t: total: rating_value, count: rating_count | escape }}">
    <span class="stars" 
          style="--rating: {{ rating_value_rating | floor }};--rating_max: {{ rating_scale_max }}; --rating_decimal: {{ rating_decimal }};" 
  {% if product_page %} 
  <span class="stars-count">{{ '' | t: total: rating_value, count: rating_count }}</span>
  {% else %}
  <span class="stars-count">({{ rating_count }})</span>
  {% endif %}
{%- endif -%}


 Is there another file I should be looking for?  I looked through all the file with .product in the title and searched for el=document.querySelector but I can't see it.

Shopify Partner
111 16 27

It looks like from the html comments that its an app that's rendering it... That's annoying because you can't really edit app code unless they allow you to. You could add some javascript elsewhere that attaches that event listener and cancels the default on click 

56 0 1

Thanks. I suppose the next step is to get in touch with Shopify support and see if they can solve the issue. Thanks for trying though