How to refresh page when a varient is selected?

Technical Q&A
,
1

Hi everyone,

I’ve setup a varient metafield which I managed to display on the product page. However when a new varient is selected it does not auto update. It works when I manually refresh the page.

Is there a way to force refresh product page when new varient is selected?

Theme: Symmetry

Thank you in advance.

2

:bomb: Hard refreshing the page isn’t advised every attempt should be made to make customizations dynamic to simply update the current pages metafield data.

Unless you specifically know it wont be a user annoyance; any page you do this on should have accompanying a/b testing or at minimum analytics to monitor bounce rates or you risk hemorrhaging money in lost conversions.

Always backup themes before changing files

In symmetry that may be

document.querySelector('select.original-selector').addEventListener('change',function () {
    console.log("variant changed");
    window.location.reload(true);
});

reload(true) is used to try and avoid the browser cache.

Know the difference between .reload and .href

https://stackoverflow.com/questions/41020403/reload-a-page-with-location-href-or-window-location-reloadtrue

If you need this customization made dynamic contact me directly for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

Generally for any theme this is done by adding something like the following to the MAIN target selectors or form.

mainSelector = document.querySelector('select.classnameorID').
mainSelector .addEventListener('change', callBack);

For symmetry the element to target is select.original-selector


The "selectors" such as button/dropdown/swatches that you see visible on page, *or initially inspected in devtools*, may not be the main input as that's often style with display:none;

Alternatively listen for a more specific events like onVariantChange, variant:change,etc some themes emit.

For most themes to find the exact verbiage used to name the event you need to look in either:

the main javascript file, theme.js, script.js etc,

the product sections javascript product.js, product-form.js etc

the blocks component javascript such as in a variant-picker snippet.

*Dawn based themes are using a pub sub model which can be confusing to find the event names for theme features.*
3

Thank you for the reply Paul,

This is the code that I have added to the Default Product as a Custom Liquid:

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


Spec Sheet

{% endif %}
{% endfor %}

I appended your code to refresh page right after this but it did not work.

I’m pretty sure this was not the correct place to add your code.

Could you please tell me where exactly I should put your code?

I used to code with Turbo Pascal and Visual Basic 25 years ago and I am really in over my head with all this html-jawa-liquid stuff.

Please a little help for this old-timer out of his depth.

Thank you so much.

4

The javascript should also be in the custom liquid but inside a tag