If you live in a region with poor bandwidth, your customers may have issues checking out before our widget has fully loaded and then skip adding relevant date and time details. In this case, you can disable the checkout button until our widget has fully loaded.
Lock the checkout button
In theme library, select the theme and click Edit code.
In Layout section, click theme.liquid file.
Copy and paste the following code into the file.
<script>
$(document).ready(function() {
{% assign has_physical_products = false %}
{% for item in cart.items %}
{% if item.requires_shipping %}
{% assign has_physical_products = true %}
{% endif %}
{% endfor %}
{% if has_physical_products %}
$('[name="checkout"]').attr('disabled', 'disabled');
window.ZapietEvent.listen('widget_loaded', function() {
$('[name="checkout"]').removeAttr('disabled');
});
{% endif %}
});
</script>Place the code in the theme.liquid file within the body. You may search for </body> and prepend the code.
Click Save.
Checkout button will now be locked until Zapiet - Pickup + Delivery has fully loaded.
Troubleshooting
To test if the code is working, you may duplicate the theme and disable our app embed on the duplicate. If the checkout button is disabled, this indicates that the code is working well.
If the code is not working, try adding jQuery on top of the cart file, e.g. cart.liquid, cart-template.liquid, main-cart.liquid, main-cart-footer.liquid etc.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>