Shopify themes, liquid, logos, and UX
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.
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.
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
apologies, I've updated the original post
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
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024