====== 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 [[https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig|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.

<code javascript>
{% 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 %}
</code>

==== 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:
<code javascript>
if (!FC.json.coupons[code].is_applied) {
</code>

with this:
<code javascript>
if ((!FC.json.coupons[code].is_applied) && (FC.json.coupons[code].name == "replace-with-your-coupon-name")) {
</code>

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:
<code>
<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>
</code>