This is an old revision of the document!
Table of Contents
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.
Step 1: Overwrite the default block
To overwrite the submit button - you need to customise the checkout template. To do so:
- In the FoxyCart administration, head to the “checkout” template section.
- If not already, select “Custom Template”, and a text area will appear with the default checkout template.
- Look for the following lines within the template:
{% embed 'checkout.inc.twig' %}and{% endembed %} - In between those two lines, paste the following code:
{% block submit_button %}
{% if not is_updateinfo and not is_subscription_cancel %}
{% if total_order < 150 %}
<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 %}
{% endif %}
{% endblock %}
Step 2: Customise conditions
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.
Conditions based on Products
Additional logic for product based conditions
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:
- Navigate to the “configuration” section of your store's FoxyCart administration
- Look for the “Add custom header and footer codes to your templates” option, and enable it if not already.
- 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 %}
Example: Minimum Order Total for Wholesale Orders
Follow the above portion with the FC.client.on pieces, and take a look at Twig like this:
{% block submit_button %}
{% if is_wholesale is not defined %}
{% set is_wholesale = false %}
{% for item in items %}
{% if item.category == "WHOLESALE" %}
{% set is_wholesale = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if not is_updateinfo and not is_subscription_cancel %}
{% if is_wholesale and total_order < 500 %}
<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 $500 is required for wholesale purchase.
</p>
</div>
</div>
{% else %}
{{ parent() }}
{% endif %}
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}