Modifier le produit avant le panier

Lorsqu’un produit est ajouté au panier, il passe par une pile de classes de promesses JavaScript. Ces classes de promesses peuvent effectuer diverses opérations, comme afficher des popups, exécuter des requêtes asynchrones, etc. Cette pile de promesses a accès au produit avant son ajout au panier. Vous pouvez ensuite interagir avec elle pour ajouter d’autres propriétés, ou (comme sur Gastro) charger le popup des modificateurs.

Ici, vous allez apprendre comment modifier un produit avant de l’ajouter au panier.

Injection d’une vue dans le pied de page du point de vente

Nous devons d’abord ajouter une vue au POS, ce qui nous permettra de charger notre code JavaScript personnalisé. Pour cela, nous devons obtenir le bon hook qui se déclenche lorsque le pied de page du POS est sur le point d’être rendu.

Sur NexoPOS, nous utilisons les noms des routes comme préfixes pour les actions du pied de page et de l’en-tête. Par exemple, la route vers le POS s’appelle « ns.dashboard.pos ». Ainsi, si nous voulons ajouter une vue dans le pied de page, nous allons enregistrer une action avec ce hook : « ns-dashboard-pos-footer ». Notez que les points sont remplacés par des « tirets ». De la même manière, si nous voulons ajouter une vue dans l’en-tête, nous utiliserons « ns-dashboard-pos-header » à la place.

<?php
namespace Modules\YourModules\Providers;

use App\Classes\Output;
use App\Classes\Hook;
use Illuminate\Support\ServiceProvider as CoreServiceProvider;

class ServiceProvider extends CoreServiceProvider
{
    public function register()
    {
         Hook::addAction( 'ns-dashoard-pos-footer', function( Output $view ) {
              $view->addView( 'YourModule::footer' );
         });
    }
}

Ici, nous chargeons le fichier « footer.blade.php », qui doit se trouver à la racine du répertoire « Resources » de notre module.

Ajout d’une promesse à la file d’attente addToCartQueue

Maintenant, nous allons ajouter une classe Promise à la file d’attente addToCartQueue. Il s’agit d’une propriété de l’objet POS, globalement disponible dans un contexte JavaScript lorsque vous êtes sur la page de point de vente.

<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function() {
    // when the page has loaded POS object is available.
    class MyCustomPromise {
        constructor( product ) {
            this.product = product;
        }
        
        run() {
            return new Promise( ( resolve, reject ) => {
                // perform whatever you want here
                console.log( this.product ); // 
                resolve({ name: 'Custom Name' });
            });
        }
    }
    
    POS.addToCartQueue.push( MyCustomPromise );
});
</script>

Vous pouvez vous assurer que la classe que vous définissez a un nom unique. Lors de l’instanciation de la classe, le produit est fourni et doit être stocké. Vous pouvez ensuite accéder à ce produit à l’aide de la méthode « run ».

Notez que vous devez résoudre l’attribut que vous souhaitez modifier. Évitez de résoudre l’objet entier. Cela affectera toutes les modifications effectuées par d’autres classes Promise.

Interagir avec des propriétés mutées

Avant que tous les éléments de la file d’attente ne soient résolus, vous pouvez, depuis votre classe de promesse, accéder à la valeur modifiée. Ces modifications ne sont pas encore effectives sur le produit ; vous pouvez donc effectuer tout ajustement avant que ces propriétés ne soient fusionnées dans l’objet produit.

La méthode « run » accepte un paramètre, à savoir l’état actuel de la modification appliquée au produit jusqu’à présent.

<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function() {
    // when the page has loaded POS object is available.
    class MyCustomPromise {
        constructor( product ) {
            this.product = product;
        }
        
        run( state ) {
            return new Promise( ( resolve, reject ) => {
                // we'll access unit selected
                // with the promise class "ProductUnitPromise".
                const unitQuantity = state.$quantities();
                unitQuantity.sale_price_edit = 11;
                // unitQuantity.sale_price_with_tax = 11; use it if the price with tax is prefered on the settings
                // unitQuantity.sale_price_without_tax = 11; use it if the price without tax is prefered on the settings
                resolve({
                    $quantities: () => unitQuantity
                });
            });
        }
    }
    
    POS.addToCartQueue.push( MyCustomPromise );
});
</script>

Dans cet exemple, nous souhaitons ajuster le sale_price avant que le produit ne soit ajouté au panier. Nous nous appuyons sur le ProductUnitPromise, car c’est la promesse qui permet à l’utilisateur de choisir l’unité de vente. À partir de là, nous utiliserons la propriété $quantities(), modifierons la valeur renvoyée, puis résoudrons une nouvelle propriété.