Adding a return to booking button to the success page

[Craig Tucker]

I want my clients to book more appointments than just one.  Of course they can simply hit the back button on the browser but I want it to be more obvious. 

So in /application/views/appointments/book_success.php I made the following change:

I replaced this code:

                            echo '
                                <button id="add-to-google-calendar" class="btn btn-primary">
                                    <i class="icon-plus icon-white"></i>
                                    ' . $this->lang->line('add_to_google_calendar') . '
                                </button>';
                        }

with this:

                            echo '
                                <button id="add-to-google-calendar" class="btn btn-primary">
                                    <i class="icon-plus icon-white"></i>
                                    ' . $this->lang->line('add_to_google_calendar') . '
                                </button><br><br>';
                        }
       echo '
                                <button onclick="goBack()" id="returntobook" class="btn btn-primary">
                                    <i class="icon-plus icon-white"></i>
                                    ' . $this->lang->line('return_to_book') . '
                                </button>';

I added this script to the end of the file with the rest of the JS code:

 <script type="text/javascript">
  function goBack() {
   window.history.back();
  }
 </script>      

And I added a language item to /application/language/english/translations_lang.php

$lang['return_to_book'] = 'Return to Booking';

That is it.

[Andrew Whitaker]

That was my original solution too but I found it didn't work properly on mobile devices specifically iPhones/iPads I ended up putting a link back to the appointment details in on the success page with the appt hash and then it goes into the original booking page but in manage mode where I have an extra button for a new appointment.

[Craig Tucker]

Thanks for pointing this out Andrew.  I was testing on the iPhone and I see the issue now.  Could you post your modification for the new appointment button?  That is a great solution.

[Andrew Whitaker]

I put this code in book_success.php which is in the appointments view:

        <p><a href="<?php echo $this->config->base_url(); ?>appointments/index/<?php echo $appointment_data['hash']; ?>">Manage this appointment and book another appointment </a></p>

Then within book.php I have created a step 0 in the wizard when in manage mode which is activated by passing in the appointment hash, the same as when clicking on the link from the email.

The code for this is:

                       <?php

if ($manage_mode === TRUE) {

                    echo '

            <div id="wizard-frame-0" class="wizard-frame">                

                <div class="frame-container">

                    <h3 class="frame-title">'; echo $this->lang->line('step_zero_title'); echo '</h3>

                    

                

                    <div class="frame-content" style="width:600px">

// HERE I have some information about the client's progress but you can put appointment details here

                    </div>

                </div>

                <div class="command-buttons">

<button id="anew-appointment" class="btn btn-buttonanew btn-primary" data-step_index="0">New Appt<i class="icon-forward icon-white"></i></button>

<br><br>

                    <button type="button" id="button-next-0" class="btn button-next btn-primary" 

                            data-step_index="0">Change Appt<i class="icon-forward icon-white"></i></button>

                </div>

            </div>

';}

?>

            <?php

if ($manage_mode === TRUE) {

                    echo '<div id="wizard-frame-1" class="wizard-frame" style="display:none;">';

}

else

{

echo '<div id="wizard-frame-1" class="wizard-frame">';

}

?>

Then in the frontend_book.js file within the bindeventhandlers in the frontend.managemode section I have added this:

$('.btn-buttonanew').click(function(event) {

FrontendBook.manageMode = 0;

// hide cancel button

document.getElementById('cancel-appointment-frame').style.display = 'none';

$('#select-service').val(13); // this is because only one service is available for returning customers in my system

            $('#select-service').trigger('change'); // Load the available hours.

FrontendBook.getAvailableHours($('#select-date').val());

// Apply Customer's Data

$('#last-name').val(GlobalVariables.customerData['last_name']);

$('#first-name').val(GlobalVariables.customerData['first_name']);

$('#email').val(GlobalVariables.customerData['email']);

$('#phone-number').val(GlobalVariables.customerData['phone_number']);

$('#address').val(GlobalVariables.customerData['address']);

$('#city').val(GlobalVariables.customerData['city']);

$('#zip-code').val(GlobalVariables.customerData['zip_code']);

$('#licencenum').val(GlobalVariables.customerData['licencenum']);

$('#licenceexp').val(GlobalVariables.customerData['licenceexp']);

$('#dob').val(GlobalVariables.customerData['dob']);

FrontendBook.updateConfirmFrame();

var nextTabIndex = 1;

$(this).parents().eq(1).hide('fade', function() {    

$('.active-step').removeClass('active-step');

$('#step-' + nextTabIndex).addClass('active-step');

$('#wizard-frame-' + nextTabIndex).show('fade');

});

});

I have a few extra fields in the database so you may have to remove them or add your own but effectively what this does is pre populate the booking fields for the next booking but makes it a new appointment. This is based on version 1.0 of the system as I have made so many changes to the code for my requirements. 

You might need a couple of lines in the frontend.css file as well as I think I defined a new style but it was a while ago so I am not sure why I did it but there must have been a reason, its probably

#book-appointment-wizard #wizard-frame-0 label {

    font-size: 19px;

    margin-bottom: 12px;

}

#book-appointment-wizard #wizard-frame-0 select {

    margin-bottom: 25px;

}

Also as this will only ever be used in English for my client I haven't used the language (lang->line)

Let me know if I can clarify anything

Obviously you could do all this a lot more simply by just returning to the booking page with a new appointment but what I wanted to achieve was the pre-populating of the customer information fields so they don't have to re-enter all their details for a new appointment, and they can get to the page from the email link.

Andrew

[Craig Tucker]

That is a great solution.  The main advantage to having clients sign in is the fact that fields repopulate.  This does the trick.