My Product page reload everytime i click an image

[Metirof]

Hello,

i made a custom liquid script to change a custom field data based on selected variant. since it is not dynamic i added some lines to reload the page everytime the user click on a variant 

but the problem here is that for some reason the page also reload when i click an image

here is the script i added for reloading 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

[marcoswata]

Do the images have the class "no-js-hidden"?

[Pavis]

Hi, did you find a solution for the problem? I have the same issue.
Just like you I've added a liquid code to show variant metafields on my productpage.

Each time when an image on the productpage gets clicked, the page reloads.

Very annoying!

Anyone has an idea what is wrong with my code? or what i should change?

Here's my liquid code:

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}

<strong>({{ variant.metafields.custom.prijs_gangbare_eenheid }}) </strong>{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

Thank you in advance!!

[marcoswata]

Can you post a link to the page please? (and the password if it's password protected). 
We need to see what the rest of the code looks like to determine what's wrong.

[Pavis]

Hello Marcoswata,

Underneath you can find the URL
https://c9048c-3.myshopify.com/products/maris-brown-cacao
If you change the variant from 30x30cm to 60x60cm, or when you click an
image, or when you close the tab 'Mooi in combinatie met' the page reloads.

Thanks in advance!!

[marcoswata]

.no-js-hidden is a very generic selector. There are 14 elements with that class on your store.

The piece of code below tells the browser to reload whenever you click on a .no-js-hidden element.
I'm not sure what exactly you are trying to achieve, but if you are trying to show variant metafields when you change the variant, you can try this:
Shopify Dawn Theme: Update variant metafields on variant change - YouTube 

<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>