Back Order/Pre-Order buttons in Dawn Theme

[IanH2]

Hi there, 

I've followed a couple of tutorials to add code to my site to replace my Add to Cart Button with either a Pre-Order button or Back Order Button using the code below:

{% if product.tags contains 'Back Order' %}
            {% assign backorder = true %}
            {% endif %}
             {% if product.tags contains 'Pre Order' %}
            {% assign preorder = true %}
            {% endif %}
            
            <span>
              {%- if product.selected_or_first_available_variant == null -%}
                {{ 'products.product.unavailable' | t }}
              {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
               {%- elsif preorder == true %}
                 {{ 'products.product.preorder' | t }} 
              {%- elsif backorder == true %}
                 {{ 'products.product.backorder' | t }}
              {% else %}  
                {{ 'products.product.add_to_cart' | t }}
              {%- endif -%}

It's now dawned on me that even when I have inventory in stock it will still display the Pre-Order or Back-Order buttons due to the ordering of the if statements. 

The obvious solution to this is either to change the order of the "if" statements however I don't know what if statement to add here or add a more complex "if" statement with an "and" condition to check if the inventory is greater than 0. 

So something like: If Tag = Back Order and inventory >0 then assign back order = "true" 

I've tried a few variants but I don't think I'm targeting the right information to return the inventory check, last one I tried broke the add to card button entirely and I've had to roll back to a previous version. 

If anyone can point me in the right direction it would be most appreciated. 

[PaulNewton]

Hi @IanH2 👋 when discussing text or code DO NOT post only a screenshot, paste actual sample code there is even a format code button.

Images are not the problem statement itself they are supplementary to good problem statements that lower the effort required of other people to help with your problem.

Read: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408 

Just make it two separate checks for special behavior and standard behavior

{% if var or var2 %} {% if var %}{%elsif var2 %}{% endif %}

{% unless var or var2  %}{%comment%}standard variant button behavior{%endcomment %} {% endunless %}

Also for some themes this is only part the equation as javascript is needed to update button content as other variants are selected.

[IanH2]

apologies, I've updated the original post

[PaulNewton]

One approach

{%- if product.tags contains 'Back Order' -%}
  {%- assign backorder = true -%}
{%- endif -%}
{%- if product.tags contains 'Pre Order' -%}
  {%- assign preorder = true -%}
{%- endif -%}

<span>
  {%- if preorder or backorder %}
     {%- if backorder %}{{ 'products.product.backorder' | t }}{%- endif -%}
     {%- if preorder %}{{ 'products.product.preorder' | t }}{%- endif -%}
  {%- else -%}
    {%- if product.selected_or_first_available_variant == null -%}
      {{ 'products.product.unavailable' | t }}
    {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {%- endif -%}
  {%- endif -%}
  ...

Or shift the logic to be an output instead of more conditions

{%- assign add_to_cart_text_special_order = "" -%}
{%- if product.tags contains 'Back Order' -%}
  {%- assign add_to_cart_text_special_order = 'products.product.backorder' | t -%}
{%- endif -%}
{%- if product.tags contains 'Pre Order' -%}
  {%- assign add_to_cart_text_special_order = 'products.product.preorder' | t -%}
{%- endif -%}

<span>
  {%- if add_to_cart_text_special_order != "" %}
     {{ add_to_cart_text_special_order }}
  {%- else -%}
    {%- if product.selected_or_first_available_variant == null -%}
      {{ 'products.product.unavailable' | t }}
    {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {%- endif -%}
  {%- endif -%}
  ...