Back Order badge on collection page

[IanH2]

Hi there, 

I'm trying to add a Backorder Badge that appears on the collections page like this:

This uses the following base code within card-product.liquid: 

<div class="card__badge {{ settings.badge_position }}">         
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
              
            {%- elsif card_product.tags contains 'Pre Order' -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.Pre_Order' | t -}}
                
              </span>

              {%- elsif card_product.tags contains 'Back Order' -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.Back_Order' | t -}}
                
              </span>

              {%- elsif card_product.tags contains 'Sale' -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
                
               </span>

The issue here is that the Back Order badge will always appear even when the product is in stock so I need to add an additional clause to the elseif statement, I've tried calling things like inventory_quantity <=0 and even tried using a collection with auto rules that gather up all the out of stock items to try and call collection.title contains 'out of stock' but none of these seem to work.

{%- elsif card_product.tags contains 'Back Order' and collection.title contains 'Out of Stock' -%}

Is there any other way to produce the check so I can implement this on the collection page so customers don't need to click into each product to see the Click to Backorder replacement I've done for the add to cart button:

[dev_solutions]

Hello @IanH2 

Can you please share your store link and also clear my one confusion about it then i can help you 

1. You want to show the back order badge only when item is not available??

[IanH2]

The store is: https://sherburngamingcentre.com/

I want the back order button to only appear when the actual inventory is 0 or less. 

I believe I can't use card_product.available == false , as all products have the Continue selling when out of stock option selected.

I've realised I posted a lot more code than I needed to, the relevant section is:

              {%- elsif card_product.tags contains 'Back Order' -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.Back_Order' | t -}}

[Amanda_Fordeer]

Hi @IanH2,

You can seek the support of a 3rd party app like Product Labels & Badges. This tool will address various badge-related issues without needing code (or our dev team will be ready to assist you if needed). To create the badge as you desire, follow my steps below:

1. Install the app and enable app embed.

2. Create and customize the text label, setting it in your desired position at the bottom right corner of the product image.

3. In Product settings, select "Out stock" for the Inventory status feature.

4. In General settings, choose to show on collection pages

[Joe47 · Accepted solution]

Hi @IanH2,

You're close. Since the inventory is attached to the variants you just need to check each variant's inventory. This code should do the trick:

{% assign has_inventory = false %}
{%- for variant in card_product.variants -%}
  {%- if variant.inventory_quantity > 0 -%}
    {% assign has_inventory = true %}
    {% break %}
  {% endif %}
{%- endfor -%}
{%- if has_inventory == false -%}
  No inventory badge
{%- endif -%}

[IanH2]

Hi Joe, thanks for that, I'd still need the check for the "Back Order" tag as not all items are back orderable. So the whole logic should be:

Is it out of stock and does not have Continue selling when out of stock selected? -> apply Out of Stock badge

Is it a pre order? -> apply Pre Order badge

Does it have a Back Order tag and has 0 stock? -> apply Back Order badge

Does it have a sale tag? -> apply Sale badge

So I could have a product with 0 stock but a Pre Order tag so the Pre Order should take precedent, I only want to show 1 badge here really. 

[IanH2]

Solved it by using the above and slipping the has_inventory == false in the following:

{%- elsif card_product.tags contains 'Back Order' and has_inventory == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.Back_Order' | t -}}