Liquid, JavaScript, themes, sales channels
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!
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.
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.
The variant object is referenced directly starting on line 99 in the source file in Debut Theme (product-price.liquid).
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 %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024