Shopify selected variant id to update

Question

I have an inquiry form built into my Shopify product page.

Where they can request a callback in regards to the product they're on and the variant id select.

I'm able to call back the current selected variant ID

product.selected_or_first_available_variant.id

But if I change the drop-down selection to another variant, this id will not update.

How do I may this update on the selection of a different variant?

Thank you

Answer 1

Correct - the {{ product.selected_or_first_available_variant.id }} is a Liquid variable, and Liquid is parsed server-side to generate the HTML document that is sent to the browser. Liquid can only ever be accurate as of the time of the initial page load

If you want to respond to user changes after the page has loaded, you'll need to use Javascript. If you are on a product page, there will be some javascript function firing that updates the price, image, etc. when the variant changes. If you can find that function (often, but not always, called selectCallback), you could add the code needed to update your contact form in there.

If you just need a variant ID, one other method to get it would be to write a small javascript function which, on submit of your contact form, takes the current value from the variant ID field in the product form and puts that value into the appropriate field in your contact form.

Hope this helps!