Back to contents

How to use Booking functionality (based on JetEngine, JetSmartFilters, JetThemeCore and JetBooking plugin)

This tutorial uncovers what JetBooking plugin is and what kind of needs it meets. We’ll describe the entire case and provide a step-by-step guide anyone can use.

JetBooking plugin is a unique addon developed by Crocoblock team specifically for rent and booking services, such as vehicles, dresses, apartments, etc.
If you are an owner of housing and you rent them out for a certain period, you might find this interesting and useful. The main feature of this addon is the ability to select the check-in/check-out period, filter the offered options and book a residence. As an administrator, you’re getting even more options: you’re able to manage the orders submitted from the front-end after booking the item and notify your clients by sending an email automatically.

Let’s dive into the process of creating everything gradually!

Working with CPTs

1 Step – Dashboard overview

Go to your WP Dashboard and make sure you installed JetEngine, JetSmartFilters, JetThemeCore and JetBooking plugins.

JetBooking plugin

2 Step – Creating the Room CPT

Navigate to the JetEngine > Post Types block in the dashboard and create a Custom Post Type for your real estate, for instance, for our tutorial we created a CPT called “Room”.

room-custom-post-type

Check the following tutorial to learn how to create a CPT and add meta fields you need to showcase your housing.

3 Step – Fill in the meta fields in the Room CPT

After this, proceed to the Room CPT on the left of your dashboard and input information in the fields you’ve just created.

Custom Post Settings

Moreover, you can add as many units as you need and manage them in the Units manager section below. You can learn more about this section here.

Available units

4 Step – Creating the Orders CPT

On this step, we need to create the second CPT for our future orders. For this tutorial, we created a CPT called “Orders”. Here, you’ll receive your order and you’ll be able to manage them as an administrator.

NOTE!
You can create a CPT without any meta fields, as further, we’ll get all the required information from the database (continue following our tutorial to know how it works).
orders-custom-post-type

5 Step – Creating a listing for the Room CPT

Now, it’s time to create a listing for our Room CPT. The detailed tutorial can be found here.

Listing created with JetEngine plugin
Dynamic Widgets used in Listing

Creating Archive and Single pages

1 Step – Creating an Archive page

Let’s create an Archive page and add a Listing Grid widget to it in order to display all the items offered to check for your visitors. You are able to create an Archive page by means of Crocoblock > My Library or, if you use Elementor Pro version, you are free to use its functionality.

If any guidance is needed, please check it here:

Archive Page with JetThemeCore

2 Step – Creating a Single page

Also, we need to create a Single page to showcase more detailed information about the residence we offer for booking. Once again, navigate to Crocoblock > My Library and create a Single page.

NOTE!
From a Single page itself, your visitors will proceed with the booking. Continue reading to know how it will be done.
Single Page created with JetThemeCore

Next, you need to add the needed information in Elementor editor and set the needed Conditions. For more details, please see the following tutorial.

Dynamic Widgets for Single page

Building a table structure

1 Step – Booking overview

Now, it’s time to go to the JetEngine dashboard and select the Booking as shown in the screenshot below:

jetengine-booking-block

This option allows building a table structure, which, in turn, will be automatically created in your database after your customer completed a booking form and submitted the booking request. This table will be the place, where all the data submitted by visitors via the form, will be stored. You will be able to manage the data and use it for your purpose. Moreover, you can determine varied textual labels for the booking form in the Labels section.

2 Step – Creating a booking table

Let’s see how to build the table in the Booking Settings > General Settings section.
Create the columns one by one, by adding new items. For example, we added the following information:

  • order_id;
  • user_email;
  • number_of_people;
  • first_name_table;
  • last_name_table.
booking-settings
NOTE!
The values shouldn’t contain any spaces, uppercase or other letters, except the Latin ones.

3 Step – Setting related post type options

Scroll down and find two more settings you need to fill in:

  • Related post type – here you need to choose the Orders CPT, or, other words, this is the post type we created for receiving the information from submitted via a form, and which will be placed in form of orders.
  • Related post type column – here you need to input the order_ID, which is a column name you created above so that it will pull the value from your form corresponding field.
  • Apartment post type – here you should select the Room CPT, the post type related to the booked apartments. If it is selected, all related bookings will be shown on the apartment edit page.
related-post-type-options

4 Step – Customizing the labels for the booking form

The Labels block provides an opportunity to add custom labels to the booking form, such as the Booked dates tooltip text, Text before selected dated range, week days, etc.

booking-settings-labels
NOTE!
We recommend saving the table structure only after you are sure everything was done correctly suits your needs. Otherwise, if any changes are still needed, you’ll have to navigate to your database and drop the table, and after that, you’ll be able to save the very new table.

5 Step – Viewing the table in the database

Now, let’s go to phpMyAdmin and see how the saved table looks in the database:

Booking Table in database

Building a form

1 Step – Creating a booking form

It’s time to proceed with creating a booking form. Navigate to the JetEngine > Forms and add a new one. Tutorial dedicated to booking form functionality can be found here.

NOTE!
Furtherly, it is obligatory to add a booking form to the Single page!
jetengine-forms-block

2 Step – Fields Settings overview

As for our particular case, we created a form called Form for Room. Let’s overview it closer. Fields Settings. For our tutorial, we created such fields as Number of People, which can be selected by the visitor, First Name and Last Name, email.

Booking Form with JetEngine
NOTE!
With the JetBooking plugin a brand-new field type, called Check-in/ check-out dates is available! It allows selecting the period a visitor want to book from the booking form front-end.
fields-settings

3 Step – The Hidden field in the booking form

Continue managing the booking form. By default, our booking form creates a hidden field called post_id. Please, don’t delete it, as we’ll need it further!

Booking Form field settings

4 Step – Notifications Settings overview

Let’s move to set up your booking form’s Notifications Settings block. Add a new one and choose the Insert Post type, which means information from the submitted form will be added to the CPT we’ll specify.

So, remember we created the second CPT called “Orders”? It should be selected in Post Type’s settings.

Below, you can see the Fields Map, which stands for pulling the meta fields created with the CPT we want the information to be added to. As for Orders CPT, we haven’t created any meta fields, that’s why we’ve got only post_id.

Save the changes and proceed to add a new notification.

insert-post-notification-type

5 Step – Setting the Booking notification type

In the newly added notification, you need to choose a Booking type. Then, in the Apartment ID field, you need to select your post_ID. It’s information from the hidden field, we added in Step 3.

Next, there’s a field called “Check-in/Check-out date”. Here you need to select the corresponding field from the Fields settings.

And finally, in the DB columns map block you’ll see names of the columns, created before.

Booking Form Booking notification
NOTE!
“inserted_post_id” should be set in the field, in which ID of the corresponding order will be stored in your booking table.

6 Step – Adjusting the Send Email notification type

OK, the last part of the booking form we need to set up is Send Email notification. It allows sending an email to your clients after they have successfully booked the housing. Please feel free to follow this tutorial.

send-email-notification-type

Displaying the form on the Single post page

1 Step – Editing the Single post type in Elementor

So, at this stage, we’ve got a finished booking form. Now we need to navigate to our Single post page (created before) and edit it with Elementor.

Single page with JetThemeCore

2 Step – Using a Booking Form widget

Now you need to drag a Booking Form widget from the panel and drop it to the best suiting place.

booking-form-widget

In the Select form setting, select the form we’ve prepared. Now you can add some stylization according to your wish.

3 Step – Viewing the booking form in action

After you saved the changes, let’s check how the form works on the frontend and see the changes appeared in the database. Let’s fill in the fields.

filling-in-the-form
NOTE!
In the Check in and Check out fields client will be able to select a period for which he wants to book the residence.
checkin_checkout

Once all the fields are filled in, click the Book Now button and see the form was successfully submitted:

form

4 Step – Checking the field in the phpMyAdmin

Navigate to the phpMyAdmin and check whether the field got completed.

Booking Table in database

5 Step – Checking the Orders CPT

Also, navigate to WP dashboard and check the Orders CPT:

Custom Post with JetEngine

So, it means you, as an administrator, have got a new order.

6 Step – Editing the post in the Orders CPT

Let’s edit the post in the Orders CPT. Here you’ll see a section, containing all the data submitted by your client. Basically, it’s also the information, which is stored in your database:

Booking data
NOTE!
If any changes need to be done (for instance, your customer called and wanted to change his email or even the dates of check-in/ check-out) click the Edit option and put the needed changes.
Booking data
NOTE!
Changes will be visible in the database as well.

Creating filters with JetSmartFilters plugin

1 Step – Creating a new filter

We’re almost done! Let’s proceed to create filters with JetSmartFilters. Navigate to the JetSmartFilters block in the WP Dashboard and create a new one. For this particular case, we need a Date Range filter.
Check the following tutorial.

NOTE!
In the Query Variable field, you need to input the checkin_checkout key.
Date Range Filter with JetSmartFilters

2 Step – Editing the Archive page

Now go ahead and edit the Archive page we created before and open it with Elementor. Locate a Date Range Filter widget and drop it on the page and select appropriate parameter in the widget’s Select Filter setting.

Date Range Filter in Elementor

3 Step – Using the filter on the frontend

Well, now let’s check the frontend. Now, considering that one residence has been booked by one customer, let’s try to use our filter.

For example, let’s imagine, you’re another customer, willing to see if there area filter and you’ll see that the residence, which was booked was excluded from the listing.

Date Range Filter in action

4 Step – Making a new booking

Now, let’s go to the Single Room page once again and try a new booking. In the corresponding field, you will notice that some dates are not available for selecting. Those are dates, which have already been booked by other clients.

Check-in/check-out dates selection

That’s all! Now you can implement our JetBooking plugin functionality and offer your clients to book a mansion for the summer vacation, for example.