I am trying to disable showing "X Spots Left!" on the Amelia calendar.
I am using javascript because this isn't a toggle anywhere in the settings that I can find. I am having trouble with running the javascript after the calendar is loaded. I know my code is correct, but it's searching for the elements before the calendar is finished loading. Also, the calendar is reloaded each time the user goes to prev/next month.
How can I trigger javascript after the calendar is reloaded each time?
JS files are modified (minimized) in public version of plugin (in our development environment is accessible), but unfortunately I can not send you our source code because that is the policy of our company.
All those files that have extension .vue are compressed and minimized in JS files that is very hard and not recommended modifying. So in order to add some other features you can unminify the js and customize it.
I wish the details of this approach could be shared with the rest of us. I think it would be useful for something I'm struggling with... prepopulating form fields for users who are not WP-logged-in but who are known by the integrated CRM.
I can share what I've done which might be helpful for someone who needs to control some of the functionality of the booking form. It is a similar use of MutationObserver, only with jQuery -- it's already loaded, so why not use it if it's easier! Super easy.
* I had to modify the following lines from 17 onward as I was getting a javascript type error in the console and, although it all still worked, I want to keep things clean... so from line 17:
for(var current = prev.parent(); current.length && !prev.is(origin); current = current.parent()) { var tag;
if (typeof prev.get(0).tagName !== 'undefined') { // if the above was "undefined", then the following line would give me an error... so added the check above. tag = prev.get(0).tagName.toLowerCase();
// At this point we're looking at the booking form and can prefill any field... here I fill the email field with "someemail@email.com"
jQuery("#am-confirm-booking > div:nth-child(1) > form > div:nth-child(1) > div:nth-child(4) > div > div > div > input.el-input__inner").val('someemail@email.com');
I am trying to disable showing "X Spots Left!" on the Amelia calendar.
I am using javascript because this isn't a toggle anywhere in the settings that I can find. I am having trouble with running the javascript after the calendar is loaded. I know my code is correct, but it's searching for the elements before the calendar is finished loading. Also, the calendar is reloaded each time the user goes to prev/next month.
How can I trigger javascript after the calendar is reloaded each time?
Thank you!!
Hello Eddie,
Thank you for reaching out to us.
Unfortunately we don't have hooks (action and filters) at the moment. What we have is a few JS hooks that is triggered depends on the view:
window.beforeAddToCalendarLoaded() window.beforeBookingLoaded() window.beforeSearchLoaded() window.beforeSearchFiltered() window.afterSearchFiltered() window.beforeConfirmedBooking() window.beforeCatalogLoaded() window.afterSelectCatalogCategory(object_category) window.beforeCatalogCategoryLoaded(object_category) window.beforeCatalogServiceLoaded(object_category, object_service) window.afterSearchActivateService(object_appointment, object_serviceActive) window.afterSearchGoToSecondStep(object_appointment, object_serviceActive) window.afterBookingSelectDateAndTime(object_appointment, object_serviceId, object_providerId, object_locationId) window.afterBookingSelectService(object_appointment, object_serviceId, object_providerId, object_locationId) window.beforeConfirmBookingLoaded(object_appointment, object_service, object_provider, object_location) window.afterConfirmBooking(object_appointment, object_service, object_provider, object_location)
JS files are modified (minimized) in public version of plugin (in our development environment is accessible), but unfortunately I can not send you our source code because that is the policy of our company.
All those files that have extension .vue are compressed and minimized in JS files that is very hard and not recommended modifying. So in order to add some other features you can unminify the js and customize it.
Kind Regards,
Uros Jovanovic
uros.jovanovic@tmsproducts.io
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Okay thanks for letting me know. Would be a great feature to either add more options/customization to calendar or hooks for modifying it with JS.
Was able to use a MutationObserver to monitor when the "am-loading" class was removed from the calendar which then triggered my JS.
Hello Eddie,
Thank you for the suggestion, I will pass it to our developers. Glad to hear that you managed to make it work.
Please reach out to us if you have any other questions.
Kind Regards,
Uros Jovanovic
uros.jovanovic@tmsproducts.io
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
I wish the details of this approach could be shared with the rest of us. I think it would be useful for something I'm struggling with... prepopulating form fields for users who are not WP-logged-in but who are known by the integrated CRM.
Hello Chris,
Thank you for reaching out to us.
Will do that. Hope that this will be integrated soon.
Please reach out to us if you have any other questions.
Kind Regards,
Uros Jovanovic
uros.jovanovic@tmsproducts.io
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
I can share what I've done which might be helpful for someone who needs to control some of the functionality of the booking form. It is a similar use of MutationObserver, only with jQuery -- it's already loaded, so why not use it if it's easier! Super easy.
(1) Load "Jquery-Observer" script (github has it: https://github.com/kapetan/jquery-observe).
* I had to modify the following lines from 17 onward as I was getting a javascript type error in the console and, although it all still worked, I want to keep things clean... so from line 17:
for(var current = prev.parent(); current.length && !prev.is(origin); current = current.parent()) {
var tag;
if (typeof prev.get(0).tagName !== 'undefined') {
// if the above was "undefined", then the following line would give me an error... so added the check above.
tag = prev.get(0).tagName.toLowerCase();
selector.push(tag + ':eq(' + current.children(tag).index(prev) + ')');
}
prev = current;
}
(2) On the page, this code executes :
<script>
jQuery(document).ready(function() {
// Wait until we see the <div> with id = "am-confirm-booking" which is the booking form after the calendar
jQuery('#content').observe('childlist', '#am-confirm-booking', function() {
// At this point we're looking at the booking form and can prefill any field... here I fill the email field with "someemail@email.com"
jQuery("#am-confirm-booking > div:nth-child(1) > form > div:nth-child(1) > div:nth-child(4) > div > div > div > input.el-input__inner").val('someemail@email.com');
});
});
</script>
Hello Chris,
Thank you very much for that.
I will have this passed to our developers and hope that this will be of use for the customers that need such functionality.
Please reach out to us if you have any other questions.
Kind Regards,
Uros Jovanovic
uros.jovanovic@tmsproducts.io
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps, and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables