Back Order/Pre-Order buttons in Dawn Theme

Back Order/Pre-Order buttons in Dawn Theme

IanH2
Visitor
2 0 0

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. 

 

Replies 3 (3)

PaulNewton
Shopify Partner
7450 657 1562

Hi @IanH2 👋 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.

 

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


IanH2
Visitor
2 0 0

apologies, I've updated the original post

PaulNewton
Shopify Partner
7450 657 1562

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

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org