Custom Cart 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 custom 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 for loading your Vue component. We'll assume you're using Vite and load your components like so.

import myComponent from './components/my-component.vue';

// we're just loading the component.

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

import myComponent from './components/my-component.vue';

// Step 1: we need to make sure the DOM is fully loaded
document.addEventListener( 'DOMContentLoaded', () => {

    // Step 2: we'll be using nsHooks to ensure we inject the component everytime the cart reset
    nsHooks.addAction( 'ns-after-cart-reset', 'my-custom-hook', () => {
    
        // Step 3: we'll get the current buttons and make sure to add our buttons, then update the cart buttons object.
        const cartButtons   = POS.cartButtons.getValue();
        cartButtons[ 'myCustomButton' ]   = myComponent;
        POS.cartButtons.next( cartButtons );
    });
});

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 event "ns-after-cart-reset", which will be triggered every time the cart resets. As the callback, we'll use a function that gets the 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. In your script, you might then make use of the "delete" keyword to delete existing buttons.

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