Best way to use a list for services instead of a dropdown menu in App+?

My clients still do not see that the appointments services is a Drop Down Menu. I even put it in the instructions.

How do I create a list instead of using the drop down?
I am thinking of buttons to click on for each service.

thanks,
matt

    Luís

    Hi Mattbkelly ,

    Hope you're doing well today!

    If I understood well the question, you want to display the services as a list, like using an unordered list.

    I think that we will need to change the HTML rendered by the shortcode. I flagged the SLS team (our code experts ) to investigate further and get their valuable feedback.

    Since this team deals with more advanced threads it may take them longer to reply.

    Cheers, Luís

    Mahlamusa

    Hi Mattbkelly,

    I hope you are doing great today. I am sorry for the late reply from our side, things have been hectic on our side as we deal with a lot of complex issues.

    I was wondering if you still need help with your special requirement with regards to Appointments plugin. I will be more than happy to help you or guide you towards the right path to achieve your goals. Please let me know if you still need help with this and I will get right into it and find a possible solution for you.

    I hope to hear from you soon and please enjoy the rest of your day.

    Cheers,
    Mahlamusa

    Mahlamusa

    Hello Mattbkelly,

    I hope you are doing great so far. Thank you for getting back to us.

    I have done a little bit of coding and found that the following code will help you achieve what you want to achieve. I have created some JavaScript code that should help with this, there are two options you can add this code to your website.

    Option 1: Install and activate the plugin Simple Custom CSS and JS in your website, then go to "Custom CSS and JS > Add Custom JS", on the page that opens, add the following code in the large text box at the bottom:

    jQuery(document).ready(function(e) {
    			//clone the select into a list of radio boxes
    			jQuery('#app_select_services').after('<div id="services_list" />')
    	 			.children("option").each(function() {
    					          var this_is_selected = "";
    	 				if (jQuery(this).prop('selected')==true){
    	  					           this_is_selected = ' checked="ckecked"';
    	  				}
    	 				jQuery("#services_list").append("<span>"+
    	  	  				'<input type="radio" name="app_select_services" class="app_select_services" value="'+
    	  	  				jQuery(this).val()+'" '+this_is_selected+'/>'+
    	  	 				jQuery(this).text()+"</span><br/>");
    	 			})
    	 			.end().hide();
    
    	 		//detect a change in the list of services and update the hidden select
    	 		jQuery('.app_select_services').click( function(e) {
    	  	 		var value = jQuery(this).val();
    	 	 		jQuery('#app_select_services').val(value);
    			});
    });

    It should look like this (try to match the options in the screenshot below):

    Option 2: Download attached file, unzip and upload the file 'convert-select-to-list.php' to your website in the folder
    /wp-content/mu-plugins/
    Upload the file as it is, create the folder if it does not exist. You should now have the file like this:
    /wp-content/mu-plugins/convert-select-to-list.php

    Choose the option that suites you. Once you are done, go to your appointment booking page. You will notice that after the page loads completely, the drop down list will be replaced with a list of radio button labelled with the names of the services. So now your clients will see the list of services instead of the drop down list.

    It should look like this:

    I hope this is what you were looking for and I hope it works for you. I have tested this on the latest version of Appointments+ and the default Twenty Seventeen theme and it works for me, I hope it works for you.

    Please enjoy the rest of your day.

    Cheers,
    Mahlamusa

    Mahlamusa

    Hello Mattbkelly,

    I hope you are doing great today. I am happy if those radio buttons are useful to you and your customers.

    Do you know how to turn those radio selections into text buttons?

    I am not sure what you mean by text buttons, do you mean like the one labelled "Show available dates" below the radio buttons? If yes, you can change the code above slightly as follows.

    Change this:

    jQuery('#app_select_services').after('<div id="services_list" />')
    	.children("option").each(function() {
    				var this_is_selected = "";
    		if (jQuery(this).prop('selected')==true){
    					   this_is_selected = ' checked="ckecked"';
    		}
    		jQuery("#services_list").append("<span>"+
    			'<input type="radio" name="app_select_services" class="app_select_services" value="'+
    			jQuery(this).val()+'" '+this_is_selected+'/>'+
    			jQuery(this).text()+"</span><br/>");
    	})
    	.end().hide();

    Into this:

    jQuery('#app_select_services').after('<div id="services_list" />')
    	.children("option").each(function() {
    		var this_is_selected = "";
    		var this_val = jQuery(this).val();
    		if (jQuery(this).prop('selected')==true){
    			this_is_selected = ' checked="ckecked"';
    		}
    		jQuery("#services_list").append("<span>"+
    			'<button id="service_'+this_val+'" class="app_select_services" value="'+
    			this_val+'" '+this_is_selected+'>'+
    			jQuery(this).text()+"</button><br/><br/></span>");
    
    		if ( this_is_selected ){
    			jQuery('#service_'+this_val).css("background-color","#48c048");
    		}
    	})
    	.end().hide();

    That will replace the drop down menu into some buttons instead of radio buttons. I am not sure if that is what you want. If that is not what you want then I suggest you stick to the radio buttons or find another way. My task here was to help you with your initial question. If you feel you need more than that then I suggest you tweak the given code to do what you want it to do.

    You may refer to this page for the various input types you can use https://www.w3schools.com/tags/att_input_type.asp, the line that does this is the following line:

    <input type="radio" name="app_select_services" class="app_select_services" value="'+
    			jQuery(this).val()+'" '+this_is_selected+'/>

    You can change to a button by changing it to :

    <button id="service_'+this_val+'" class="app_select_services" value="'+
    			this_val+'" '+this_is_selected+'>'+
    			jQuery(this).text()+"</button>

    You can change it to any other input type, see the linked document for more input types you can use. I hope that helps.

    Please enjoy the rest of your day.

    Cheers,
    Mahlamusa

    Mahlamusa

    Hi Matt,

    I am glad I could help. It is our job as the WPMU DEV Staff to make sure you are happy with the services and support we offer.

    With regards to the buttons not allowing to select any options, would you please send me a direct link to the page you are referring to on your website. I tried to go through a few of the pages but couldn't find what you were referring to, I will appreciate a direct link to the page on which you are experiencing issues. Also, if you have made modifications to the code I shared above, please share with me what you changed so it can be easier for me to identify the problem.

    I hope you enjoy the rest of your day.

    Cheers,
    Mahlamusa

    Mahlamusa

    Hello Matt

    I have found the issue. The code was incomplete so I added the following lines to the JavaScript code:

    //detect a change in the list of services and update the hidden select
        jQuery('.app_select_services').click( function(e) {
          var value = jQuery(this).val();
          jQuery('#app_select_services').val(value);
        });

    And now the services can be selected by clicking the buttons. Please remember you have to click the button representing the service, then click the "Show available times" button and everything should work as it should.

    Thank you for trusting us with your business. I hope you enjoy your day.

    Cheers,
    Mahlamusa

    Mahlamusa

    Hello Mattbkelly,

    I hope you are doing great today. I have looked into the code and have seen that I have missed something on the code as I didn't know that you were using the auto refresh feature. I have now incorporated that into the script and it works as it should.

    I have added the line
    window.location.href = appointmentsStrings.reload_url.replace('__selected_service__', value);

    in the last part of the code so now it looks like this:

    jQuery('.app_select_services').click( function(e) {
    	var value = jQuery(this).val();
    	jQuery('#app_select_services').val(value);
    	window.location.href = appointmentsStrings.reload_url.replace('__selected_service__', value);
    });

    You may test this on your demo page and see how it works.

    is there a way to make it work with auto refresh?

    After applying the above changes to your code, you just need to make sure that your shortcode looks like this:

    [app_services autorefresh="1"]

    And that should do it.

    I hope this helps. Please let us know if you are still having issues.

    Cheers,
    Mahlamusa

    Mattbkelly

    That works perfectly. thank you. do you know how to turn the single column of buttons to two columns?
    that worked great. thank you

    I can't figure out from the w3schoole tutorial how to work the services because in the html i am not using the actual values like 10 min massage or 20 min massage. it is being pulled from the database so it will need to be told to organize what goes there into two columns.

    tricky stuff