Using coupons for event registration

May 13, 2014 1:04 pm

The client wishes to have the ability to accept coupon codes for event
registration, which seems to work fine if we use the field within the
Commerce form, but if we use the field directly within the Event Ticket
form it doesn't seem to register or show up in the Shopping Cart.

Are there any known issues with these fields or other settings for this
functionality?


Great question,

We reviewed the checkout process and unfortunately due to current restrictions it is not easy to migrate a coupon from the events module to the commerce module. The alternative is a one page checkout on the events page, but what we found with your particular layout is, it may be more intuitive to have the coupon button on the shopping cart page instead.

I will walk you through the process of adding the default coupon input to the shopping cart - of course you can always style it as need be, and we would suggest removing coupon field from the events module if you were to use this setup.

Lets go over what changes I made to get the coupon field on the shopping cart:

First lets go to Green > Layouts > Modules > edit ‘commerce_shoppingcart’, and then at the bottom of the "Body" textarea add the following javascript:

<script type="text/javascript">
$( function() {
oCommerce = new CommerceToolkit();
oCommerce.SetStates();
oCommerce.SetCountries( 'United States' );
oCommerce.AddApplyCouponButton( 'Apply Coupon' );
oCommerce.AddApplyGiftCardButton( 'Apply Gift Card' );
});
</script>

Next we are going to address the actual textbox that contains the coupon. I added an another div and text input just after the </table> and it looks like this:

<div><input type="text" id="IDFormField_coupon_code_0" name="formField_coupon_code" value=""></div>

You can easily add the gift card input here too by using:

<div><input type="text" id="IDFormField_Giftcard_0" name="formField_Giftcard" value=""></div>

This is the commerce input, it uses the javascript we previously included to append a new button to the div and verify that the coupon/gift does exist then fades in and out text that says either worked or failed.

Typically we suggest adding a button which says 'Update Cart’, so that after users apply the coupon they can see the discount take place, you can use jquery or another method to update the page. See http://www.devcurry.com/2009/07/how-to-refreshreload-page-using-jquery.html for an example.