Mutar producto antes del carrito

Cuando se agrega un producto al carrito, pasa por una pila de clases de promesas de JavaScript. Estas clases de promesas pueden realizar diversas operaciones como mostrar ventanas emergentes, ejecutar solicitudes asíncronas y más. Esta pila de promesas tiene acceso al producto antes de que se agregue al carrito. Luego podrías interactuar con ella para agregar más propiedades o (como en Gastro) cargar el cuadro emergente de modificadores.

Aquí aprenderás cómo modificar un producto antes de que se agregue al carrito.

Inyectar una vista en el pie de página del TPV

Primero necesitamos agregar una vista al TPV, que nos permitirá cargar nuestro código JavaScript personalizado. Para ello, necesitaremos obtener el hook correcto que se activa cuando el pie de página del TPV está a punto de renderizarse.

En NexoPOS, usamos los nombres de las rutas como prefijos para las acciones del pie de página y del encabezado. Por ejemplo, la ruta hacia el POS se llama «ns.dashboard.pos». Así que, si queremos agregar una vista en el pie de página, registraremos una acción con este hook: «ns-dashboard-pos-footer». Ten en cuenta que los puntos se reemplazan por «guiones». Del mismo modo, si queremos agregar una vista en el encabezado, usaremos «ns-dashboard-pos-header» en su lugar.

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

Aquí, estamos cargando el archivo "footer.blade.php", que debería estar ubicado en la raíz del directorio "Resources" de nuestro módulo.

Agregando una promesa a la cola de addToCart

Ahora, agregaremos una clase Promise al addToCartQueue. Esta es una propiedad del objeto POS que está globalmente disponible en un contexto de JavaScript cuando estás en la página de punto de venta.

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

Es posible que te asegures de que la clase que defines tenga un nombre único. Cuando se instancia la clase, se proporciona el producto y debe almacenarse. Luego, puedes acceder a ese producto usando el método "run".

Ten en cuenta que debes resolver el atributo que deseas cambiar. Debes evitar resolver todo el objeto. Esto afectará a todos los cambios realizados por otras clases Promise.

Interactuando con propiedades mutadas

Antes de que todos los elementos de la cola se resuelvan, puedes, desde tu clase de promesa, acceder al valor modificado. Estos cambios aún no son efectivos en el producto, así que puedes realizar los ajustes necesarios antes de que estas propiedades se fusionen en el objeto del producto.

El método «run» acepta un parámetro, es decir, el estado actual del cambio aplicado al producto hasta el momento.

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

En este ejemplo, nos gustaría ajustar el sale_price antes de que el producto se agregue al carrito. Estamos confiando en ProductUnitPromise, ya que es la promesa que permite al usuario elegir la unidad de venta. A partir de ahí, usaremos la propiedad $quantities(), cambiaremos el valor devuelto y resolveremos una nueva propiedad.