Show confetti when an auto discount is applied in Easy Digital Downloads

Derek Ashauer November 16, 2023

I like to make use of Easy Digital Download’s discount code feature that lets discount codes be applied in the URL. One less step of typing it in for your customer is always helpful.

When that discount code is applied, having some kind of confirmation message for the user is also helpful so they know what has happened. I’m always looking for fun new ways to use our Confetti plugin and so I came up with this for Sunshine Photo Cart’s site:

How to trigger confetti to show when a discount is applied

This requires a little custom code to work as it is not yet part of the core plugin.

add_filter( 'wp', 'auto_discount_enqueue_confetti' );
function auto_discount_enqueue_confetti() {
	if ( isset( $_GET['discount'] ) ) {
		$discount_code = sanitize_text_field( $_GET['discount'] );
		$discount  = edd_get_discount_by_code( $discount_code );
		if ( empty( $discount ) ) {
			return;
		}
		WPS_Confetti()->enqueue_scripts();
	}
}

add_filter( 'wp_footer', 'auto_discount_show_confetti' );
function auto_discount_show_confetti() {
	if ( isset( $_GET['discount'] ) ) {
		$discount_code = sanitize_text_field( $_GET['discount'] );
		$discount  = edd_get_discount_by_code( $discount_code );
		if ( empty( $discount ) ) {
			return;
		}
		?>
			<div id="discount-applied" style="display: none;"><div id="discount-applied-message">Discount code "<?php echo $discount_code; ?>" applied! <div style="font-size: 18px;">Discount shown at checkout</div></div></div>
			<script>
				jQuery( document ).ready(function($){
					$( '#discount-applied' ).fadeIn( 500,function(){
						wps_launch_confetti_cannon();
					}).delay( 4000 ).fadeOut( 500 );
				});

			</script>
		<?php
	}
}

And a little styling for the message:

#discount-applied { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(34,45,57,.95); }
#discount-applied-message { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 36px; font-weight: bold; color: #FFF; }