Shopify Question posted in
The Shopify help center can be found here.

Can't update Add to Cart button based on inventory levels on Shopify

I’m trying to make it so that when the inventory levels for certain products are less than 1, it changes the button to say "Made to Order" instead of "Add to Cart" so that it implies they won’t ship immediately.

I made a new product template and product form and everything associated with that, but when I change the button code, it doesn’t seem to do anything.

I’m using the most recent version of the Palo Alto theme.

    <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn" data-add-to-cart>
        <span id="AddToCartText" data-add-to-cart-text>
            {%- if variants_count < 1 -%}
                {{- 'products.product.made_to_order' | t -}}
            {%- else -%}
                {{- 'products.product.add_to_cart' | t -}}
            {%- endif -%}
        </span>
        {%- render 'icon-loading' -%}
    </button>
Tags:

2

Answers


  1. 0

    You probably want to issue a little code to tell you the value of the liquid variable variants_count. It is not at all clear what that is set to. Is it the quantity of the current variant in inventory? If so, then your code should work. If not, why are you using it as a check? You can always access the quantity of a variant using the current variant in your variant rendering loop. variant.inventory_quantity is the value you probably should be using.

    So the first thing you are probably not doing right is checking for the quantity of a variant outside the product.variants rendering loop. The Add to Cart button is most often outside the scope of this loop, as it usually pertains to adding a product to the cart using a form submit.

    So now your challenge is instead to listen to the variant currently selected by the customer. When that variant is selected, the quantity will be used to decide what to print on the button. So you need some Javascript to alter the button text.

    Does that make sense? Changing the text once is never going to work unless you only ever have one variant, in which case, checking quantity would work, but as I said, this is a rare thing for most shops, to only ever have one variant.

    Login or Signup to reply.
  2. 0

    Try this, code is not tested;
    Basically, added data-qty when inventory is less than 1. When that option is selected, use js to check the attr and change the text of the button.

     <select name="id" id="productSelect" class="product-single__variants">
   {% for variant in product.variants %}
     {% if variant.available %}

       <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" 
            {% if variant.inventory_quantity < 1 %}
                data-qty="qty"
            {% endif %}
       >{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

     {% else %}
       <option disabled="disabled">
         {{ variant.title }} - {{ 'products.product.sold_out' | t }}
       </option>
     {% endif %}
   {% endfor %}
 </select>

 <div class="form__column{% if section.settings.enable_payment_button %} form__column--shopify-payment-btn{% endif %}">
   <label>&nbsp;</label>
   <button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--fill btn--regular btn--color{% if section.settings.enable_payment_button %} btn--shopify-payment-btn btn--secondary-accent{% endif %}">
     <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
   </button>
   {% if section.settings.enable_payment_button %}
     {{ form | payment_button }}
   {% endif %}
 </div>


<script>
    $(document).ready(function(){
        var qty = $("#productSelect option:selected").attr('data-qty');
        if (qty){
            $('#AddToCartText').text('Made to Order');
        }
        else {
            $('#AddToCartText').text('Order Now');
        }

        $('#productSelect').on('change', function (){
            qty = $("#productSelect option:selected").attr('data-qty');
            if (qty){
                $('#AddToCartText').text('Made to Order');
            }
            else {
                $('#AddToCartText').text('Order Now');
            }
        });
    });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search