Display message when product stock is 0, and "continue selling when out of stock" is checked.

[Halftimekickz]

So I am trying to have a message appear on my product page that says "On Backorder. Please allow 2-3 weeks for shipping." whenever a variant is selected that has an inventory_quantity of 0 AND when inventory_policy is 'continue'. I can make it work with liquid, but since that's done server side, it only works on the page refresh, not when I select a new variation.

How can I accomplish this in javascript? I have tried but I can never get JS to return or find inventory_policy in the variant object. Here is also a piece of code that the theme allows to use in JS when variation is changed:

document.addEventListener('variant:change', function(evt) {
  console.log(evt.detail.variant);
});

Currently this is what I have in my product-template.liquid:

<div class="backorderMessage">

{% if product.tag contains 'Sneaker' and current_variant.inventory_policy == 'continue' %}
{% elsif current_variant.inventory_quantity <= 0 %}
<h4><u>On Backorder. Please allow 2-3 weeks for shipping.</u></h4>
{% endif %}

</div>

 I can work with JS, but only beginner so need some guidance!

[themecaster]

Think you can still do this server-side.

Here is the relevant code in Debut (product-price.liquid starting line 84):

<span class="price__badge price__badge--sold-out">
<span>{{ 'products.product.sold_out' | t }}</span>
</span>

 You have acess to product and variant objects from this location so you can add any message you like.

If the location of the 'sold out' message doesn't work for you, then listening for the event makes sense as follows:

<script>
  document.addEventListener('variantChange', function(evt) {
  console.log(evt.detail.available);
});
</script>

Note the 'variantChange' event name is slightly different than what you had in your example. When the variant is out of stock, the property evt.detail.available is false.

[Halftimekickz]

Thank you this helps a lot, I didn't know that I had access to the variant objects there. Is this documented? Or was this from experience? I looked for this but could not find it, and the documentation didn't guide me here at all.

[themecaster]

The variant object is referenced directly starting on line 99 in the source file in Debut Theme (product-price.liquid).