I've been trying to implement a custom stock message in the Warehouse theme where I need to indicate a lead time for certain products when stock level is <= 0 and I'm still allowing the product to sell - much like has been described in this post.
Here's my current scenario after I've tried implementing this as per the post above:
I'm selling sheepskin slippers which have a production lead time;
When I land on the product page the first size is selected by default and correctly shows the custom lead time message I’ve set up:
When clicking size 3 it correctly shows the available stock message:
All good at this point.
Now here's where the problem starts, when refreshing the page with size 3 selected it still correctly shows the available stock message:
However, when selecting size 2 at this point it now suddenly shows the default ‘In Stock’ message and no longer my custom lead time message anymore:
When I refresh the page at this point then my custom lead time correctly shows again.
I’ve tried a number of things in theme.js, and with both parts of product-info.liquid (including the JS script at the bottom).
This is critical to me transitioning my store from Supply to the Warehouse theme, I just need a custom lead time message for specific vendor’s products to show when stock is <= 0 and when set to continue selling.
This is where js becomes iffy, you'd have to determine where your error is.
I'd suggest going the backend route. using liquid to display messages.
e.g. if product.handle == sheepskin=slippers and if size == 2 and stock < 1
else show default
show this message.
You'd have to get rid of the js, as js would take precedent since it's frontend