Tengo un ajax que me permite guardar un producto, y al verificar que haya sido exitoso llamo a un evento livewire para que me actualice en la vista la cantidad de productos dentro del carro de compras y funciona correctamente, pero requiero que después que envíe la actualización de la cantidad abra y mantenga abierto el dropdown menu para mostrar el contenido del carrito.
Mi ajax
<script>
$(function () {
$(".add_to_cart").click(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
$.ajax({
type: 'POST',
url: "{{route('cart.store')}}",
data: $("form").serialize(),
success: function(respuesta) {
Livewire.emit('cart');
}
});
});
});
</script>
Mi componente livewire
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
class AddToCart extends Component
{
protected $listeners = ['cart' => 'render'];
public function render()
{
$cart = \Cart::getTotalQuantity();
return view('livewire.add-to-cart', [
'cart' => $cart,
]);
}
}
Colocando el siguiente comando $('.fa-shopping-cart').trigger('click');
después de Livewire.emit('cart');
en el ajax, abre el dropdown pero se cierra de inmediato
El dropdown
<div>
<a id="navbarDropdownCart" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fa fa-shopping-cart"></i> ({{$cart}})
</a>
<div class="dropdown-menu dropdown-menu-end shadow border-0" aria-labelledby="navbarDropdown" style="width: 400px; padding: 0px;" id="openCart">
<ul class="list-group" style="margin: 20px;">
@include('partials.cart-drop')
</ul>
</div>
</div>
shown
$(".cart").addClass("show");
pero abre y cierra el menú inmediatamente y además se sale del contenedor el menú, no abre en la misma posición que al hacerle clic, el comando$('.fa-shopping-cart').trigger('click');
funciona bien pero no se como enviarlo a la vista