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.
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”.
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.
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.
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.
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.
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:
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.
Next, you need to add the needed information in Elementor editor and set the needed Conditions. For more details, please see the following tutorial.
Building a table structure
1 Step – Booking overview
Now, it’s time to go to JetEngine dashboard and select the Booking as shown in the screenshot below:
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:
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 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 fprm 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.
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.
5 Step – Viewing the table in the database
Now, let’s go to phpMyAdmin and see how the saved table looks in the database:
Bulding 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.
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.
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!
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.
5 Step – Setting the Booking notification type
In the newly added notification, you need to choose an 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 the 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.
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.
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 bookig form. Now we need to navigate to our Single post page (created before) and edit it with Elementor.
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.
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.
Once all the fields are filled in , click the Book Now button and see the form was successfully submitted:
4 Step – Checking the field in the phpMyAdmin
Navigate to the phpMyAdmin and check whether the field got completed.
5 Step – Checking the Orders CPT
Also, navigate to WP dashboard and check the Orders CPT:
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:
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.
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.
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 areis filter and you’ll see that the residence, which was booked was excluded from the listing.
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.
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.