Gift Voucher in Booking Event Form

1

Hello Treepl Team,

I’m currently working on a Booking an Event form. Is it possible to use the test voucher I made in the booking form I created?

This is the test voucher,
Screen Shot 2024-03-06 at 5.26.25 AM

And this is the booking form where I wanted to apply the test voucher (total amount is the amount of the event that is being booked),
Screen Shot 2024-03-06 at 5.27.46 AM

2

Hi @omamai
Yes, you can. In the form builder, add the ‘Gift Voucher’ field and ensure that’s added in your form layout/code as well.
Gift Vouchers should then be able to be used against the Event booking.

NOTE:
If you are displaying the total as text, the eCommerce Javascript will not likely update this display when the Gift Voucher is applied (it will only update the input field #PaymentTotalCost).
So either use that input to display the dynamic total, or you will need to implement some additional JS to update your display after the voucher is applied.

1 Like
3

This works for me. Thanks Adam! :blush:

1 Like
4

Just a follow up question,

Is there way to change the payment type filter into Free Payment when #PaymentTotalCost gets 0 (after gift voucher applied)? I’m trying to update it through javascript but I cannot get the latest value for #PaymentTotalCost.

5

This can be tricky as the Gift Voucher change event callbacks that Treepl have don’t work in regular forms (only in the shopping cart).
Instead, you’d need to watch for the change in other ways.

My Javascript skills aren’t advanced enough to know how to do this correctly (if it’s at all possible), but here is a bit of a hacky way to get around it:

<script>
    $('#Payment_GiftVoucher').on('blur', function() {
        setTimeout(() => {
            var newValue = $('#PaymentTotalCost').val();
            if ( newValue === 0 ) {
                $('#Payment_Type').val('Free').change();
            } else {
                $('#Payment_Type').val('CreditCard').change();
            }
        }, 1000);
    });
</script>

So we are watching for the blur event on the Gift Voucher field (when the user clicks off it) then waiting 1 second (to ensure the Gift Voucher request has completed) then grabbing the new payment value.
If the value is 0 we change the payment type to Free, else revert it back to Creditcard.

1 Like
6

This solved the issue. Thanks @Adam.Wilson!

1 Like