Okay
  Public Ticket #2738276
Customising Amelia
Closed

Comments

  • Luke Lewandowski started the conversation

    Hi,

    We are currently setting up Amelia for one of our clients who absolutely loved your product. They do have a number of modifications that they have asked of us.

    Eg. in-forms (ordering and sizes of fields), pre-populate the fields based on the user's profile fields, making the calendar bigger etc.

    We are happy to do it however, we are unable to find any documentation / nor get non-min'ed files for the front end components which makes our job supper hacky and very bug-prone.

    How would we go about customizing the front end look & feel?


    Kind regards,

    Luke

  • [deleted] replied

    Hi, Luke!

    Thank you for choosing Amelia and for your kind words as well.

    I'm afraid since Amelia isn't an open-source plugin, we won't be able to share the source code due to our company's policies.

    Please let us know if you have other questions. 

    Best Regards. 

  • Luke Lewandowski replied

    Hi Liza,

    That's understandable. There must be a way of extending your application through WP APIs/Hooks or such ability will not be implemented in the future.

    Regards,

    Luke

  • [deleted] replied

    Hi, Luke!

    We have API Routes for the Amelia app, but most of them are protected depends on the permissions that are set in WordPress Accounts. You can check those API Routes in this file ../wp-content/plugins/ameliabooking/src/Infrastructure/Routes/Routes.php

    At the moment we have some JavaScript hooks that are triggered depending 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)

    As you already know, JS files are minimized in the public version of the plugin.

    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 extract the js and customize it.

    Also, regarding WP Hooks:

    This should be added to  “wp-content/mu-plugins/functions.php”:

    <?php
    function amelia_booking_added_hook($reservation, $bookings, $container) {
    }
    add_action('AmeliaBookingAdded', 'amelia_booking_added_hook', 10, 3);
    function amelia_booking_time_updated_hook($reservation, $bookings, $container) {
    }
    add_action('AmeliaBookingTimeUpdated', 'amelia_booking_time_updated_hook', 10, 3);
    function amelia_booking_status_updated_hook($reservation, $bookings, $container) {
    }
    add_action('AmeliaBookingStatusUpdated', 'amelia_booking_status_updated_hook', 10, 3);
    function amelia_booking_canceled_hook($reservation, $bookings, $container) {
    }
    add_action('AmeliaBookingCanceled', 'amelia_booking_canceled_hook', 10, 3);
    ?>

    So, these functions will be triggered after these actions: booking, canceling, time update, status update
    $reservation has data about the appointment (startTime, endTime...)
    $bookings contains data about the bookings that started the action (from the front-end there will be one booking, and in the back-end, there can be more if a group appointment is created).

    Hope you will find some of these tips helpful.

    Please let us know if you have any other questions.

    Best Regards.

  • Luke Lewandowski replied

    Hi Liza,

    This is amazing! Thanks a lot for this comprehensive answer! 

    So the only thing that's missing that would allow us to roll out better (more integrated) customizations are the Vue/JS files - or the ability to extend them. Is that something that's in the roadmap?

    Kind regards,

    Luke

  • [deleted] replied

    Hi, Luke!

    I'm glad I could help.

    As far as I know, the ability to extend the files isn't included in the coming updates.

    However, you can suggest that as a "developer customization" request here, or check if this request was already submitted and vote for it. So, our developers will see there's demand for such options. 

    Please let us know if you have any other questions.

    Best Regards.