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 the widget has loaded.
Lock the checkout button
In theme library, select the theme and click Edit code.
Open the theme.liquid file.
Search for
</body>and prepend it with the code below.<!-- Zapiet | Disable checkout button -->
{% assign disable_checkout = false %}
{% for item in cart.items %}
{% if item.requires_shipping %}
{% assign disable_checkout = true %}
{% endif %}
{% endfor %}
{% if disable_checkout == true %}
<style id="zapiet-style-disable-checkout-button">
[name="checkout"] {
opacity: 0.5;
pointer-events: none;
}
</style>
{% endif %}
<!-- End of Zapiet code -->
Click Save.
In Zapiet - Pickup + Delivery, click Settings, then Developers.
Paste the code below into Custom scripts.
var styleTag = document.querySelector("#zapiet-style-disable-checkout-button");
if (styleTag) {
styleTag.remove();
}
Click Save.
The checkout button will now be disabled until the Zapiet - Pickup + Delivery widget has loaded for all physical products. If you have digital products that use the widget, please use the code added in the troubleshooting section.
If you uninstall Zapiet - Pickup + Delivery or disable the widget, the checkout button will remain locked. Please remove the code from theme.liquid first.
Troubleshooting
You may need to modify the code to correctly target the checkout button—if you are not comfortable editing code, please contact our team on chat and we would be happy to help!
If you have digital products that use the widget, you can replace the code added in theme.liquid with this:
<!-- Zapiet | Disable checkout button -->
<style id="zapiet-style-disable-checkout-button">
[name="checkout"] {
opacity: 0.5;
pointer-events: none;
}
</style>
<!-- End of Zapiet code -->