How can I detect which variant the user selected in the custom liquid section?

[yoonlaser]

I would like to show 'N in stock' on my product page. 
It's shown already for the default product (which doesn't have any variants), but showing how many in stock for variants is not easy so I only show it for single products.
I'm using the 'Enterprise' theme and the 'sku' block they provide shows the correct SKU by the variant changes. But on the custom liquid section I need to put the code, but I can't handle the user selection there, so whatever the variant is it still shows one inventory level.

I put this code in the custom liquid section of the product page template.

{% assign totalProductsQuantity = 0 %}

{% for variant in product.variants %}
{% assign totalProductsQuantity = totalProductsQuantity | plus: variant.inventory_quantity %}
{% endfor %}

{% if product.has_only_default_variant %}
{% if totalProductsQuantity > 0 %}
<p class="pion-qty">{{ totalProductsQuantity }} In Stock</p>
{% endif %}
{% endif %}

As you can see the qty shows only on the default product, but I want to show the qty for the variants if I know the way to detect user's selection.

How can I achieve this?

Any reference, or sample codes are welcome. Thanks!

[Geist]

If I understand you correctly, you want to update the front end based on a user interaction. Liquid code is ran on the server side so each time someone requests the page the liquid code runs and essentially what happens is that when the page is refreshed, the server is hit and the liquid rendering engine turns your liquid code into html and sends it back up to the client.

That means if you want your front end to reactively update based on a user interaction, this needs to be handled on the front end with javascript. The liquid product object has a selected_variant property and this is determined by the variant URL parameter, which means of course that the update only happens if the page is reloaded.

This would be a perfect use case for importing vue via a cdn and starting to make your product page reactive. In the case you are talking about, the only way your page will update is if it's reloaded, if you don't want this behavior and you want it to update on the front end without a full page reload, you need to keep track of what variant is selected and the reactive dependencies such as qty will also update.

[PaulNewton]

@yoonlaser Inventory display is a common enough customization that a plethora resources can be found online or in the forums through research.

Roughly : {{ product.selected_or_first_available_variant }}

https://shopify.dev/docs/api/liquid/objects/product#product-selected_or_first_available_variant 

In a custom liquid section/block/setting that is a static output so javascript.

Some themes may use the section rendering api to pull in all of a product's info section as variant change.

Other theme need to either fetch the new value,  or just put all values into the custom output in the first place and use javascript to change the display using either events(variant change, select change), or url changes.