less than a minute read • Updated 9 minutes ago
Add a message when a coupon does not meet its discount criteria
How to show a cart message when a coupon is added but has not yet met the conditions for its discount.
If a coupon applied doesn't meet the criteria yet (for example, the customer needs to purchase a certain quantity of a product) and you'd like to add a message explaining why the customer isn't getting the discount yet, you can use this snippet.
Add javascript
In the Foxy admin (https://admin.foxy.io), go to Settings > Templates and add the code to the Custom footer field (Twig is supported; it is injected before the closing </body> tag).
{% if context == "cart" or context == "checkout" %}
<script>
FC.client.on("render.done", updateCouponDom);
FC.client.on("ready.done", updateCouponDom);
function updateCouponDom() {
var coupon_message = "Replace with your message";
for (var code in FC.json.coupons) {
$("[data-fc-coupon-container-id='" + FC.json.coupons[code].id + "']").attr("data-fc-coupon-" + ((FC.json.coupons[code].is_applied) ? "active" : "inactive"), "");
if (!FC.json.coupons[code].is_applied) {
if (!$("#message_" + FC.json.coupons[code].id).html()) {
$("[data-fc-coupon-container-id='" + FC.json.coupons[code].id + "']").after('<tr><td class="fc-subtotal__label"><div id="message_' + FC.json.coupons[code].id +'">' + coupon_message + '</div></td></tr>');
}
}
}
}
</script>
{% endif %}Customize
Customize the script by adding the message you'd like to show to the customer in place of "Replace with your message".
Optional Customization
This script is set to add a generic message for coupons in the cart. If you want to specify the message to apply to only one coupon, you can replace the following line:
if (!FC.json.coupons[code].is_applied) {with this:
if ((!FC.json.coupons[code].is_applied) && (FC.json.coupons[code].name == "replace-with-your-coupon-name")) {then specify your coupon name in "replace-with-your-coupon-name".
Wait! There's More
Because the snippet creates an attribute of inactive or active to the element, you can also target that element using CSS to style it. For example, you may want the text to appear gray. To add that in, you can include the following in the Custom header field on Settings > Templates:
<style>
#fc .fc-transaction__discounts [data-fc-coupon-inactive] td.fc-subtotal__label,
#fc .fc-transaction__discounts [data-fc-coupon-inactive] td.fc-subtotal__value {
color:#777;
}
</style>