Having access to all CMS markup plus the power of Liquid really allows us to customise and control what Treepl CMS has to offer.
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.
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.
And in Bootstrap, similar situation with their Collapse plugin:
So in summary, and as a description for this item (for @Peter-Schmidt )
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?