1

tengo un inconveniente al intentar pasar datos a un modal:

boton agregar al carito>

<a href="#" class="btn-producto" data-toggle="modal" data-target="#productosModal" data-image="<?php echo $root;?>/public/<?php echo $Producto['foto1']; ?>" data-title="<?php echo $Producto['producto']; ?>" >
    <img src="../assets/images/cart-3.svg" alt="">
    Agregar al carrito 
</a>

modal:

<div class="modal fade" id="productosModal" tabindex="-1" role="dialog" aria-labelledby="productosModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    <div class="modal-header border-bottom-0">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <div class="modal-body rounded p-4">
        <div class="modal-addtocart position-relative">
        <h5 class="title-modal text-center mt-1">
            ¡Producto agregado a tu carrito!
        </h5>
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-12 col-lg-6 text-center">
            <div>
                <div class="product-img-wrapper mb-2">
                <img src="" alt="">
                </div>
                <h5 class="title-producto-modal"></h5>
                <div>
                Cant: <span>1</span>
                </div>
            </div>
            
            </div>
            <div class="col-12 col-lg-6 text-center">
            <p class="cantidad-modal">Hay 1 artículos en tu carrito</p>
            
            <a class="btn-principal btn-catalogo-outline justify-content-center mt-3" href="<?php echo $root;?>catalogo.php">Ver más productos</a>
            <a href="<?php echo $root;?>carrito.php" class="btn-principal btn-catalogo justify-content-center mt-3">Comprar</a>
            </div>
        </div>
        </div>
    </div>
    </div>
</div>
</div>

codigo jquery:

$('#productosModal').on('show', function(e) { 
    var link     = e.relatedTarget(),
        modal    = $(this),
        image    = link.data("image"),
        title    = link.data("title");

    modal.find("#card-image").val(image);
    modal.find("#card-title").val(title);
});

lo que estoy intentando hacer es que en el boton agregar al carrito, me muestre la modal con la imagen y titulo del producto, que estoy haciendo mal??

el boton agregar al carrito esta compuesto con un bucle for, la cual consulta a la base de datos y lista los productos que estan disponibles, alli no tengo inconvenientes, ya que me esta listando los productos disponibles, el unico inconveniente que estoy presentando es el de pasarle los datos a la modal, seria la imagen del producto y el titulo del producto, por cierto, tambien debo pasarle el id del producto

1
  • Acabo de agregar una respuesta. Recuerda marcar como aceptada tu anterior autorespuesta (ya han pasado mas de 48 horas) y si mi respuesta a esta pregunta te vale entonces la mia tambien. Saludos!
    – masterguru
    Commented el 6 abr. 2022 a las 8:45

1 respuesta 1

1

Para capturar el evento show en bootstrap debes usar show.bs.modal, tal como se especifica en su documentación, de este modo:

$('#productosModal').on('show.bs.modal', function(e) { 

A partir de aquí ya puedes continuar con el resto de errores que te aparecerán, pues finalmente podrás ejecutar el contenido de ese .on()

1
  • gracias!!! funciono de una
    – Murra
    Commented el 6 abr. 2022 a las 10:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.