Plugin de mensajes toast en Laravel Livewire

Vamos a utilizar aquí un plugin para manejarlos toas específicamente para cada vez que agreguemos modifiquemos o eliminemos un item del carrito se muestra un mensaje por pantalla indicando al usuario de que se realizó dicha acción así que bueno el recomendado sería este puedes emplear cualquier otro pero yo voy a ampliar este simplemente escribes toast-me en Google y poco más así que ya esto más adelante cuando en las siguientes clases vamos a escuchar los eventos que suceden en el servidor que ya lo vamos a establecer en eventos de Livewire y mostramos los mensajes así de simple entonces su instalación viene siendo lo típico:

$ npm i toast-me

Voy a venir acá ya que tengo el proceso activo voy a bajarlo coloco esto y esperamos ahí bueno su configuración es sencilla tal cual puedes ver y lo importamos y hacemos aquí una configuración entre comillas inicial realmente no haría falta una configuración inicial ya que lo podemos emplear en cualquier parte pero lo que nosotros vamos a hacer es aquí en el app que es donde vamos a definir aquí el escucha de los eventos y a partir de aquí es donde lo vamos a emplear por lo tanto aquí es donde lo configuraría:

resources/js/app.js

***
import toast from 'toast-me';
window.toast = toast

const options = {
   position:'bottom'
}

El:

window.toast = toast

Se configura si quieres emplear en cualquier otra parte lo pudieras hacer desde el objeto window o mejor dicho ya lo tienes configurado en el objeto window y ya lo pudieras emplear en cualquier parte así que coloco todas igual a todas coloco aquí una constante y esta var a ser para manejar la posición:

const options = {
  position:'bottom'
}

Por lo demás, puedes emplearlo en base a los eventos de Livewire, por ejemplo:

resources/js/app.js

Livewire.on('itemAdd', (params) => {
   toast('Item add to cart: ' + params[0].title, options)
})

Desde los componentes:

$this->dispatch("itemAdd",$post);

06-11-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Plugin de mensajes toast en Laravel Livewire