Code help? I need a backorder message to appear on click.

[KT_Babb]

Long story short, my business's in-house web developer accepted another position, and it has fallen to me to redesign my company's product pages. I know a little bit of code, but not much, and I have run into something of a roadblock.

I want my items to show a backorder message if:

• the inventory for the selected variant is less than or equal to 0 and
• if the inventory policy is set to continue.

Currently, my code under product-template.liquid looks like this:

{% if product.selected_or_first_available_variant.inventory_quantity <= 0 and product.selected_or_first_available_variant.inventory_policy == 'continue' %}
        <p class="stockmessage">This size/color is backordered {{product.metafields.item.stock_message}}.</p>
{% endif %}

This almost does the trick, but only shows up if you refresh the page after selecting a new variant, which... obviously isn't going to work. I need the backorder message to show up whenever a customer clicks on a backordered variant. I've been working at this for a while, and I *think* I'll need to use Javascript to achieve the result that I want. Trouble is, I haven't the faintest idea where to start.

I am working in the new, updated Debut theme. My website's live theme is an older version of Debut and has the desired functionality already in place, as you can see on this product page:

https://www.breakoutbras.com/products/panache-underwire-sports-bra-5021-black?variant=29761339457639

Here is the store preview with the new version of Debut:

https://tl279bl788aafwv1-17137561.shopifypreview.com

Can anyone help me out?

[BRICKInc]

Did you ever figure out the way for this? Please let me know as I'm running into the same issue as well.

---

@KT_Babb wrote:

Long story short, my business's in-house web developer accepted another position, and it has fallen to me to redesign my company's product pages. I know a little bit of code, but not much, and I have run into something of a roadblock.

I want my items to show a backorder message if:

• the inventory for the selected variant is less than or equal to 0 and
• if the inventory policy is set to continue.

Currently, my code under product-template.liquid looks like this:

{% if product.selected_or_first_available_variant.inventory_quantity <= 0 and product.selected_or_first_available_variant.inventory_policy == 'continue' %}
        <p class="stockmessage">This size/color is backordered {{product.metafields.item.stock_message}}.</p>
{% endif %}

This almost does the trick, but only shows up if you refresh the page after selecting a new variant, which... obviously isn't going to work. I need the backorder message to show up whenever a customer clicks on a backordered variant. I've been working at this for a while, and I *think* I'll need to use Javascript to achieve the result that I want. Trouble is, I haven't the faintest idea where to start.

I am working in the new, updated Debut theme. My website's live theme is an older version of Debut and has the desired functionality already in place, as you can see on this product page:

https://www.breakoutbras.com/products/panache-underwire-sports-bra-5021-black?variant=29761339457639

Here is the store preview with the new version of Debut:

https://tl279bl788aafwv1-17137561.shopifypreview.com

Can anyone help me out?

---

[KT_Babb]

Nope. Posted a job in the experts marketplace and still no luck.

[jbatchelor]

Hey @KT_Babb your preview link has expired can you post it again. Also can you send me the link to your Job posting in the experts marketplace, I might be able to fix this issue for you.