Pulsanti carrello personalizzati

NexoPOS 5x supporta componenti personalizzati che i moduli possono iniettare. Questa funzionalità è stata creata principalmente per garantire che nuove possibilità potessero essere aggiunte in fondo al carrello. Questa guida spiega come aggiungere componenti personalizzati (pulsanti) in fondo al carrello e come interagire con i componenti esistenti.

Aggiunta di componenti

Se stai estendendo il POS dal tuo modulo, sei responsabile del caricamento del tuo componente Vue. Assumeremo che tu stia usando Vite e caricherai i tuoi componenti in questo modo.

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

// we're just loading the component.

Ora abbiamo un riferimento al componente che vogliamo aggiungere come pulsante in fondo al carrello. Dobbiamo ora istruire l’oggetto globale NexoPOS affinché lo utilizzi ogni volta che il carrello si aggiorna o viene ripristinato.

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

Quello che facciamo sopra come primo passo è assicurarci che il DOM sia completamente caricato. Poi useremo nsHooks, che è un oggetto di wp-hooks. Questo ci permetterà di ascoltare l’evento "ns-after-cart-reset", che verrà attivato ogni volta che il carrello viene resettato. Come callback, useremo una funzione che ottiene i pulsanti attuali e aggiunge il nostro nuovo pulsante.

Gestione di altri componenti

Questa funzionalità non dovrebbe solo consentirti di aggiungere nuovi componenti al carrello, ma dovrebbe anche permetterti di controllare la visibilità di altri pulsanti. È probabile che tu voglia nascondere un pulsante specifico oppure creare la tua implementazione di un pulsante esistente. Nel tuo script, potresti quindi usare la parola chiave “delete” per eliminare i pulsanti esistenti.

NexoPOS ripristinerà gli stati predefiniti (pulsanti) quando il carrello viene azzerato. Utilizzando gli hook, potrai applicare il tuo comportamento personalizzato ogni volta.