Displaying services as buttons, rather than as a dropdown list?

Hi,

I would like to display the services I provide as buttons, rather than as a dropdown list. What's the easiest way to do this for a non-techie?

  • Kasia Swiderska
    • Support nomad

    Hello Ezinma,

    At the moment the Appointments+ does not have build-in option to change providers select to the buttons.
    This change would require custom coding - because I'm not developer I will flag Second Line Support and they will see if this can be done with the quick code snippet. Please note, that response form SLS may take a while.

    Kind regards,
    Kasia

  • Vinod Dalvi
    • WP Unicorn

    Hi Ezinma,

    Currently to achieve this we have to customize the Appointments+ plugin by editing the code in the following Appointments+ plugin file on line number 1201 which has the following code.

    /appointments/includes/class_app_shortcodes.php

    public function process_shortcode ($args=array(), $content='') {
    		extract(wp_parse_args($args, $this->_defaults_to_args()));
    
    		global $wpdb, $appointments;
    		$appointments->get_lsw();
    
    		if (!trim($order_by)) $order_by = 'ID';
    
    		if ($worker) {
    			$services = $appointments->get_services_by_worker( $worker );
    			// Find first service by this worker
    			$fsby = $services[0]->ID;
    			if ( $fsby && !@$_REQUEST['app_service_id'] ) {
    				$_REQUEST['app_service_id'] = $fsby; // Set this as first service
    				$appointments->get_lsw(); // Update
    			}
    			// Re-sort worker services
    			if (!empty($services) && !empty($order_by) && 'ID' !== $order_by) $services = $this->_reorder_services($services, $order_by);
    		} else {
    			$services = $appointments->get_services( $order_by );
    		}
    
    		$services = apply_filters( 'app_services', $services );
    
    		// If there are no workers do nothing
    		if (!$services || empty($services)) return;
    
    		$script ='';
    		$s = '';
    		$e = '';
    
    		$s .= '<div class="app_services">';
    		$s .= '<div class="app_services_dropdown">';
    		$s .= '<div class="app_services_dropdown_title">';
    		$s .= $select;
    		$s .= '</div>';
    		$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 = ' selected="selected"';
    				} else {
    					$d = ' style="display:none"';
    					$sel = '';
    				}
    				// Add options
    				$s .= '<option value="'.$service->ID.'"'.$sel.'>'. stripslashes( $service->name ) . '</option>';
    				// 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>';
    		$s .= '</div>';
    
    		$s .= '<div class="app_service_excerpts">';
    		$s .= $e;
    		$s .= '</div>';
    		$s .= '</div>';
    
    		$wcalendar = isset($_GET['wcalendar']) && (int)$_GET['wcalendar']
    			? (int)$_GET['wcalendar']
    			: false
    		;
    
    		// First remove these parameters and add them again to make wcalendar appear before js variable
    		$href = add_query_arg( array( "wcalendar"=>false, "app_provider_id" => false, "app_service_id" => false ) );
    		$href = apply_filters( 'app_service_href', add_query_arg( array( "wcalendar"=>$wcalendar, "app_service_id" => "__selected_service__" ), $href ) );
    
    		if ( $autorefresh ) {
    			$script .= "$('.app_services_button').hide();";
    		}
    
    		$script .= "$('.app_select_services').change(function(){";
    		$script .= "var selected_service=$('.app_select_services option:selected').val();";
    		$script .= "if (typeof selected_service=='undefined' || selected_service===null){";
    		$script .= "selected_service=" . (int)$appointments->get_first_service_id() . ";";
    		$script .= "}";
    		$script .= "$('.app_service_excerpt').hide();";
    		$script .= "$('#app_service_excerpt_'+selected_service).show();";
    		if ( $autorefresh ) {
    			$script .= "window.location.href='" . $this->_js_esc_url($href) . "'.replace(/__selected_service__/, selected_service);";
    		}
    		$script .= "});";
    
    		$script .= "$('.app_services_button').click(function(){";
    		$script .= "var selected_service=$('.app_select_services option:selected').val();";
    		$script .= "window.location.href='" . $this->_js_esc_url($href) . "'.replace(/__selected_service__/, selected_service);";
    		$script .= "});";
    
    		if (!$_noscript) $appointments->add2footer($script);
    
    		return $s;
    	}

    I will move this over to the features & feedback section. This way it can be considered for future development, and we can also see what other community members think about the feature request.

    Thanks,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.