HAPI Sample - Scheduler - Dining Reservations

Build a custom scheduler page using this sample code.


This piece of code was used to check availability for dining reservations through our partner Sevenrooms, but can be re-purposed to accommodate any scheduler.  To enable this template, simply set the page marketing keyword to schedule_appointment.

The code is broken down into the filter (with javascript) and the results to select.

Filter Options + Results
These filters are used to display relevant results:

<div class="pvwrap" id="PeopleVineContent">
  <div class="ui-update portal">
    <section class="component">
      <div class="component-content">
        <div class="box mix-box_outlined">
          <div class="box-bd box-bd_inflated vr vr_x3">
            <div class="split split_basisRight split_collapseOnMobile">
              <h3 class="hdg hdg_6 mix-hdg_brandCallout">Make a Reservation:</h3>
            </div>
            <hr class="rule vr-override_x12">
            <div data-pv-component="scheduler" data-pv-parameters="{schedule_item_no: 1520" data-pv-type="item">
              <h1 class="hdg hdg_4" data-pv-element="schedule_item">Name of Scheduler</h1>
              <div data-pv-element="schedule_item_description" style="font-size: 14pt;">
                Summary
              </div>
            </div>
          </div>
          <div class="box-bd box-bd_inflated vr vr_x3">
            <div class="split split_basisRight split_collapseOnMobile">
              <h3 class="hdg hdg_6 mix-hdg_brandCallout">Enter Preferred Date and Time:</h3>
            </div>
            <hr class="rule vr-override_x12">
            <ul class="gridList">
              <li class="gridList-item gridList-item_1of4">
                <span class="fieldset">
                  <span class="fieldset-input">
                    <input class="js-datepicker" id="from_date" placeholder="MM/DD/YYYY" type="text">
                  </span>
                  <span class="fieldset-detail"></span>
                  <span class="fieldset-error"></span>
                </span>
              </li>
              <li class="gridList-item gridList-item_1of4">
                <span class="fieldset">
                  <span class="fieldset-input">
                    <select id="from_time">
                      <option value="">Breakfast Service</option>
                      <option value="7:30">7:30 AM</option>
                      <option value="8:00">8:00 AM</option>
                      <option value="8:30">8:30 AM</option>
                      <option value="9:00">9:00 AM</option>
                      <option value="9:30">9:30 AM</option>
                      <option value="10:00">10:00 AM</option>
                      <option value="">-----------</option>
                      <option value="">Lunch Service</option>
                      <option value="11:30">11:30 AM</option>
                      <option value="12:00">12:00 PM</option>
                      <option value="12:30">12:30 PM</option>
                      <option value="13:00">1:00 PM</option>
                      <option value="13:30">1:30 PM</option>
                      <option value="">-----------</option>
                      <option value="">Dinner Service</option>
                      <option value="17:00">5:00 PM</option>
                      <option value="17:30">5:30 PM</option>
                      <option value="18:00">6:00 PM</option>
                      <option value="18:30">6:30 PM</option>
                      <option selected value="19:00">7:00 PM</option>
                      <option value="19:30">7:30 PM</option>
                      <option value="20:00">8:00 PM</option>
                      <option value="20:30">8:30 PM</option>
                      <option value="21:00">9:00 PM</option>
                      <option value="21:30">9:30 PM</option>
                      <option value="22:00">10:00 PM</option>
              </select>
                  </span>
                  <span class="fieldset-detail"></span>
                  <span class="fieldset-error"></span>
                </span>
              </li>
              <li class="gridList-item gridList-item_1of4">
                <span class="fieldset">
                  <span class="fieldset-input">
                    <select id="total_guests">
                      <option value="1">1 person</option>
                      <option selected value="2">2 people</option>
                      <option value="3">3 people</option>
                      <option value="4">4 people</option>
                      <option value="5">5 people</option>
                      <option value="6">6 people</option>
              </select>
                  </span>
                  <span class="fieldset-detail"></span>
                  <span class="fieldset-error"></span>
                </span>
              </li>
              <li class="gridList-item">
                <span class="fieldset">
                  <a class="btn" href="#" id="btnApply">Show Availability</a>
                </span>
              </li>
            </ul>
          </div>

Please note that the closing tags are included in the next sample.

You can then display the results using this code:

          <div class="box-bd box-bd_inflated vr vr_x3" id="selectTime">
            <div class="split split_basisRight split_collapseOnMobile">
              <h3 class="hdg hdg_6 mix-hdg_brandCallout">Select Preferred Time:</h3>
            </div>
            <hr class="rule vr-override_x12">
            <ul class="blocks blocks_4to3to1 scheduleTimes" style="display: block;">
              <li class="" data-date="{@slot_start@}" data-item-no="{@schedule_item_no@}" data-pv-component="scheduler" data-pv-conditional="{@q:from_date@}&lt;&gt;" data-pv-noresultsmessage="&lt;li&gt;Reservations are unavailable at this time.&lt;/li&gt;" data-pv-parameters="{return_total: 10, from_date: '{@q:from_date@} {@q:from_time@}', to_date: '{@q:to_date@}', capacity: {@q:total_guests@}, schedule_item_no: 1520}" data-pv-type="availability" data-slot-no="{@schedule_slot_no@}" data-time="{@slot_start:time()@}" id="{@schedule_item_no@}-{@schedule_slot_n@}">
                <a class="cardBtn" href="/checkout/schedule/{@schedule_item_no@}/slot/-1?start={@slot_start@}&qty={@capacity@}">
                <div class="cardBtn-bd vr vr_centered">
                  <span class="cardBtn-txt cardBtn-txt_title">
                    <span data-pv-element="slot_start" data-pv-formatter="date(time)">3:30 PM</span>
                  </span>
                  <span data-pv-element="slot_subject">Schedule Item Name</span>
                </div></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

Lastly, you will need to add the javascript to be used to post back to the page.  HAPI is rendered server side, so you will need to redirect the page to the new location.  Keep in mind, this also allows you to pass data via the querystring and it will render in HAPI.

<script type="text/javascript">
  new DatepickerHelper(".js-datepicker", {});
$(".js-datepicker").datepicker('setDate', new Date());

if (getQuery("from_date") != '' && getQuery("from_date") != null)
    $("#from_date").val(getQuery("from_date"));
if (getQuery("from_time") != '' && getQuery("from_time") != null) {
    var dt = new Date(getQuery("from_date") + ' ' + getQuery("from_time"));
    dt.setTime(dt.getTime() + (1 * 60 * 60 * 1000)); //1 hour before selection
    $("#from_time").val(dt.getHours() + ':' + (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes());
}
if (getQuery("total_guests") != '' && getQuery("total_guests") != null)
    $("#total_guests").val(getQuery("total_guests"));

$("#btnApply").on("click", function () {
    var dt = new Date($("#from_date").val() + ' ' + $("#from_time").val());
    var todt = new Date(dt);
    todt.setTime(todt.getTime() + (2 * 60 * 60 * 1000)); //2 hours after selection
    dt.setTime(dt.getTime() - (1 * 60 * 60 * 1000)); //1 hour before selection
    var from_time = dt.getHours() + ':' + (dt.getMinutes() < 10 ? '0' : '') + dt.getMinutes();
    var todtstr = (todt.getMonth() + 1) + '/' + todt.getDate() + '/' + todt.getFullYear() + ' ' + todt.getHours() + ':' + (todt.getMinutes() < 10 ? '0' : '') + todt.getMinutes();
    var goPath = window.location.pathname + '?from_date=' + (dt.getMonth() + 1) + '/' + dt.getDate() + '/' + dt.getFullYear() + '&from_time=' + from_time + '&total_guests=' + $("#total_guests").val() + '&to_date=' + todtstr;
    //console.log(goPath);
    window.location.href = goPath;
});
</script>

Additional Help Tutorials

Find more ways to grow on PeopleVine.

The Ultimate Agency Tool - Import a Folder of Snippets Directly into the Drag and Drop Builder

Instead of taking the time to copy and paste the HTML, enter a title and take a screenshot, you can now drag and drop folders full of HTML snippets and we'll set them up, categorize them and add a screenshot of the rendered snippet.

Posted June 22, 2019

Improved Transaction Email with Option to Download as PDF

We have made it easier to send someone a transaction receipt by including an out-of-the-box template and a new option to download as a PDF.

Posted June 18, 2019

Make Your Order Receipts Member Friendly

You now have better control over the items that show up on an order receipt in your member portal.

Posted June 18, 2019

Sell Memberships with Credits that are Used When Booking an Appointment

You can setup a membership program that allows a member up to x amount of appointments per month. If they exceed that amount, we'll re-bill them for another month of x amount of appointments that lasts a full billing cycle.

Posted June 17, 2019

Use the PeopleVine Point of eXperience (POX) App to Check In Your Members

The PeopleVine POX app provides you with a front of the house tool to streamline the member check-in process.

Posted June 11, 2019

When Sending Email Newsletters You Can Include a Message Preview

Grab people’s attention by adding a text preview for your email newsletter.

Posted June 11, 2019

Reporting Dashboard - Quick Access to Top Used Reporting Tools

See a centralized view of all reports available across the various components in PeopleVine.

Posted June 10, 2019

Customer Demographics Dashboard - See Age and Gender Stats for Your People + Members

Get a breakdown of the gender and age group your people and members fall into.

Posted June 10, 2019

Event Registrations, Schedule Bookings and Accepting Offers Are Now 1-Click

When someone clicks on the call to action when booking a room, appointment, registering for an event or accepting an offer, the item will immediately be added to the user's account if they are logged in.

Posted June 6, 2019

Configuring Your Payment Processor's Thresholds

Your credit card processor may have additional controls to manage fraud. Follow these steps to ensure billing transactions aren't blocked.

Posted June 3, 2019

Void and Reverse a Transaction that was Held for Review but Declined

Did your payment processor hold a transaction for review that failed? Follow these steps to reverse the actions.

Posted June 3, 2019

POS Integration - Aloha Overview for Member Experience (Card on File, House Credits, Loyalty and more)

Check out this article for an overview (and links to other articles) on how to use your Aloha and PeopleVine integration.

Posted May 29, 2019

See When Your Members/Subscribers Update their Payment on File

In an effort to help ensure you're subscriptions/memberships are being paid for, you can sort and see data related to their payment on file.

Posted May 28, 2019

How to set up a drop ship notification

Learn how to set up an email notification to be sent to a drop ship fulfillment partner when a product order is placed.

Posted May 28, 2019

HAPI Sample - Account Subscription Page

You can customize the /account/subscription/# page with the following HAPI sample.

Posted May 24, 2019

© PeopleVine 2019. Powered by PeopleVine. Terms of use | Privacy & cookies