0

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>
2
  • Revisa qué clases se añadan o quitan del dropdown cuando lo abres tú. Me parece que bastaría con añadir la clase shown
    – ffflabs
    Commented el 11 oct. 2023 a las 11:40
  • Agregué una clase al dropdown llamada cart y en el ajax le agregué esta línea $(".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
    – Joe
    Commented el 12 oct. 2023 a las 21:44

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.