Vue-storefront: [ RFC ] Vue Storefront Hooks

[filrak]

Connected to: https://github.com/DivanteLtd/vue-storefront/issues/3144

Hooks allow us to

• do something at certain moment of application lifecyce (for example afterPlaceOrder, afterAppInit (so called Listener hooks)
• let you modify internal objects before app performs some actions (for example beforePlaceOrder( order => { return modifiedOrder }) (so called Mutator hooks)

I want to ask you (especially extension devs) what Listener/Mutator hooks you would like to see in Vue Storefront and why. For now we plan to add:

• afterAppInit: listener - after modules and theme are registered
• beforeStoreViewChange(storeView): mutator- you can access/modify storeView object before changing
• afterStoreViewChange(storeView): mutator- you can access storeView object after changing storeView
• beforePlaceOrder(order): mutator - you can access/modify order object before sending order to backend
• afterPlaceOrder(order, task): listener - you can access order/task (order placement status) object after sending to backend

I'm opening this issue to ask you what Hooks you want to have in VS along with new module system.

[pkarw]

Looks great @filrak. OK, I'm adding my propositions:

• beforeUserLogIn(credentials): mutator - to let devs implement other authorization workflow (can be done by overriding the login screen as well
• afterUserAuthorized(userData): listener - once user get authorized the hook to bind to and to load custom data regarding current user account,
• afterUserLogOut(userData): listener,
• afterCartLoaded(cartItems): mutator,
• beforeCartSynced(clientItems): mutator - called in the cart/sync
• beforeCartMerged(serverItems, clientItems): mutator - called in the cart/merge
• beforeHydated(initialState):mutator - caleld before replaceState and before $mount

[grimasod]

My request

• afterCartUpdated(cartItems): listener - after items added / removed or quantity changed

[filrak]

@grimasod could you please also tell a bit about use cases you see for those hooks?

[grimasod]

@filrak Sure, I can think of a few

• afterCartUpdated(cartItems): listener - example use cases:

1. To inform the user of Discounts they could receive if they log in. This information is not in the cart data if they're not logged in and needs to be updated when the cart changes.
2. To trigger data updates from other data sources, like Rewards or Offers from hosted services
3. To reset a timeout on the Checkout page (user has to reload after a period of no activity). The timeout is reset when the cart is updated using the microcart (or the Checkout forms are updated).

[pkarw]

• onAfterProductThumbnailPathGenerated(path, sizex, sizey): mutator - for integrating 3rd party services like Cloudinary,
• onBeforeTaxesCalculated(productList) - for integrating the 3rd party services like https://www.taxjar.com/ - it must work on kind of async/await Promises then

[filrak]

@pkarw i believe for taxes it's much better to just override Vuex action responsible for calculating taxes, for images it's also not so straightforward. For example cloudinary (and probably many other services) uses it's own SDK with dedicated components so our thunb helpers might be useless anyway. Also hook should work as an extension of current behavior, not it's replacement

[pkarw]

@filrak OK

[filrak]

@grimasod that looks like something that can be achieved through mutation subscription

[pkarw]

@filrak is there a list of already implemented hooks? I'm not sure if we already have cart hooks, I als ocreated a product hooks ticket