Benutzerdefinierte Warenkorb-Schaltflächen

NexoPOS 5x unterstützt benutzerdefinierte Komponenten, die Module einfügen können. Dies wurde vor allem dafür entwickelt, dass neue Möglichkeiten unten im Warenkorb hinzugefügt werden können. Diese Anleitung erklärt, wie benutzerdefinierte Komponenten (Schaltflächen) unten im Warenkorb hinzugefügt werden und wie man mit vorhandenen Komponenten interagiert.

Komponenten hinzufügen

Wenn Sie das POS aus Ihrem Modul erweitern, sind Sie dafür verantwortlich, Ihre Vue-Komponente zu laden. Wir gehen davon aus, dass Sie Vite verwenden und Ihre Komponenten so laden.

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

// we're just loading the component.

Jetzt haben wir eine Referenz auf die Komponente, die wir als Schaltfläche unten im Warenkorb hinzufügen möchten. Wir sollten nun das NexoPOS-Global-Objekt anweisen, diese jedes Mal zu verwenden, wenn der Warenkorb aktualisiert oder zurückgesetzt wird.

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

Was wir oben als ersten Schritt tun, ist sicherzustellen, dass das DOM vollständig geladen ist. Anschließend verwenden wir nsHooks, ein Objekt von wp-hooks. So stellen wir sicher, dass wir auf das Ereignis „ns-after-cart-reset“ reagieren, das jedes Mal ausgelöst wird, wenn der Warenkorb zurückgesetzt wird. Als Callback verwenden wir eine Funktion, die die aktuellen Buttons abruft und unseren neuen Button hinzufügt.

Andere Komponenten verwalten

Diese Funktion sollte nicht nur das Hinzufügen neuer Komponenten in den Warenkorb ermöglichen, sondern auch die Steuerung der Sichtbarkeit anderer Schaltflächen. Wahrscheinlich möchten Sie eine bestimmte Schaltfläche ausblenden oder Ihre eigene Implementierung einer vorhandenen Schaltfläche erstellen. In Ihrem Skript können Sie dann den Schlüsselbegriff „delete“ verwenden, um vorhandene Schaltflächen zu löschen.

NexoPOS stellt die Standardzustände (Schaltflächen) wieder her, wenn der Warenkorb zurückgesetzt wird. Wenn Sie die Hooks verwenden, können Sie jedes Mal Ihr benutzerdefiniertes Verhalten anwenden.