Back Order/Pre-Order buttons in Dawn Theme

Store Design
,
1

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.

2

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

community-ken-jeong

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.

3

apologies, I’ve updated the original post

4

One approach

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

  {%- 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 -%}

  {%- 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 -%}
  ...