This is an old revision of the document!
Table of Contents
Add a Message to Coupon Area when Coupon isn't Applying
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() { 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 && (FC.json.coupons[code].name == "replace-with-your-coupon-name")) { 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 +'">Replace with your message</div></td></tr>'); } } } } </script> {% endif %}
Customize
Customize the script by adding your own coupon name in place of “replace-with-your-coupon-name” and 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 message to only one of the coupons – the one you specify in “replace-with-your-coupon-name”. If you want a more generic message to appear for each coupon, you can remove the criteria that matches the coupon, that is, you'd remove this:
&& (FC.json.coupons[code].name == "replace-with-your-coupon-name")
You'd then want to change your message to be generic – something like, “You have not met the criteria yet for this coupon to be applied”.
Wait! There's More
Because the snippet sets 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>