product page - reload div on variant change instead of having to reload page

[Martinski]

Hi I have added some liquid code in the product information section, to display some variant meta field details when the customer selects a new variant, e.g when they choose a new width or projection then the package weight and dimensions will change.

I have a solution that works by calling a reload of the page, but this looks a bit clunky, and I would like just to reload the div. Any help would be greatly appreciated

click to see example expresspergolas product bosoco  

my code to reload the page below

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<div style="font-size:75%" ; id="weight_dimensions">

<em >Package weight: {{ variant.metafields.custom.package_weight }} / Dimensions: {{variant.metafields.custom.package_size}}</em>

</div>
{% 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("change", function(){
var refreshint = setInterval(function(){location.reload();}, 500);
});
});
</script>

I have tried to modify the script to reload the div but can't seem to make this work

<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("change", function(){
var refreshint = setInterval(function(){("#weight_dimensions").load(location.href + " #weight_dimensions"};}, 500);
});
});
</script>

[GFW-webAdmin]

I am dealing with the same issue. Have you found any fixes?

[Martinski]

Hi I’m afraid not, if you do pls let me know. Good luck

[mayorjohn]

Hi there,

where do I have to put the script code you mentioned above?

I know where to put the liquid code, so that it shows on the product page.

But where to put the second part (the script)? 

When I go to edit the theme code and select theme.liquid I can insert the script, but then it does not work properly. When I reload the page manually, it switches the meta information, but when I just select another variant, it does not.

Can someone give me a hint what to change?