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

shaunsnaith
Tourist
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;

https://advancedacoustics-uk.com/collections/12-acoustic-foam-tile-packs/products/slider-12-acoustic...

Replies 4 (4)

joeybab3
Shopify Partner
111 16 27

Add 

event.preventDefault(); 

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.

shaunsnaith
Tourist
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 product.metafields.reviews.rating.value != blank or comparison == true -%}

{%- liquid
  if comparison == true and product.metafields.reviews.rating.value == blank
    assign rating_value_rating = 0
    assign rating_count = 0
    assign rating_scale_max = 5
  else
    assign rating_value_rating = product.metafields.reviews.rating.value.rating  
    assign rating_count = product.metafields.reviews.rating_count
    assign rating_scale_max = product.metafields.reviews.rating.value.scale_max
  endif
  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
  endif  
  capture rating_value
    echo rating_value_rating | round: 1
    echo ' / '
    echo rating_scale_max
  endcapture  
-%}

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

<div class="reviews {% if divider %}form-blocks {% else %}bottompad-quarter {% endif %}clearfix" {{ block.shopify_attributes }}>
  <span class="stars-rating" role="img" aria-label="{{ 'products.general.reviews' | 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 }};" 
          aria-hidden="true"></span>
  </span>
  {% if product_page %} 
  <span class="stars-count">{{ 'products.general.reviews' | t: total: rating_value, count: rating_count }}</span>
  {% else %}
  <span class="stars-count">({{ rating_count }})</span>
  {% endif %}
</div>
{%- 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.

joeybab3
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 

shaunsnaith
Tourist
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