Botones de carrito personalizados

NexoPOS 5x admite componentes personalizados que los módulos pueden inyectar. Esto se hizo principalmente para garantizar que se pudieran añadir nuevas posibilidades en la parte inferior del carrito. Esta guía explica cómo añadir componentes personalizados (botones) en la parte inferior del carrito y cómo interactuar con los componentes existentes.

Añadiendo componentes

Si estás ampliando el POS desde tu módulo, eres responsable de cargar tu componente de Vue. Supondremos que estás usando Vite y cargarás tus componentes así.

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

// we're just loading the component.

Ahora tenemos una referencia al componente que queremos agregar como un botón en la parte inferior del carrito. Ahora debemos indicarle al objeto global de NexoPOS que lo use cada vez que el carrito se actualice o se restablezca.

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

Lo que estamos haciendo arriba como primer paso es asegurarnos de que el DOM esté completamente cargado. Luego haremos uso de nsHooks, que es un objeto de wp-hooks. Esto nos permitirá escuchar el evento «ns-after-cart-reset», que se activará cada vez que el carrito se restablezca. Como devolución de llamada, usaremos una función que obtiene los botones actuales y agrega nuestro nuevo botón.

Gestionar otros componentes

Esta función no solo debería permitirte agregar nuevos componentes al carrito, sino también controlar la visibilidad de otros botones. Es probable que quieras ocultar un botón específico o crear tu propia implementación de un botón existente. En tu script, entonces podrías hacer uso de la palabra clave «delete» para eliminar botones existentes.

NexoPOS restaurará los estados predeterminados (botones) cuando el carrito se restablezca. Al usar los hooks, podrás aplicar tu comportamiento personalizado cada vez.