Help adding +/- buttons to ticket form

[Mike]

I am attempting to add plus and minus buttons to the quantity field in Event Tickets Plus – Woocommerce. While I can get the buttons to appear on the page, I don’t seem to be able to tag in the Javascript to make it work.

Code for the buttons is simple enough:

<input class="plus" type="button" value="+">
<input class="minus" type="button" value="-">

Javascript (loaded at the top of the tickets.php page:

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.woocommerce_quantity_input').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            $input.val( val+1 ).change();
        });
 
        $('.woocommerce_quantity_input').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            if (val > 0) {
                $input.val( val-1 ).change();
            } 
        });
    });
    </script>

And the full code for the template page:

<?php
/**
 * Renders the WooCommerce tickets table/form
 *
 * @version 4.3.2
 *
 * @var bool $global_stock_enabled
 * @var bool $must_login
 */
global $woocommerce;

$is_there_any_product         = false;
$is_there_any_product_to_sell = false;
$unavailability_messaging     = is_callable( array( $this, 'do_not_show_tickets_unavailable_message' ) );

ob_start();

/**
 * Filter classes on the Cart Form
 *
 * @since  4.3.2
 *
 * @param array $cart_classes
 */
$cart_classes = (array) apply_filters( 'tribe_events_tickets_woo_cart_class', array( 'cart' ) );
?>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $('.woocommerce_quantity_input').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            $input.val( val+1 ).change();
        });
 
        $('.woocommerce_quantity_input').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            if (val > 0) {
                $input.val( val-1 ).change();
            } 
        });
    });
    </script>
<form action="<?php echo esc_url( $woocommerce->cart->get_cart_url() ) ?>" class="<?php echo implode( ' ', $cart_classes ); ?>" method="post" enctype='multipart/form-data'>
	<h2 class="tribe-events-tickets-title"><?php esc_html_e( 'Tickets', 'event-tickets-plus' ) ?></h2>

	<table width="100%" class="tribe-events-tickets">
		<?php
		foreach ( $tickets as $ticket ) {
			/**
			 * @var Tribe__Tickets__Ticket_Object $ticket
			 * @var WC_Product $product
			 */
			global $product;

			if ( class_exists( 'WC_Product_Simple' ) ) {
				$product = new WC_Product_Simple( $ticket->ID );
			} else {
				$product = new WC_Product( $ticket->ID );
			}

			if ( $ticket->date_in_range( current_time( 'timestamp' ) ) ) {

				$is_there_any_product = true;
				$data_product_id = 'data-product-id="' . esc_attr( $ticket->ID ) . '"';

				echo sprintf( '<input type="hidden" name="product_id[]" value="%d">', esc_attr( $ticket->ID ) );

				echo '<tr><td width="20px"><input class="plus" type="button" value="+"><br><input class="minus" type="button" value="-"></td>';

				/**
				 * Filter classes on the Price column
				 *
				 * @since  4.3.2
				 *
				 * @param array $column_classes
				 */
				$column_classes = (array) apply_filters( 'tribe_events_tickets_woo_quantity_column_class', array( 'woocommerce' ) );
				echo '<td class="' . implode( ' ', $column_classes ) . '" ' . $data_product_id . '>';

				if ( $product->is_in_stock() ) {
					// Max quantity will be left open if backorders allowed, restricted to 1 if the product is
					// constrained to be sold individually or else set to the available stock quantity
					$max_quantity = $product->backorders_allowed() ? '' : $product->get_stock_quantity();
					$max_quantity = $product->is_sold_individually() ? 1 : $max_quantity;
					$original_stock = $ticket->original_stock();

					// For global stock enabled tickets with a cap, use the cap as the max quantity
					if ( $global_stock_enabled && Tribe__Tickets__Global_Stock::CAPPED_STOCK_MODE === $ticket->global_stock_mode()) {
						$max_quantity = $ticket->global_stock_cap();
						$original_stock = $ticket->global_stock_cap();
					}

					woocommerce_quantity_input( array(
						'input_name'  => 'quantity_' . $ticket->ID,
						'input_value' => 0,
						'min_value'   => 1,
						'max_value'   => $must_login ? 0 : $max_quantity, // Currently WC does not support a 'disable' attribute
					) );

					$is_there_any_product_to_sell = true;

					$remaining = $ticket->remaining();

					if ( $remaining ) {
						?>
						<span class="tribe-tickets-remaining">
							<?php
							echo sprintf( esc_html__( '%1$s tickets available', 'event-tickets-plus' ),
								'<span class="available-stock" ' . $data_product_id . '>' . esc_html( $remaining ) . '</span>'
							);
							?>

						</span>
						<?php
					}

					do_action( 'wootickets_tickets_after_quantity_input', $ticket, $product );
				} else {
					echo '<span class="tickets_nostock">' . esc_html__( 'Out of stock!', 'event-tickets-plus' ) . '</span>';
				}
				echo '</td>';

				echo '<td class="tickets_name">';
				echo $ticket->name;
				echo '</td>';

				echo '<td class="tickets_price">';
				echo $this->get_price_html( $product );
				echo '</td>';

				echo '<td class="tickets_description">';
				echo $ticket->description;
				echo '</td>';

				echo '</tr>';

				if ( class_exists( 'Tribe__Tickets_Plus__Attendees_List' ) && ! Tribe__Tickets_Plus__Attendees_List::is_hidden_on( get_the_ID() ) ) {
					echo '<tr class="tribe-tickets-attendees-list-optout">' . '<td colspan="4">' .
						 '<input type="checkbox" name="optout_' . $ticket->ID . '" id="tribe-tickets-attendees-list-optout-woo">' .
						 '<label for="tribe-tickets-attendees-list-optout-woo">' . esc_html__( 'Don\'t list me on the public attendee list', 'event-tickets' ) . '</label>' . '</td>' .
						 '</tr>';
				}

				include Tribe__Tickets_Plus__Main::instance()->get_template_hierarchy( 'meta.php' );
			}
		}

		if ( $is_there_any_product_to_sell ) {
			?>
			<tr>
				<td colspan="4" class="woocommerce add-to-cart">
					<?php if ( $must_login ): ?>
						<?php include Tribe__Tickets_Plus__Main::instance()->get_template_hierarchy( 'login-to-purchase' ); ?>
					<?php else: ?>
						<button type="submit" name="wootickets_process" value="1"
							class="button alt"><?php esc_html_e( 'Add to cart', 'event-tickets-plus' );?></button>
					<?php endif; ?>
				</td>
			</tr>
			<?php
		} ?>
	</table>
</form>

<?php
$content = ob_get_clean();
if ( $is_there_any_product ) {
	echo $content;

	// @todo remove safeguard in 4.3 or later
	if ( $unavailability_messaging ) {
		// If we have rendered tickets there is generally no need to display a 'tickets unavailable' message
		// for this post
		$this->do_not_show_tickets_unavailable_message();
	}
} else {
	// @todo remove safeguard in 4.3 or later
	if ( $unavailability_messaging ) {
		$unavailability_message = $this->get_tickets_unavailable_message( $tickets );

		// if there isn't an unavailability message, bail
		if ( ! $unavailability_message ) {
			return;
		}
	}
}

What am I missing? Does the javascript need to call to a different function name?

The code I am using was culled from a Woocommerce guide to accomplish the same effect. Obviously, it needs to be altered for TEC Event Tickets Plus, but if I can link the buttons to the right quantity field, it SHOULD work.

Any help would be appreciated.

NOTE: To anyone else trying to use this code in the future, you’ll still want to style your +/- with CSS. I’ll link my code later once we actually get it working.

[Geoff B.]

Hello again Mike,

I must say I am a bit confused.
Built-in, there are + and – buttons for Event Tickets Plus.

I am not sure why you would want to use a customization for adding something that should already be there. But perhaps I am missing something ?

As you might know, the scope of our support is mostly to get our customers started on the right track and to help them in case of issues.

We unfortunately do not provide complete support for customization.

That being said, I will gladly ask for an expert pair of eye once I can understand what you are trying to accomplish that is outside of the built-in functionality.

Best regards,

Geoff B.

[Mike]

See attached image:

By default, buttons only appear when you hover over the quantity field, and they are boring and uninspired. I would like to add buttons to either side of the quantity field, that I can style as I see fit, that will control the quantity output.

Furthermore, I have found that the buttons in default literally disappear entirely in several professional themes, although they still appear in the Woocommerce shop pages. This is a lesser concern, as I want to replace them entirely.

So if I do not programatically need to CREATE the buttons, can I least move/style them with CSS?

• This reply was modified 9 years, 5 months ago by Mike.

[Geoff B.]

Hey Mike,

Thank you for clarifying this for me. I see what you are trying to do and it will look great.

In fact, it kind of reminds me of the customization done in certain premium themes such as Avada.

I will have some expert eyes look at your code as I am unable to pinpoint exactly what does not work in this specific case.

You are also right about the fact that these buttons sometimes disappear in certain themes.
Believe it or not, sometimes this is voluntary (some people prefer a simple number field).

Other times, this is because some WooCommerce customizations of the theme ( meant for the regular shop) are running interference.

Hang in there as I follow-up on this for you.

Have a good week-end,

Geoff B.

[Geoff B.]

Good afternoon Mike,

As promise, I went ahead and asked for expert eyes.

I believe you just need to use the jQuery .trigger( 'change' ); on the input element itself, after incrementing it. Our JavaScript and WooCommerce likely detects the onchange event. And your JavaScript would not trigger that I don’t think.

The short answer is that it is hard for us to know what the issue is without writing the code out and testing it for ourselves.

Even though that level of support goes way above our support agreement, I would love to do that for you if I could. Unfortunately though we are a little bit swamped today. Would you mind taking that advice and try playing around with it a bit?

Have a great day!

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts