Table of Contents

Add a Message to Coupon Area when Coupon Doesn't Meet Discount Criteria

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

On the Templates configuration page of your store's FoxyCart administration, under “Cart” look for “Add custom header or footer code to your website”, check the box if not checked, and add this code into the “Footer” text area.

{% 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 your “custom header” on the template configuration page:

<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>