replacing services drop down with clickable images?

totallytech
(@totallytech)

9 years ago

Hey,

I am using this for a garage to book MOT’s and I’m looking to use images instead of the drop down, so a car would be service 1 (Car MOT) and a van would be service 2 (van MOT)

My code currently displays:

<div class="app_services_dropdown_select"><select name="app_select_services" class="app_select_services"><option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option><option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select><input type="button" class="app_services_button" value="Show available times"></div>

I really want it to submit on click too, rather needed the submit button?

Any ideas?

https://wordpress.org/plugins/appointments/

Viewing 3 replies - 1 through 3 (of 3 total)

(@ugotsta)

No problem! You can simply use an extra attribute in your shortcode like so:

[app_services autorefresh="1"]

You’ll see details about that one at Settings > Shortcodes.

How does that work for you?

Cheers,
David

Thread Starter

totallytech

(@totallytech)

9 years ago

Hey, I see what you’ve done thank you 🙂

I’m actually trying to have two images side by side instead of the actual drop down.

[Class IV MOT] [Class VII MOT]

then you click either the Class IV or Class VII image and it displays the calender.

I’m guessing I’m going to need to change the actual code to do this rather than an easy css job lol

Thread Starter

totallytech

(@totallytech)

9 years ago

I know this is quite an odd thing to ask, but I’m struggling with making your dropdown be a set of radio buttons…

the code currently says:

<div class="app_services_dropdown_select">
  <select name="app_select_services" class="app_select_services">
  <option value="1" selected="selected">Class IV MOT (Up to 3,000KG)</option>
  <option value="2">Class VII MOT (3,000KG - 3,500KG)</option></select>
  <input type="button" class="app_services_button" value="Show available times">
</div>

However I’m trying to get it to change to radio buttons

<div class="app_services_dropdown_select">
   <input type="radio" name="app_select_services" class="app_select_services" value="1" />Class IV MOT (Up to 3,000KG)
   <input type="radio" name="app_select_services" class="app_select_services" value="2" />Class VII MOT (3,000KG - 3,500KG)
   <input type="button" class="app_services_button" value="Show available times">
</div>

I found class_app_shortcodes.php and I’ve changed the PHP to this:

$s .= '<div class="app_services_dropdown_select">';
		//$s .= '<select name="app_select_services" class="app_select_services">';
		if ( $services ) {
			foreach ( $services as $service ) {
				$service_description = '';
				// Check if this is the first service, so it would be displayed by default
				if ( $service->ID == $appointments->service ) {
					$d = '';
					$sel = ' checked="checked"';
				}
				else {
					$d = ' style="display:none"';
					$sel = '';
				}
				// Add options
				//$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
				$s .= '<input type="radio" name="app_select_services" class="app_select_services" value="'.$service->ID.'"'.$sel.' />'. stripslashes( $service->name ).'<br />';

				// Include excerpts
				$e .= '<div '.$d.' class="app_service_excerpt" id="app_service_excerpt_'.$service->ID.'" >';
				// Let addons modify service page
				$page = apply_filters( 'app_service_page', $service->page, $service->ID );
				switch ( $description ) {
					case 'none'		:		break;
					case 'excerpt'	:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
					case 'content'	:		$service_description .= $appointments->get_content( $page, $thumb_size, $thumb_class, $service->ID ); break;
					default			:		$service_description .= $appointments->get_excerpt( $page, $thumb_size, $thumb_class, $service->ID ); break;
				}
				$e .= apply_filters('app-services-service_description', $service_description, $service, $description) . '</div>';
			}
		}
		//$s .= '</select>';
		$s .= '<input type="button" class="app_services_button" value="'.$show.'">';
		$s .= '</div>';

but when I select one of the radio buttons my url changes to ?app_service_id=undefined and it doesnt work, however if I manually change the url to ?app_service_id=1 or ?app_service_id=2 then it works.

Can you point me in the right direction please?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘replacing services drop down with clickable images?’ is closed to new replies.