Passing booking details to a final page, which uses the [app_confirmation].

Hello,

I originally only purchased this plugin but I've upgraded to a full membership to thank you for your support. This question is a really important feature I need on the current plugin and I thank you in advance for any support you can offer.

Basically, at the moment everything works well with selecting the provider, service and the date and time.

However, currently the plugin opens up the confirmation box once you select the timeslot. This confirms the booking and the user can fill in their details and click to confirm or go through to paypal.

What I really need is to remove this confirmation box as soon as the timeslot is selected by removing the [app_confirmation] shortcode from the current page and instead a user can just select the time slot and click "next". This will forward to another page in wordpress and with the use of the [app_confirmation] shortcode I can show this on a new page instead.

So my question is how can I pass all booking details to the page with the [app_confirmation] shortcode on? The user would have select all other options correctly on the previous page.

Many thanks,

Steven

  • Hakan

    Hi,

    Have a look at item 3 in this post:
    https://premium.wpmudev.org/forums/topic/feature-suggestion-3#post-303825

    Modify the javascript code such that when he clicks the button he is redirected to confirmation page. At this moment save his selections in a cookie.

    On the confirmation page retrieve these cookie values and fill the related fields.

    So basically this requires modification of the javascript codes added to the page. You can do this using app_footer_scripts filter hook.

    Not so easy, but possible.

    Cheers,
    Hakan

  • Hakan

    Hi Steven.

    You can use jQuery.cookie for that:
    https://github.com/carhartl/jquery-cookie

    Load this js file using wp_enqueue_script:
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    The clicked slot has all the required data packed with ':' (service id, provider id, start time. end time, price, etc). This is app_value in line 1677. Save this value in the cookie and redirect client to the second page using window.location.target='_blank' href='http://example.com/second-page/'.

    On the second page, check if cookie is set and if it is, read cookie and send that data to admin side with jquery.post like A+ does it now around line 1680. Plugin should do the rest.

    You will be creating javascript codes only. Then add those codes to the pages by using "app_footer_scripts" filter hook.

    Cheers,
    Hakan

  • scdwb

    Thank you Hakan,

    I've successfully integrated the cookie plugin and it's working with test cookies. However I get an "undefined" error when I try and use the app_value, either:

    $.cookie("the_cookie", "app_value");

    Which I'm trying the call the defined "app_value" variable. I even try and reset the variable using:

    var app_value = $(this).find(".appointments_take_appointment").val();

    just before the new cookie code line but this doesn't work.

    Can you help me get the app_value data into the cookie?

    Regards,
    Steven

  • Hakan

    Hi,

    This works fine for me:

    Add a button to the first page using WP editor:

    <div class="app-confirmation-div" style="display:none">
    <button type="button" class="app-confirmation-continue">Click to Continue Confirmation</button>
    </div>

    Add these codes to functions.php of your theme:

    function app_add_my_scripts( $script ) {
    global $post;
    $add = '';
    if ( 1 == $post->ID ) {
    $add .= '$(".app_timetable div.free").click(function(){';
    $add .= '$.cookie("my_cookie", $(this).find(".appointments_take_appointment").val(), { path: "/" });';
    $add .= '$(".app-confirmation-div").show();';
    $add .= '$(".app-confirmation-continue").focus();';
    $add .= '});';
    $add .= '$(".app-confirmation-continue").click(function(){';
    $add .= 'window.location.href="http://example.com/second-page/";';
    $add .= '});';
    }
    else if ( 2 == $post->ID ) {
    $add .= 'if($.cookie("my_cookie") != null){';
    $add .= '$("body").trigger("click");';
    $add .= '}';
    $add .= '$(".appointments-confirmation-button").click(function(){';
    $add .= '$("body").unbind("click");';
    $add .= '$.removeCookie("my_cookie", { path: "/" });';
    $add .= '});';
    $script = str_replace( array("value: app_value","value: final_value"), "value: $.cookie('my_cookie')", $script );
    $script = str_replace( ".app_timetable div.free", "body", $script );
    }
    
    return $script . $add;
    }
    add_filter( 'app_footer_scripts', 'app_add_my_scripts');
    
    wp_enqueue_script( 'jquery-cookie', WP_CONTENT_URL . "/uploads/jquery.cookie.js", array('jquery') );

    These are complete codes for both pages.

    Change page IDs 1 (ID of the page where button and schedule stays) and 2 (ID of the page where confirmation form stays) and example.com url as required.

    Cheers,
    Hakan

  • scdwb

    Hello again Hakan,

    Actually, even though this seems to work perfectly and on the second page the correct appointment confirmation details are displayed, unfortunately when I click the "confirm appointment" button I get the following error:

    "We're sorry, but this time slot is no longer available..."

    When I remove the code above from my functions and revert back to the original process the appointments can be made again.

    So it looks like this mod above is maybe missing something and not passing something over. Is this something simple?

    Thanks,
    Steven

  • scdwb

    Hi Hakan,

    Your code above is working great and I also need to pass the notes field to the new confirmation page too. I created a field and modified the code above to this:

    function app_add_my_scripts( $script ) {
    global $post;
    $add = '';
    if ( 141 == $post->ID ) {
    
    $add .= 'var app_comments_value_functions = $(this).find(".customer_notes").val();';
    
    $add .= '$(".app_timetable div.free").click(function(){';
    $add .= 'var app_value_two = $(this).find(".appointments_take_appointment").val();';
    
    $add .= 'var app_value_three = app_value_two + app_comments_value_functions;';
    
    $add .= '$.cookie("my_cookie", app_value_three, { path: "/" });';
    
    $add .= '$(".app-confirmation-div").show();';
    $add .= '$(".app-confirmation-continue").focus();';
    $add .= '});';
    $add .= '$(".app-confirmation-continue").click(function(){';
    $add .= 'window.location.href="/dev/payment/";';
    $add .= '});';
    }
    else if ( 148 == $post->ID ) {
    $add .= 'if($.cookie("my_cookie") != null){';
    $add .= '$("body").trigger("click");';
    $add .= '}';
    $add .= '$(".appointments-confirmation-button").click(function(){';
    $add .= '$("body").unbind("click");';
    $add .= '$.removeCookie("my_cookie", { path: "/" });';
    $add .= '});';
    $add .= 'var cookietest = $.cookie("my_cookie");';
    
    $script = str_replace( array("value: app_value_plugin","value: final_value"), "value: $.cookie('my_cookie')", $script );
    $script = str_replace( ".app_timetable div.free", "body", $script );
    }
    
    return $script . $add;
    }
    add_filter( 'app_footer_scripts', 'app_add_my_scripts');

    This almost works perfectly. The text within the notes field is passed, however only the default value in the notes field (i.e. the example text in the field that appears on page load) gets passed to the confirmation page. When a user changes the notes field this isn't passed, only the original text.

    Can you offer any help with this?

    Steven

  • scdwb

    Please ignore my message above, I solved my problem by using the following code:

    function app_add_my_scripts( $script ) {
    global $post;
    $add = '';
    if ( 141 == $post->ID ) {
    
    $(this).find(".customer_notes").val();';
    
    $add .= 'var app_value_two;';
    $add .= 'var app_comments_value_functions;';
    $add .= 'var app_value_three;';
    
    $add .= '$(".app_timetable div.free").click(function(){';
    $add .= 'app_value_two = $(this).find(".appointments_take_appointment").val();';
    $add .= '$(".app-confirmation-div").show();';
    $add .= '$(".app-confirmation-continue").focus();';
    $add .= '});';
    
    $add .= '$(".app_timetable_wrapper .customer_notes").change(function() {';
    $add .= 'app_comments_value_functions = $(this).val();';
    $add .= '});';
    
    $add .= '$(".app-confirmation-continue").click(function(){';
    $add .= 'app_value_three = app_value_two + app_comments_value_functions;';
    $add .= '$.cookie("my_cookie", app_value_three, { path: "/" });';
    $add .= 'window.location.href="/dev/payment/";';
    $add .= '});';
    }
    
    else if ( 148 == $post->ID ) {
    $add .= 'if($.cookie("my_cookie") != null){';
    $add .= '$("body").trigger("click");';
    $add .= '}';
    $add .= '$(".appointments-confirmation-button").click(function(){';
    $add .= '$("body").unbind("click");';
    $add .= '$.removeCookie("my_cookie", { path: "/" });';
    $add .= '});';
    
    $script = str_replace( array("value: app_value_plugin","value: final_value"), "value: $.cookie('my_cookie')", $script );
    $script = str_replace( ".app_timetable div.free", "body", $script );
    }
    
    return $script . $add;
    }
    add_filter( 'app_footer_scripts', 'app_add_my_scripts');

    Basically, I made all variables global so they could be transferred between functions. I created a new function on change for the notes field so the value of the notes field was saved on any change to it. Then I moved the creation of the cookie session to when a user clicks the confirm button to move to the confirmation page.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.