Customizing Appointments+ with a Custom Entry Point

Simple question, potentially complex answer. May need the dev to be tagged, may not. We'll see.

I'm building a custom template for a high end men's couture store in San Francisco. The landing/home page in progress can be viewed here:

Ignore the badly kearned Scriptina font below the fold... that part of the site isn't converted from my production boilerplate yet.

Do, however, note the "Appointments" tab at the left and do click it. Please note the way pretty select boxes fly out. I realize I haven't added a submit button yet.

My goal here, once this is converted into WordPress is to allow the selection form to open up Appointments+. I'm going to push the URL parameters to a modal using Ajax so that the only time we get a full page refresh is to finally book the appointment.

The question here is whether or not I'm going to run into any nasty known issues by doing this. From where I'm standing, I don't think it's going to be a problem but perhaps the staff has seen something that will trip me up? I'd like to know about it before I get there.

Please advise.


  • Hakan
    • The Incredible Smush


    The question here is whether or not I'm going to run into any nasty known issues by doing this.

    You probably will.

    There is no problem about dynamically injecting html codes to a page, but A+ also needs javascript codes that should be inserted to the footer area and those may create problems. Those js codes are normally evaluated as shortcodes are executed from top to bottom of appointment page content, saved in $appointments->script variable and printed at wp_footer area. But in your case there are no shortcodes at the beginning, so no js codes either.

    You can try to add the widest set of those js codes *before* html injection, but I didn't test this and I am not sure if it will work.

    To give an idea, I am attaching a screenshot displaying what js codes A+ is adding to the footer.


  • Imperative Ideas
    • HummingBird


    Well, Hakan, when you put it that way I may want to just pass the values in an URL string and pull a new page. I was trying to minimize turnover off of the landing area.

    I suppose I could also stick the shortcode in a hidden DIV but that seems like a bit of a hack.

    What I'll do is present the landing page as is but not promise anything with regards to Ajaxing the schedules in until I've had a chance to test the behavior. In fact, I think I'll go do exactly that in a bare bones twentytwelve before going any further.

    Thanks for the input!

  • Hakan
    • The Incredible Smush

    I was trying to minimize turnover off of the landing area.

    Please don't think it will slow down the landing page. Those codes are just 8Kb in total.

    I just meant some of the js codes may require html elements to be there in the first place and you can see some js errors, which I am not sure to be solved easily.

  • Imperative Ideas
    • HummingBird

    Hey Hakan.

    By "slow down" I didn't mean the bit-rate. I meant the requirement to actually change pages more often.

    My experience, thus far, is that I can make the flyout call the plugin using a GET type form action as follows:

    <div class="sidepanel">
            <h3>Book An Appointment</h3>
            <p>While we are always pleased to have walk-in traffic, many of our customers prefer the kind of dedicated service provided by a private appointment. Should this be your preference, please use the following form to begin the booking process.</p>
            <div class="apptselect">
                <form name="bookpanel" action="<?php echo site_url(); ?>" method="get">
                    <select name="app_service_id" id="service_id" tabindex="1">
                        <option value="">-- Select A Service --</option>
                        <optgroup label="I need to buy clothes">
                            <option value="1">Shop: for a wedding</option>
                            <option value="2">Shop: for a formal event</option>
                        <optgroup label="I need something tailored">
                            <option value="3">Tailor: a suit</option>
                            <option value="4">Tailor: a shirt</option>
                        <optgroup label="I need something repaired">
                            <option value="5">Repair: shoes</option>
                            <option value="6">Repair: clothing</option>
                    <select name="app_provider_id" id="employee_id" tabindex="2">
                        <option value="">-- Select A Consultant --</option>
                            <option>I have no preference</option>
                            <option value="1">David Yahid</option>
                            <option value="2">Person Two</option>
                    <input type="hidden" name="p" value="82">
                <input type="submit" value="Check Availability" class="button small bookit">

    The key here was knowing the page number of the Appointments+ form and placing it in a hidden name:value pair. Without that, as you know, the whole thing falls apart.

    A couple of things I've noted. Obviously, I'm doing something totally unsupported here. I just want to run the experience past you for your own edification.

    1. I'll need to add form validation because leaving the services drop down blank results in no available time slots but the first service showing as selected whereas the second one automatically selects the first provider on the list.

    2. This seems unrelated to how WP gets to the form. Clicking a date results in no selection, just a spinning timer. Perhaps more frustrating is the lack of any debugging data. Is this a WAMP thing? (image attached)

    3. This was otherwise a simple & smooth process, even though it required understanding a bit about how WordPress page requests work.

  • Vladislav
    • Dead Eye Dev


    The _appointments_data is the global data object used by the various aspects of plugin's javascript so, in all likelihood, this is not a jQuery v1.9 conflict issue but rather a case of the required global object not being injected into your page. To make sure you have the Appointments+ script/style dependencies ready in your page (without calling the shortcode first), you can call load_scripts_styles() method of the global $appointments object in your template to inject the dependencies properly.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.