Mutare il prodotto prima del carrello

Quando un prodotto viene aggiunto al carrello, passa attraverso una serie di classi di promise JavaScript. Queste classi di promise possono eseguire varie operazioni come visualizzare popup, effettuare richieste asincrone e altro ancora. Questo stack di promise ha accesso al prodotto prima che venga aggiunto al carrello. Potresti poi interagirci per aggiungere altre proprietà, oppure (come su Gastro) caricare il popup dei modificatori.

Qui imparerai come modificare un prodotto prima che venga aggiunto al carrello.

Inserire una vista nel piè di pagina del POS

Prima dobbiamo aggiungere una vista al POS, che ci permetterà di caricare il nostro codice JavaScript personalizzato. Per farlo, dobbiamo ottenere il giusto hook che viene attivato quando il footer del POS sta per essere renderizzato.

Su NexoPOS, utilizziamo i nomi delle route come prefissi per le azioni di footer e header. Ad esempio, la route per il POS si chiama “ns.dashboard.pos”. Quindi, se vogliamo aggiungere una vista nel footer, registreremo un’azione con questo hook: “ns-dashboard-pos-footer”. Nota che i punti vengono sostituiti con “hyphens” (trattini). Allo stesso modo, se vogliamo aggiungere una vista nell’header, useremo “ns-dashboard-pos-header” invece.

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

Qui stiamo caricando il file "footer.blade.php", che dovrebbe trovarsi nella root della directory "Resources" del nostro modulo.

Aggiungere una promessa alla coda addToCart

Ora aggiungeremo una classe Promise alla addToCartQueue. Si tratta di una proprietà dell’oggetto POS, disponibile globalmente in un contesto JavaScript quando ti trovi nella pagina del punto vendita.

<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>

Potresti assicurarti che la classe che definisci abbia un nome univoco. Quando la classe viene istanziata, il prodotto viene fornito e dovrebbe essere memorizzato. Potresti quindi accedere a quel prodotto utilizzando il metodo "run".

Nota che devi risolvere l’attributo che desideri modificare. Dovresti evitare di risolvere l’intero oggetto. Questo influenzerà tutte le modifiche apportate dalle altre classi Promise.

Interagire con proprietà mutate

Prima che gli elementi della coda siano tutti risolti, puoi, dalla tua classe promise, accedere al valore modificato. Queste modifiche non sono ancora effettive sul prodotto, quindi puoi eseguire eventuali regolazioni prima che queste proprietà vengano unite all’oggetto prodotto.

Le méthode « run » accepte un paramètre, c’est-à-dire 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>

In questo esempio, vorremmo regolare il sale_price prima che il prodotto venga aggiunto al carrello. Facciamo affidamento su ProductUnitPromise, poiché è la promessa che consente all’utente di scegliere l’unità in saldo. Da lì, useremo la proprietà $quantities(), modificheremo il valore restituito e risolveremo una nuova proprietà.