Having access to all CMS markup plus the power of Liquid really allows us to customise and control what Treepl CMS has to offer.
However, when it comes to the CMS based javascript that is required for certain functionality, in particular, eCommerce - with it’s XHR/AJAX requests - it can be difficult to intercept and customise all this functionality, or at least react to it in order to run your own javascript functions in response.
What I’m thinking might be a good solution is for the Treepl team to build JS events into all of their CMS JS so that we can tap into the before and after states of all functions.
In eCommerce for example, when the ‘Add to Cart’ function is fired there could be a javascript event we could fire our own JS from, both before the ‘Add to Cart’ function fires and after.
One simple example for this would be to display a loading indicator (either on the button, as a page overlay, or however else is desired to suit the project design and UI/UX).
In a more complex scenario, we might need to do our own custom validation for certain other inputs before the product is added to the cart, or we want to add another product to the cart along with the current product based on certain user inputs selected.
Further examples where this would be helpful is in the cart itself, as there are many XHR requests being triggered on cart updates/changes like quantities, shipping options, discount codes, etc. Being able to react to these events to manipulate the UI, provider feedback to the user, or even further interact with the cart, CMS or other APIs in an easy and consistent manner would be very powerful.
I understand that many of these types of things are probably possible already. Some easy and some needing a lot of JS hackery. But if there were built-in, supported ways of doing this it would make for a stronger, more consistent platform, allowing for more advanced projects and easier sharing of code solutions through the community.
External examples where I’ve seen this implemented is with the Foundation and Bootstrap frameworks where they have JS events for many of their JS based plugins. Like this Foundation example where there are 3 JS events fired for their modal plugin; 1 just before the modal opens, 2. When the modal opens, and 3. When the modal has closed.
https://get.foundation/sites/docs/reveal.html#js-events
And in Bootstrap, similar situation with their Collapse plugin:
https://getbootstrap.com/docs/4.5/components/collapse/#events
And many other javascript plugins include such callbacks and events so you can better integrate and extend upon them.
So in summary, and as a description for this item (for @Peter-Schmidt 
)
Provide Javascript events/callbacks for all CMS Javascript assets so that we more easily and consistently, tap into the ‘before’ and ‘after’ states of all Javascript functions (particularly eCommerce).
Would love to hear further input from more advanced JS users out there… is this the right approach? is there anything to add to make this better?
