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

KT_Babb
Shopify Partner
2 0 1

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?

 

Replies 3 (3)

BRICKInc
Visitor
1 0 0

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
Shopify Partner
2 0 1

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

jbatchelor
Visitor
1 0 0

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.