1

Buen día ,

Estoy intentando hacer que al momento de seleccionar un producto se abra la ventana modal y me aparezca el producto seleccionado , pero no logro traer el id_codigo para que detecte que producto seleccionó.

Explico un poco de como funciona actualmente: El producto se muestra en el inicio, seleccionas el que te gustaría comprar, se abre la ventana modal pero no detectá el producto . Lo que busco es que muestre el producto seleccionado , de igual manera se muestre el precio y pueda seleccionar la opcíon de comprar.

Podrían comentarme cómo podría hacerlo? . Gracias

<?php
 session_start();
 if(isset($_SESSION['nombre'])) echo $_SESSION['nombre'];
 include('php/conexion.php');
 $registros1=mysqli_query($conexion,"select * from categorias order by categoria asc");
 $registros2=mysqli_query($conexion,"select id_producto, precio,id_categoria,id_subcategoria,cantidad from productos where inicio=1 AND cantidad!=-2 limit 0,12");
 

//DETALLE PRODUCTO

$registros4=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=1"); 
$fila4=mysqli_fetch_array($registros4);
$registros5=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=2"); 
$fila5=mysqli_fetch_array($registros5);
$registros6=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=3"); 
$fila6=mysqli_fetch_array($registros6);



?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <!-- click drecho -->
   <script type='text/javascript'>
    document.oncontextmenu = function(){return false}
</script>


<!-- PRODUCTOS-->


<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
<!--Ya-->
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/normalizar.css">
<link rel="stylesheet" href="css/hover-min.css">
<link href='https://fonts.googleapis.com/css?family=Ceviche+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="iconos/css/font-awesome.min.css">
<!-- comentarios -->
<link rel="stylesheet" href="comentarios/estilos_comentarios.css">
<!--comentario -->

<!-- --------------------------- stock -------------------------- -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.css">
<!-- --------------------------- stock -------------------------- -->

<style>
.ui-effects-transfer { 
border: 3px #666666 solid;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image:url(administracion/productos/imagenes/<?php if(mysqli_num_rows($registros4)>0)echo $fila4['nombre']; else echo "no-disponible.jpg"; ?>);
opacity:0.8;
}

.numero_carrito{
position:absolute; width:30px; height:30px; background-color: #FFF; border-radius:100%; margin-top:81px; margin-left:-41px; border: solid 2px #FF3366; text-align:center; color: #F00; font-weight:bold; padding:2.5px; font-size:14px; 
}

</style>

<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<!-- bootstrap -->

<!-- Empieza LightBox  -->
<link rel="stylesheet" href="lightbox/vlb_files1/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="lightbox/vlb_files1/visuallightbox.css" type="text/css" media="screen" />
<script src="lightbox/vlb_engine/visuallightbox.js" type="text/javascript"></script>
<script src="lightbox/vlb_engine/vlbdata1.js" type="text/javascript"></script>
<!-- Termina LightBox -->

<!-- comentarios -->
<!-- Start VideoLightBox.com HEAD section -->
<link rel="stylesheet" href="comentarios/index_videolb/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="comentarios/index_videolb/overlay-minimal.css"/>
<script src="comentarios/index_videolb/swfobject.js" type="text/javascript"></script>
<!-- End VideoLightBox.com HEAD section -->
<!-- comentarios -->

<script type="text/javascript">

function mostrar(){

 $("#texto").show("slow");  
 $("#b_mostrar").hide("fast");
 $("#b_ocultar").show("fast");  

}

function ocultar(){

 $("#texto").hide("slow");  
 $("#b_mostrar").show("fast");
 $("#b_ocultar").hide("fast");  

}

</script>

 
<!--TERMINA--->



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INICIO</title>
<link rel="stylesheet" href="iconos/css/font-awesome.min.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/normalizar.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/animate.css">
<link href='https://fonts.googleapis.com/css?family=Ceviche+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
<!-- bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<script src="lib/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">

<!-- bootstrap -->

<!--Registrar-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
      <!-- Custom styles for this template -->
    <link href="assets/css/sticky-footer-navbar.css" rel="stylesheet">


<script src="css/wow.min.js"></script>
<script>new WOW().init()</script>
<!--MENU-->
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
    <!--BANNER-->
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<!-- End WOWSlider.com HEAD section -->
</head>
<body>


<header>

  <br>
    <div class="main" style=" width:100%;">
    <?php
    while($fila2=mysqli_fetch_array($registros2)){
      $registros3=mysqli_query($conexion,"select nombre from imagenes where id_producto='$fila2[id_producto]' and prioridad=1");
        $fila3=mysqli_fetch_array($registros3);

    ?>
    <a href="#" data-toggle="modal" data-target="#add_data_Modal2">  <?php   $fila2['id_producto']; ?> <div id="i" class="productosmain hvr-buzz-out"><img src="administracion/productos/imagenes/<?php if(mysqli_num_rows($registros3)>0)echo $fila3['nombre'];  else echo "no-disponible.jpg"; ?>" width="100%" height="150" alt="imagen"><div class="precio"><?php echo "$".$fila2['precio']." MXN"; ?></div></div></a>

 <?php
    }
   cerrarconexion();
    ?>

    <!--carrito -->
    <div id="b"  class="carrito">
      <div  style=" width:50px; height:120px; float:left; padding:4px; background-color:#0052a5; border-radius:10px 0px 0px 10px; margin-left:-50px; cursor: pointer">
            
            <i style=" margin-top:33px; margin-left:200px; color:#FFF; font-size:35px" class="fa fa-shopping-basket" aria-hidden="true"></i>  
                
        </div>
        
        <!--numerito-->
        <?php 
      
      if(isset($_SESSION['cantidad_de_productos'])){
      
      ?>
        
        <div id="cantidad_de_productos" style="position:absolute; width:30px; height:30px; background-color: #FFF; border-radius:50%; margin-top:81px; margin-left:-41px; border: solid 2px #FF3366; text-align:center; color: #F00; font-weight:bold; padding:2.5px; font-size:14px;"><?php echo $_SESSION['cantidad_de_productos']; ?></div>
    
        
        <?php
      
      }
      
     
      ?>
        <!--numerito Muestra compra-->
        
        <div style="height:400px; padding:4px; overflow:auto" id="mostrar_compra">
            
        </div>
    </div>
    <!--carrito-->
       
       
       
<!--INICIA-->

<div id="add_data_Modal2" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button"  class="close" data-dismiss="modal">&times;</button>
    <h4  class="modal-title"></h4>
     <!-- Form Name -->
     </br>
     <div>
     </div>
     </div>
     <legend>Producto</legend>
  <?php  

echo $fila2['id_producto'];

?>
   <div class="modal-body">

   <form method="post" id="insert_form" action="#">
    <div class="form-group">
    <label class="col-md-3 control-label"></label>
            <div class="col-md-3 inputGroupContainer">
                <div class="input-group"> 
     </div>
     </div>
     </div>
                    <!-- Start css3menu.com HEAD section -->
    <link rel="stylesheet" href="CSS3 Menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->

<div style="max-width:-10px; margin:-100px auto 10px auto; padding-left:-90px">

</div>
<?php
if($fila3["cantidad"]!=-2){
?>

</div>

<div style="margin:45px auto 0px auto; max-width:900px">
<div style="float:left; margin-right:20px">
    
    <?php
           $registros3=mysqli_query($conexion,"select nombre from imagenes where id_producto='$fila2[id_producto]' and prioridad=1");
        $fila3=mysqli_fetch_array($registros3);
  $registros4=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=1"); 
$fila4=mysqli_fetch_array($registros4);
$registros5=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=2"); 
$fila5=mysqli_fetch_array($registros5);
$registros6=mysqli_query($conexion,"select nombre from imagenes where id_producto='$_GET[id_producto]' && prioridad=3"); 
$fila6=mysqli_fetch_array($registros6);
  ?>


<div style="margin:45px auto 0px auto; max-width:900px">
<div style="float:left; margin-right:20px">
<div id="a"><a class="vlightbox1" href="administracion/productos/imagenes/>" title="<?php echo utf8_encode($fila3['nombre']); ?>"><img width="330px" height="247px" src="administracion/productos/imagenes/<?php if(mysqli_num_rows($registros4)>0)echo $fila4['nombre']; else echo "no-disponible.jpg"; ?>"/></a></div>
</br>

</div>
<p style="font-size:30px; font-family:'Helvetica', cursive;">
<?php 
echo utf8_encode($fila3['nombre'])."</p>";
if($fila3["descargable"]==1) echo "<b>Producto Digital o con contenido descargable</b>"; 
?>

<form name="formu_compra">
<!--PRECIO DEL PRUCTO-->
<span style="font-size:30px; font-family:'Helvetica', cursive; color:#3B5998"><?php echo "$".$fila3['precio']; ?> MXN &nbsp;X&nbsp;&nbsp;

<input style="width:65px; color:#333" type="number" name="cantidad_producto" min="1" max="10" value="1">
<input type="hidden" name="nombre_producto" value="<?php echo utf8_encode($fila3['nombre']); ?>">
<input type="hidden" name="precio_producto" value="<?php echo $fila3['precio']; ?>">
<input type="hidden" name="id_producto" value="<?php echo $_GET["id_producto"]; ?>">

<!-- ---------------- Producto descargable ---------------------- -->
<input type="hidden" name="descargable" value="<?php echo $fila3["descargable"]; ?>"> 
<!-- ---------------- Producto descargable ---------------------- -->
<!--<button type="button" onClick="volar()" class="btn btn-primary">Comprar ahora</button>-->

<!-- ----------------stock-------------------------- -->
<?php
if($fila3["cantidad"]>0 || $fila3["cantidad"]==-1){
?>
    <button type="button" onClick="comprobar_stock('<?php echo $fila3["cantidad"]; ?>')" class="btn btn-primary">Comprar ahora</button>
<?php
}else{ 

    echo "¡Agotado!";
    echo "</span>";
    
    ?>
    <div onClick="aviso_stock('<?php echo $fila3["id_producto"]; ?>')" style="color:orange;cursor:pointer">
        Avísame cuando haya stock
    </div>
    <?php
    
}
?>
<!-- ----------------stock-------------------------- -->
</span>
</form>

<!-- ----------------stock-------------------------- -->
<?php
if($fila3["cantidad"]<=10 && $fila3["cantidad"]>0){
    
    echo "<strong><span style='color:orange'>¡ Quedan solo ".$fila3["cantidad"]." unidades !</span></strong>";
}
?>
<!-- ----------------stock-------------------------- -->


<p style="font-size:25px; font-family:'Helvetica', cursive;">&nbsp;&nbsp;&nbsp;* Características:</p>
<div>
<?php
$array=explode(" ",utf8_encode($fila3['descripcion']));

if(count($array)<35){
    
    for($i=0;$i<count($array);$i++){
    
        echo $array[$i]." ";
    
    }
    
}

else{
    
    for($i=0;$i<35;$i++){
    
        echo $array[$i]." ";
    
        }
    echo "...";
 ?>
    </div>
    <div id="texto" style="display:none">
    <?php
    for($i=35;$i<count($array);$i++){
    
        echo $array[$i]." ";
    
        }

    ?>
</div>
</br>

<?php
}
 ?>

<!-- comentarios -->
<?php 
include("comentarios/index_comentarios.php");
?>
<!-- comentarios -->

</div>
</div>
<?php
cerrarconexion();
?>

<div class="limpiar"></div>

</div>



<?php
}
?>

    <?php 
    
    if(isset($_SESSION['cantidad_de_productos'])){
    
    ?>
    
    <div id="cantidad_de_productos" style="position:absolute; width:30px; height:30px; background-color: #FFF; border-radius:100%; margin-top:81px; margin-left:-41px; border: solid 2px #FF3366; text-align:center; color: #F00; font-weight:bold; padding:2.5px; font-size:14px;"><?php echo $_SESSION['cantidad_de_productos']; ?></div>

    
    <?php
    
    }
    
    else {
    ?>
    
    <div id="cantidad_de_productos"><?php if(isset($_SESSION['cantidad_de_productos'])){ echo $_SESSION['cantidad_de_productos']; } ?></div>
    
    <?php
    }
    
    ?>
    <!--numerito Tamaño d-->
    
    <div style="height:400px; padding:4px; overflow:auto" id="mostrar_compra">
        
    </div>
</div>
<!--carrito-->
<br>
<br>
<br>
<br>
<br>
<br>
     <br />
 


<script type="text/javascript" src="clientes/inicio_de_sesion/inicio_de_sesion.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="compra/compra.js"></script>
<!-- comentarios -->
<script type="text/javascript" src="comentarios/comentarios.js"></script>
<!-- comentarios -->

<!-- --------------------------- stock -------------------------- -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.js"></script>
<!-- --------------------------- stock -------------------------- -->



    
    
    <script type="text/javascript" src="clientes/inicio_de_sesion/inicio_de_sesion.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="compra/compra.js"></script>
    <script src="proceso_compra.js"></script>
   
    </body>
    <script type="text/javascript" src="clientes/registro_clientes.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


    </html>

1 respuesta 1

1

Hola dice que quieres pasar solo el id del producto al modal bueno yo lo haría así

Primero haría include a la modal después recorro el listado de productos y su codigo,titulo, etc lo almaceno en un data.

<?php include("modal_producto.php"); ?>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" 
data-target="#MODALPRODUCTO"
data-codigo_producto="<?php echo $datos_consulta["codigo"]; ?>"
data-codigo_titulo="<?php echo $datos_consulta["titulo"]; ?>">Seleccionar
</button>

En el JS llamas al modal por su id y pasas las variables del data.

$('#MODALPRODUCTO').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var codigo_expediente= button.data('codigo_expediente')
    var codigo_titulo = button.data('codigo_titulo')
    $('#codigo_expediente').val(codigo_expediente)
    $('#codigo_titulo').val(codigo_titulo)
})

En la venta modal muestras los datos almacenados del data en los id del los input ahí lo puede dar estilo a los input o es depende cada uno.

<div id="MODALPRODUCTO" class="modal fade" aria-hidden="true" data-backdrop="static" data-keyboard="false">>
        <div class="modal-dialog">
            <div class="modal-content">
        
        <div class="modal-header">                      
                        <h4 class="modal-title">Producto</h4>
<button type="button" class="btn btn-danger" data-dismiss="modal"">
CERRAR
</button>

                    </div>
                    <div class="venta-modal-tramite">
<input type="text" name="codigo_producto" id="codigo_producto" >
<input type="text" name="codigo_titulo" id="codigo_titulo" >
            
                    </div>
                    
            </div>
        </div>
</div>

Espero haberte ayudado. Saludos.

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.