Fullcalendar as part of Drupal commerce checkout

Question

I'm setting up an e-shop in Drupal 7 using the Commerce suite of modules. Through the shop, a logistics service is offered on a daily basis.

One part of the checkout process is about showing the user a calendar with availability for the service. The days that the service is available should be displayed, and the user should be able to pick a day as part of the checkout process and move on to the next checkout screen.

I would like to use the Fullcalendar script in order to display the daily availability to the user:

http://arshaw.com/fullcalendar/

There is a relevant plugin in drupal:

https://drupal.org/project/fullcalendar

I am able to display a normal fullcalendar page on my site. The part where I'm really stuck is how to create a fullcalendar pane as part of the checkout process, and store the user selection in the order.

I have tried the commerce extra panes module to add the calendar:

https://drupal.org/project/commerce_extra_panes

However I haven't been successful. I can't figure out a way to display the fullcalendar block as a pane.

I have read the documentation of Drupal commerce, the fullcalendar module and the commerce extra panes module, but I still can't figure out how to display fullcalendar as a pane. I have also tried creating a custom module, but I can't figure out how to output fullcalendar programmatically.

Has anyone done this before? Is there any way to add this functionality to the checkout process via these modules, or should I write all of it from scratch myself?

Answer 1

I sat down and had a look at this again, and found a way to implement this.

At first, I tried using the fullcalendar Drupal plugin, but it proved to be unnecessarily complex for this particular functionality, plus it wasn't very clear how to add the output of the fullcalendar plugin to the pane. The commerce extra panes wasn't that useful in this case, either.

So here's what I did:

1) I created a module where I set up a custom pane. Here's the part of the module that set up the commerce checkout pane:

function custom_checkout_commerce_checkout_pane_info() {
  $panes = array(
    'custom_checkout_date' => array(
        'title'  => t('Select a date'),
        'base'   => 'custom_checkout_date_pane',
        'page'   => 'route_date',   // default checkout page
        'weight' => -5,
        'file'   => 'includes/pane_route_date.inc'  // Form functions
    )
  );

  return $panes;
}

Here's what is included in the pane itself:

function custom_checkout_route_date_pane_checkout_form($form, &$form_state, $checkout_pane, $order) {
  $pane_form['route_calendar'] = array(
    '#type' => 'container',
    '#id'   => 'route_calendar'
  );

  $pane_form['selected_date'] = array(
    '#type' => 'hidden',
    '#id'   => 'selected_date'
  );

  return $pane_form;
}

The hidden field "selected_date" stores the result of the calendar, which is then added to the order.

I then added fullcalendar to the Drupal libraries folder, and added it to the page where the fullcalendar pane is placed using drupal_add_js.

I then created an AJAX callback page, which is used to return the available dates that match the parameters given in the order by the customer.

I then added a click handler for each event, by overriding the Fullcalendar eventClick callback. Thus, when the user clicks on an event, it sets the event date in the hidden field and submits the current commerce checkout pane, moving on to the next.

Thus, I finally did find out what to do, but it required a lot of fiddling around, and a lot of the parts I did weren't documented so well, or didn't have any good examples to follow :(

Anyway, the problem in this question is now resolved, I hope this helps anyone that is trying to tackle the same (or similar) issues with the checkout part of Drupal commerce.