POS: Cart Custom Buttons

NexoPOS 5x supports custom components that modules can inject. This was mainly made to ensure new possibilities could be added at the bottom of the cart. This guide explains how to add customs components (buttons) at the bottom of the cart and how to interact with existing components.

Adding Components

If you're extending the POS from your module, you're responsible of loading your Vue component. We'll assume you're using Vite and loads your components like so.

Now we have a reference of the component we want to add as a button at the bottom of the cart. We should now instruct NexoPOS global object to use that every time the cart refreshes or reset.

What we're doing above as the first step, is to make sure the DOM is completely loaded. Then we'll make use of nsHooks, which is an object of wp-hooks. This will make sure we listen to the even "ns-after-cart-reset", which will be triggered every time the cart reset. As the callback, we'll use a function that gets current buttons and adds our new button.

Managing Other Components

This feature should not only allow you to add new components to the cart, but it should also allow you to control the visibility of other buttons. Chances are you might want to hide a specific button or create your own implementation of an existing button. On your script, you might then make use of "delete" keyword to delete existing buttons.

NexoPOS will restore the default states (buttons) when the cart will reset. While making use of the hooks, you'll be able to apply your custom behavior each time.