0

buen día.

Estoy tratando de hacer una pagina de ventas donde en el index.php se muestran todos los productos y al hacer click a cualquier producto aparece una ventada modal mostrando información especifica de dicho producto de esta manera:

introducir la descripción de la imagen aquí

La cosa es que de la manera en que lo estoy haciendo, necesito pasar la id del producto por la URL cada vez que el usuario de click en el nombre del producto de esta manera:

<?php foreach($productos as $producto):?>
                <section>
                    <div class="div-image-product">
                        <img src=<?php echo $producto['imagen']?> alt="">
                    </div>
                    <div class="div-tittle-product">
                        <a href="index.php?id=<?php echo $producto['id']; echo'&p='.pagina_actual();?>" class="abrir-vista-producto"><p><?php echo $producto['nombre']?></p></a>
                    </div>
                    <div class="div-price-product">
                        <label><input type="checkbox" id="chbx_añadir_carrito">Añadir</label>
                        <p><?php echo '$'.$producto['precio']?></p>
                    </div>                            
                </section>
 <?php endforeach;?>

Donde paso el id de cada producto por $GET es el <a> del div con la clase "div-tittle-product".

Mi problema esta en que cada vez que hago click en algún producto no se pasan las variables por la URL, y la ventana modal aparece y desaparece por si misma en fracciones de segundo, debido a que se recarga la pagina al pulsar el enlace. Este es mi código JQuery:

$(document).ready(function() {
  $(".abrir-vista-producto").on("click", function(e) {
    $(".modalDialog").addClass("active");
    //e.preventDefault();
  });

  $(".close").on("click", function() {
    $(".modalDialog").removeClass("active");
  });      
});

La única manera en que no desaparece la ventana modal, es des-comentando la linea 4 del código JQuery, y de esta manera si me aparecen las variables $GET en la URL. Pero al hacer esto da igual que producto seleccione, siempre me muestra el ultimo producto de la pagina en la ventana modal.

Mi pregunta es como hago para que aparezca la información especifica de cada producto que seleccione en la ventana modal. Tengo entendido que Ajax sirve para hacer peticiones sin recargar la pagina, pero la verdad soy muy nuevo en esto del desarrollo web y no tengo idea de como hacerlo. Espero y me puedan ayudar, gracias.

1
  • Sí quieres respuestas asíncronas, javascript asíncrono debe usar ;) AJAX Commented el 18 jul. 2018 a las 14:25

1 respuesta 1

1

Te doy una solución alternativa, en el foreach de los productos le agregaría un atributo data-id a cada checkbox de los productos con el id correspondiente, adicionalmente del data-toggle y data-target para que te abran el modal como corresponde.

Algo asi:

<label><input type="checkbox" data-toggle="modal" data-target="#exampleModal" data-id="<?php echo $producto['id']; ?>">Añadir</label>

El modal tendría el formulario correspondiente para que puedas hacer el submit para agregar los productos al carrito y en caso que el form no lo tenga le agregaría un input type hidden para poder pasar el id de producto.

Luego la lógica funcionaria de la siguiente manera, al apretar el botón de un producto, se actualiza el input type hidden dinamicamente con JS con el id de producto correspondiente y entonces luego al apretar el botón añadir del modal se submitea ese formulario al que se le asigno el id de producto.

Aca te dejo un ejemplo:

$('#exampleModal').on('show.bs.modal', function (e) {
  var id = $(e.relatedTarget).data("id");
  console.log(id)

  //le asignamos el id correspondiente al input type hidden del formulario del modal.
  $("#exampleModal").find("input[name='id_producto']").val(id);
})

$('#submit').click(function(e){
  //butmiteas el form;
  $("#form").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            <form action="#" id="form">
                <input type="hidden" name="id_producto">
            </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="submit">Añadir</button>
            </div>
        </div>
    </div>
</div>


<label><input type="checkbox" data-toggle="modal" data-target="#exampleModal" data-id="15">Añadir</label>

espero que te sea de ayuda

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.