Boutons de panier personnalisés

NexoPOS 5x prend en charge des composants personnalisés que les modules peuvent injecter. Cela a principalement été conçu pour garantir que de nouvelles possibilités puissent être ajoutées en bas du panier. Ce guide explique comment ajouter des composants personnalisés (boutons) en bas du panier et comment interagir avec les composants existants.

Ajout de composants

Si vous étendez le POS depuis votre module, vous êtes responsable du chargement de votre composant Vue. Nous allons supposer que vous utilisez Vite et que vous chargez vos composants comme suit.

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

// we're just loading the component.

À présent, nous avons une référence au composant que nous voulons ajouter sous forme de bouton en bas du panier. Nous devons maintenant demander à l’objet global NexoPOS d’utiliser ce composant à chaque fois que le panier se recharge ou se réinitialise.

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

Ce que nous faisons ci-dessus comme première étape, c’est de nous assurer que le DOM est entièrement chargé. Ensuite, nous allons utiliser nsHooks, qui est un objet de wp-hooks. Cela nous permettra de nous abonner à l’événement « ns-after-cart-reset », qui sera déclenché à chaque fois que le panier est réinitialisé. En guise de rappel, nous utiliserons une fonction qui récupère les boutons actuels et ajoute notre nouveau bouton.

Gérer les autres composants

Cette fonctionnalité ne devrait pas seulement vous permettre d’ajouter de nouveaux composants au panier, mais aussi de contrôler la visibilité d’autres boutons. Il est probable que vous souhaitiez masquer un bouton spécifique ou créer votre propre implémentation d’un bouton existant. Dans votre script, vous pourriez alors utiliser le mot-clé « delete » pour supprimer des boutons existants.

NexoPOS restaurera les états par défaut (boutons) lorsque le panier sera réinitialisé. En utilisant les hooks, vous pourrez appliquer votre comportement personnalisé à chaque fois.