How to Add Custom Code to Appointment Confirmation Area

I need help adding custom code inside the appointment confirmation area. I'm using the weekly version of A+.

Specifically, I'm wanting to use the time zone widget by http://www.worldtimebuddy.com/event-widgets

So, once an appointment time slot has been selected, I'll need to pass the date & time variables to their widget.

Because our clients are in every state, my goal is to provide the clearest communication as to when "their" appointment time is scheduled...beyond the "All times are pacific time." notice.

Thank you for your earliest response.

  • Vaughan

    Hi Paul,

    Hope you're well?

    You'll be pleased to hear there has been significant development on timezone support in apps+ lately.

    Have a look at the following thread. https://premium.wpmudev.org/forums/topic/appiontments-in-multiple-time-zones

    What kind of code are you wanting to add to the confirmation area?

    You would need to edit the plugin code for this though. This is a bit beyond my level of expertise. Let me just ask one of our developers for some assistance with this for you.

    Hope this helps

  • Paul

    Hi, and thanks, Vaughan... The thread you provided seems like it's a work in progress. However, I have added a new function in the function.php file and it sort of works, but I need help in passing the appointment date and time to the widget. I decided to place the timezone widget in the "additional_fields" area for the confirmation box... Here's my function.php code.

    // ADD custom code inside appointment confirmation
    function my_app_function($script) {
    
    		$appt_day 		= '12/13/2014'; // NEED VARIABLE
    		$appt_time 		= '14:00'; // NEED VARIABLE
    
    	$add = '<div>
    	           <label>
    	              <span style="margin-right: 10px;width: 30%;display:block;float:left">Confirm Time Zone</span>
    	              <div style="min-width:482px" class="wtb-ew-v1">
    	                 <script src="http://www.worldtimebuddy.com/event_widget.js?h=8&md='. $appt_day .'&mt='. $appt_time .'&ml=0.50&sts=0&sln=0&wt=ew-lt"></script><i><a href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com</i><noscript><a href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com</noscript><script>window[wtb_event_widgets.pop()].init()</script>
    	              </div>
    	           </label>
    	        </div>';	
    
    	return  $script.$add;
    }
    add_filter( 'app_additional_fields', 'my_app_function' );
  • Paul

    Still waiting on how to pass appointment date & time to functions.php

    Here's my updated functions.php code, that places a time zone confirmation box below the appointment confirmation fields:

    // ADD custom code inside appointment confirmation
    function my_app_function($script) {
    
    		$test = date_i18n('m/d/Y', $appointments->start); //'12/13/2014'; // NEED VARIABLE
    		$appt_date = '12/13/2014'; // NEED VARIABLE
    		$appt_time = '14:00'; // NEED VARIABLE
    
    	$add = '<style>.appointments-confirmation-wrapper div.wtb-ew-v1 span{ display:block !important;width: auto !important;}</style>
    			<label>
    	              <span style="clear:both;">Confirm Your Time Zone</span>
    	              <div class="wtb-ew-v1">
    	                 <script src="http://www.worldtimebuddy.com/event_widget.js?h=8&md='. $appt_date .'&mt='. $appt_time .'&ml=0.50&sts=0&sln=0&wt=ew-lt"></script><i><a target="_blank" href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com</i><noscript><a href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com</noscript><script>window[wtb_event_widgets.pop()].init()</script>
    	              </div>
    	        </label>
    	        <br />';
    	return  $script.$add;
    }
    add_filter( 'app_additional_fields', 'my_app_function' );
  • Jude

    Hi Paul,

    Sorry that this reply took much longer than expected. I went through the code you shared and inherently what you are trying is not possible because the exact time slot you need as a callback is selected by the user at runtime, by which time php has already sent its headers. The solution to your problem can be achieved using JS on the client side.

    Simply copy/paste this script into a .js file and include it in your appointments page.

    <script type="text/javascript">
    // Creates an iframe and appends it before the confirmation buttons on the DOM
    var iframe = document.createElement('iframe');
    $(".appointments-confirmation-buttons").before(iframe);
    
    // Binds each selectable slot to its date and the event is used to generate the Date object
    $( "table td.free").bind( "click", function( event ) {
    
    // Convert date to milliseconds
    date = new Date(event.target.children[0].value.split(':')[3]*1000);
    
    // Get the date and time as UTC formatted strings
    var time = date.getUTCHours()+'.'+(date.getUTCMinutes()/60*100);
    var day = (date.getUTCMonth()+1)+'/'+date.getUTCDate()+'/'+date.getUTCFullYear();
    
    // These are split up into smaller strings so that you can manipulate before sending to WTB if required
    str1 = '<script src="http://www.worldtimebuddy.com/event_widget.js?h=8&md=';
    str2 = '&mt=';
    str3 = '&ml=0.50&sts=0&sln=0&wt=ew-lt"><\/script><i><a target="_blank" href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com</i><noscript><a href="http://www.worldtimebuddy.com/">Time converter</a> at worldtimebuddy.com<\/noscript><script>window[wtb_event_widgets.pop()].init()<\/script>';
    
    // Final String to be passed to the API
    var string = "";
    
    // Write this as a raw string into the created iframe
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(string.concat(str1,day,str2,time,str3));
    iframe.contentWindow.document.close();
    });
    </script>

    This is more of a quick fix and is not recommended as it uses an iframe also some browsers throw security exceptions when cross domain scripts are executed.

    The code of the widget you are using itself is sub standard and the coding practices the use make it almost impossible to integrate smoothly on the client side. They use the document.write() method which basically redraws the whole screen if used at runtime.

    That being said, should you want the date anywhere else except this screen you can easily get it from the Database for registered users and as cookies or a query using e-mail or phone number for unregistered users and save them as php variables like this

    From the DB

    $results = $wpdb->get_results(
    	"SELECT * FROM " . $appointments->app_table .
    	" WHERE (".$username.") AND (".$status.") ORDER BY " . $appointments->sanitize_order_by( $order_by )
    );

    From a cookie

    $results = unserialize( stripslashes( $_COOKIE["wpmudev_appointments"] ) );

    Alternately you can use a solution that my colleague just created, with this and a little styling you may not require addons at all

    https://premium.wpmudev.org/forums/topic/appiontments-in-multiple-time-zones

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.