Dynamically blocking checkouts

Sometimes you need to prevent customers from being able to complete the checkout based on specific conditions, such as the total cost or quantity of products. This simple snippet will hide the checkout button and instead display a message for the customer.

To overwrite the submit button - you need to customise the checkout template. To do so:

1. In the FoxyCart administration, head to the “checkout” template section.
2. If not already, select “Custom Template”, and a text area will appear with the default checkout template.
3. Look for the following lines within the template: {% embed 'checkout.inc.twig' %} and {% endembed %}
4. In between those two lines, paste the following code:

{% block submit_button %}
    {% set allow_order = true %}
    {% if total_order < 150 %}
        {% set allow_order = false %}
    {% endif %}
 
    {% if not allow_order and not is_updateinfo and not is_subscription_cancel %}
        <div class="fc-form-group">
            <div class="col-sm-7 col-sm-push-3">
                <p class="fc-alert fc-alert--danger">
                    A minimum order total of $150 is required to purchase.
                </p>
            </div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

Depending on your requirements, you'll need to customise the conditions for when the custom message should be displayed. In the snippet above, it's based on the order total being at least $150 - specifically this part:

{% if total_order < 150 %}

You can customise this to check for whatever you need, using the view data available in the templates. For example, if you wanted to require at least 6 products:

{% if item_count < 6 %}

You'll also want to customise the message to match your requirements - within the script it's set to “A minimum order total of $150 is required to purchase” currently.

If your Twig logic is based on product information (for example, the quantity or presence of specific products), you will need to also add a little bit of extra javascript to your store to ensure the submit button is re-rendered as required.

This logic is not required if your logic does not depend on product information.

To add the code, follow these steps:

1. Navigate to the “configuration” section of your store's FoxyCart administration
2. Look for the “Add custom header and footer codes to your templates” option, and enable it if not already.
3. Within the footer textarea, paste the following code and save the configuration.

{% if context == "checkout" %}
<script>
FC.client.on("cart-item-remove.done", FC.checkout.renderSubmitButton);
FC.client.on("cart-item-quantity-update.done", FC.checkout.renderSubmitButton);
</script>
{% endif %}

This is an example of logic if you wanted to restrict orders not just by the total order amount, but also only if a specific category of products is present in the cart.

Follow the above steps for adding the javascript to your store's configuration, and use Twig like this in your checkout template in between the {% embed 'checkout.inc.twig' %} and {% endembed %} tags:

{% block submit_button %}
    {% set allow_order = true %}
    {% set is_wholesale = false %}
    {% for item in items %}
        {% if item.category == "WHOLESALE" %}
            {% set is_wholesale = true %}
        {% endif %}
    {% endfor %}
    {% if is_wholesale and total_order < 150 %}
        {% set allow_order = false %}
    {% endif %}
 
    {% if not allow_order and not is_updateinfo and not is_subscription_cancel %}
        <div class="fc-form-group">
            <div class="col-sm-7 col-sm-push-3">
                <p class="fc-alert fc-alert--danger">
                    A minimum order total of $150 is required to purchase.
                </p>
            </div>
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

The snippet above just replaces the checkout submit button with the error message, so it's not immediately visible to the customer that their checkout attempt is not possible yet.

If you want to also display the error at the top of the page, you can follow these steps to achieve that:

Similar to how the custom block was included within the checkout template, you'll include an additional block inside the {% embed 'checkout.inc.twig' %} and {% endembed %} tags. You can use the same conditional logic in this block as with the checkout_submit block above - but the HTML is slightly different for how it's shown on the page:

{% block required_hidden_fields %}
    {% set allow_order = true %}
    {% if total_order < 150 %}
        {% set allow_order = false %}
    {% endif %}
 
    {% if not allow_order and not is_updateinfo and not is_subscription_cancel %}
        <div class="fc-messages">
            <div class="fc-alert fc-alert--danger">
                <ul>
                    <li>A minimum order total of $150 is required to purchase.</li>
                </ul>
            </div>
        </div>
    {% endif %}
    {{ parent() }}
{% endblock required_hidden_fields %}

To ensure the error message at the top of the checkout is updated if the customer adjusts their cart, you will need to also add some javascript to your footer.

To add the code, follow these steps:

1. Navigate to the “configuration” section of your store's FoxyCart administration
2. Look for the “Add custom header and footer codes to your templates” option, and enable it if not already.
3. Within the footer textarea, paste the following code and save the configuration.

{% if context == "checkout" %}
<script>
FC.client.on("cart-item-remove.done", FC.checkout.renderRequiredHiddenFields);
FC.client.on("cart-item-quantity-update.done", FC.checkout.renderRequiredHiddenFields);
</script>
{% endif %}