Make Reviews Clickable On Product Page - Scroll Down Activation

[iceyp]

Hi, 

I was trying to find how to make the reviews clickable. Customers can't click the reviews and it won't go to reviews section automatically.

How can i solve this? Thank you for the help in advance.

Best Regards,

[diego_ezfy]

Hello @iceyp,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[iceyp]

@diego_ezfy  Thank you for your help,

www.iceypyramid.com

[diego_ezfy · Accepted solution]

@iceyp,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.rating {
    cursor: pointer;
}
</style>
<script>
async function reviewClick(){

     function _isProductPage() {
    return /product/.test(window.location.href);
  }

    if (!_isProductPage()){

        return;
    }

    function _scrollTo(selector, yOffset = 0){
  const el = document.querySelector(selector);
  const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({top: y, behavior: 'smooth'});
}

      function _waitForElement(selector, delay = 50, tries = 100) {
    const element = document.querySelector(selector);

    if (!window[`__${selector}`]) {
      window[`__${selector}`] = 0;
      window[`__${selector}__delay`] = delay;
      window[`__${selector}__tries`] = tries;
    }

    function _search() {
      return new Promise((resolve) => {
        window[`__${selector}`]++;
        setTimeout(resolve, window[`__${selector}__delay`]);
      });
    }

    if (element === null) {
      if (window[`__${selector}`] >= window[`__${selector}__tries`]) {
        window[`__${selector}`] = 0;
        return Promise.resolve(null);
      }

      return _search().then(() => _waitForElement(selector));
    } else {
      return Promise.resolve(element);
    }
  }

    var $reviews = await _waitForElement(`.rating`, 100, 10);

    if (!$reviews){
        return;
    }

    $reviews.addEventListener("click", function(){
        _scrollTo('#judgeme_product_reviews', -120);
        
    });
    
}

reviewClick();
</script>

Kind regards,
Diego

[iceyp]

Thanks a lot,Diego! I pasted the code and it worked, customers can click the stars now and it redirects automatically to reviews! Amazing.

I accepted this as solution, hopefully it helps you. 

Best Regards,

[imidrigan]

Hi, 

Is this code a standard solution or have you made it specific for Iceyp? I used it and nothing happens. Can you help me, please? the site is: https://idiamonds-eu.myshopify.com/ 
Thanks in advance