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

Halftimekickz
Visitor
3 0 0

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!

Replies 4 (4)

themecaster
Excursionist
30 10 19

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.

 

If my response was helpful please Like and Mark As Solution.
Halftimekickz
Visitor
3 0 0

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
Excursionist
30 10 19

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

If my response was helpful please Like and Mark As Solution.
Chrissyking
Excursionist
12 0 4

I added the below code to the product-template.liquid file.  What can I add to the theme.js to create an event listener so that the message updates when new variants are selected?

 

<div class="productStatus">

 

   {% if current_variant.available and current_variant.inventory_quantity <= 0 %}

      <span class="statusBackorder">Available on backorder. Please allow 2-3 weeks for delivery</span>

   {% endif %}