The latepoint booking trigger class acts like the booking button but can be applied to any element within your WordPress site. For example, it could be applied to a promotional image that launches to a particular service.
Booking Trigger
Page to Create
/any page you want the triggerClass to place on the element
os_trigger_bookingData that can be passed to trigger
data-show-locations="1"
data-show-agents="1"
data-show-services="1"
data-show-service-categories="1"
data-selected-location="1"
data-selected-agent="1"
data-selected-service="1"
data-selected-service-category="1"
data-calendar-start-date="1"
data-selected-start-date="yyyy-mm-dd"
data-selected-start-time="mmm"
data-hide-summary="yes"
data-hide-side-panel="yes"WordPress Image Example
An example of a normal wordpress image with the os_trigger_booking assigned.
Steps
- Insert your image
- Select advanced from your image properties
- Put “os_trigger_booking” in the Additional CSS classes field
- Switch to code editor and put your data fields after the os_trigger_booking
<figure class="wp-block-image size-large os_trigger_booking" data-selected-agent="1" data-selected-service="2" data-selected-location="1">HTML example use
The dropup button (to the left) has a service category which has the description of “Brains Trust”.
Inside the Service category are 5 services that could be purchased. Each one of these services are triggered using the os_trigger_booking class and have a latepoint data-selected-service= attached to them. This way they pre-select the service or agent/location. (Hover over Button)
The example Code for the dropup button is below
Button Formatting Code
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 20px;
background-color: #827c7c;
border: 5px solid #a10303;
border-radius: 15px;
}
.dropup {
position: relative;
display: inline-block;
}
.dropup-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
bottom: 50px;
z-index: 1;
border-radius: 15px;
border: 5px solid #a10303;
}
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-radius: 15px;
}
.dropup-content a:hover {background-color: #ccc}
.dropup:hover .dropup-content {
display: block;
}
.dropup:hover .dropbtn {
background-color: #2980B9;
border: 5px solid #FFFFFF;
}
</style>Trigger Code
<div class="dropup">
<button class="dropbtn">Brains Trust</button>
<div class="dropup-content">
<a id="latepoint1" href="" class="os_trigger_booking" data-selected-agent="1" data-selected-service="2">Pea Brain</a>
<a id="latepoint2" href="" class="os_trigger_booking" data-selected-agent="1" data-selected-service="3">Brain Wave</a>
<a id="latepoint3" href="" class="os_trigger_booking" data-selected-agent="1" data-selected-service="4">Brain Wash</a>
<a id="latepoint4" href="" class="os_trigger_booking" data-selected-location="1" data-selected-agent="1" data-selected-service="2">Brain Less</a>
<a id="latepoint5" href="" class="os_trigger_booking" data-selected-location="1" data-selected-agent="5" data-selected-service="2">Brain Storming</a>
</div>
</div>WPBakery Button Example
An example of a WPBakery button with the os_trigger_booking assigned.
Put “os_trigger_booking” in the Additional CSS classes field
Elementor details
Elementor can have a button created and the os_booking triger assigned within the standard/free version.
This is done by:
- Selecting your object – In the case below it is the green button
- Selecting the Advanced menu tab along the top
- Under the Advanced section placing the “os_trigger_booking” into the css classes field.
Unfortunatly in order for data attributes to be assigned in elementor to an object you need to have the paid pro version. Details are here: https://elementor.com/help/custom-attributes-pro/