Booking Bar Component

Last Updated: November 14, 2024 @ 1:34pm

Booking Bar Component

There’s nothing too special going on with the booking bar, but here’s a rundown of its parts and how they’re wired up.

PHP 🐘

form-booking-module.php is the primary template part. This enqueues the form’s scripts with the cno_enqueue_date_range_picker() function at the top of the head (which automatically adds the scripts/styles to the footer). These are registered in class-theme-init.php for easy enqueueing in the inc/theme/theme-functions.php file.

Copy Code

/** Adds Date Range Picker Assets to the head of the page */
function cno_enqueue_date_range_picker() {
    $daterangepicker_scripts = array( 'date-range-picker', 'moment', 'cno-date-range-picker' );
    foreach ( $daterangepicker_scripts as $script ) {
        wp_enqueue_script( $script );
    }
    wp_enqueue_style( 'date-range-picker' );
    wp_enqueue_style( 'cno-date-range-picker' );
}

The bottom of the file also includes a template-part of its own: alert-bootstrap-toast.php which adds a basic Bootstrap Toast div.

JS/TS 🏎️

The Date Range Picker

Because the Date Range Picker library requires Moment and jQuery exist in the global scope, all three assets are loaded in the class-theme-init.php enqueue_scripts method, and their dependencies are set to load them in the proper order.

date-range-picker.js has 2 functions—one to fire the actual date-range-picker with some options, and one to send users where they need to go when they submit the form.

If the form is invalid for any reason, a Toast Alert should be fired to give users some visual feedback instead of simply logging it to the console, because who does that help?

The Toast Alert

src/js/bs-toast.ts defines a class (ToastAlert) to initialize the Bootstrap Toast which, as the docs say, are opt-in by design for performance. Here are the properties in the args object you can build with:

Note: all arguments are optional because the markup sets a visually-gentle-aria-assertive toast with the info background and generic “Something went wrong!” message, but you should 100% write a better message and pick an appropriate toast color.

Copy Code

/**
 * Represents the configuration options for a toast.
 *
 * @property {HTMLElement} trigger - An HTML Element that triggers the Toast.
 * @property {string} message - A short message for the toast. Defaults to "Something went wrong!" if not provided.
 * @property {string} event - A valid event type to add a listener to.
 * @property {HTMLElement} element - A custom toast element to initialize the Toast constructor with.
 * @property {string} type - Sets the bg & color of the toast in accordance with bootstrap's colors & background API
 * @link https://getbootstrap.com/docs/5.3/helpers/color-background/
 */
export type ToastArgs = {
    trigger?: HTMLElement;
    message?: string;
    event?: string;
    element?: HTMLElement;
    type?:
        | 'primary'
        | 'secondary'
        | 'success'
        | 'danger'
        | 'warning'
        | 'info'
        | 'light'
        | 'dark';
};

Booking Bar Component