Mutar Produto Antes do Carrinho

Quando um produto é adicionado ao carrinho, ele passa por uma pilha de classes de promessas em JavaScript. Essas classes de promessas podem executar várias operações, como exibir pop-ups, realizar requisições assíncronas e mais. Essa pilha de promessas tem acesso ao produto antes de ele ser adicionado ao carrinho. Em seguida, você pode interagir com ela para adicionar mais propriedades ou (como no Gastro) carregar o pop-up de modificadores.

Aqui, você aprenderá como modificar um produto antes de adicioná-lo ao carrinho.

Injetando uma visualização no rodapé do PDV

Primeiro, precisamos adicionar uma visualização ao POS, que garantirá que possamos carregar nosso código JavaScript personalizado. Para isso, precisamos obter o hook correto que é acionado quando o rodapé do POS estiver prestes a ser renderizado.

No NexoPOS, usamos nomes de rotas como prefixos para as ações do rodapé e do cabeçalho. Por exemplo, a rota para o POS é chamada de “ns.dashboard.pos”. Então, se quisermos adicionar uma visualização no rodapé, registraremos uma ação com este hook: “ns-dashboard-pos-footer”. Note que os pontos são substituídos por “hífens”. Da mesma forma, se quisermos adicionar uma visualização no cabeçalho, usaremos “ns-dashboard-pos-header” em vez disso.

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

Aqui, estamos carregando o arquivo "footer.blade.php", que deve estar localizado na raiz do diretório "Resources" do nosso módulo.

Adicionando Promise à fila addToCartQueue

Agora, vamos adicionar uma Classe Promise à addToCartQueue. Esta é uma propriedade do objeto POS que fica globalmente disponível em um contexto JavaScript quando você está na página de ponto de venda.

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

Você pode garantir que a classe que você definir tenha um nome exclusivo. Quando a classe for instanciada, o produto é fornecido e deve ser armazenado. Em seguida, você pode acessar esse produto usando o método “run”.

Observe que você deve resolver o atributo que deseja alterar. Evite resolver o objeto inteiro. Isso afetará todas as alterações feitas por outras classes Promise.

Interagindo com Propriedades Mutadas

Antes que todos os itens da fila sejam resolvidos, você pode, a partir da sua classe de promise, acessar o valor alterado. Essas alterações ainda não estão efetivas no produto, então você pode fazer quaisquer ajustes antes que essas propriedades sejam mescladas ao objeto do produto.

O método “run” aceita um parâmetro, ou seja, o estado atual da alteração aplicada ao produto até o 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>

Neste exemplo, gostaríamos de ajustar o sale_price antes de o produto ser adicionado ao carrinho. Estamos contando com o ProductUnitPromise, pois é essa a promessa que permite ao usuário escolher a unidade de venda. A partir daí, usaremos a propriedade $quantities(), alteraremos o valor retornado e resolveremos uma nova propriedade.