Botões Personalizados do Carrinho

O NexoPOS 5x oferece suporte a componentes personalizados que os módulos podem injetar. Isso foi feito principalmente para garantir que novas possibilidades pudessem ser adicionadas na parte inferior do carrinho. Este guia explica como adicionar componentes personalizados (botões) na parte inferior do carrinho e como interagir com os componentes existentes.

Adicionando Componentes

Se você estiver estendendo o POS a partir do seu módulo, você será responsável por carregar seu componente Vue. Vamos assumir que você está usando Vite e carregar seus componentes assim.

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

// we're just loading the component.

Agora temos uma referência para o componente que queremos adicionar como um botão na parte inferior do carrinho. Agora devemos instruir o objeto global NexoPOS a usar isso sempre que o carrinho for atualizado ou redefinido.

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 );
    });
});

O que estamos fazendo acima como primeiro passo é garantir que o DOM esteja completamente carregado. Em seguida, vamos usar o nsHooks, que é um objeto de wp-hooks. Isso vai garantir que escutemos o evento “ns-after-cart-reset”, que será acionado sempre que o carrinho for redefinido. Como callback, usaremos uma função que obtém os botões atuais e adiciona nosso novo botão.

Gerenciando Outros Componentes

Este recurso não deve apenas permitir que você adicione novos componentes ao carrinho, mas também deve permitir que você controle a visibilidade de outros botões. É provável que você queira ocultar um botão específico ou criar sua própria implementação de um botão existente. No seu script, você pode então usar a palavra-chave “delete” para excluir botões existentes.

O NexoPOS restaurará os estados padrão (botões) quando o carrinho for redefinido. Ao usar os hooks, você poderá aplicar seu comportamento personalizado sempre que necessário.