0

Estoy creando una pagina web e-commerce, ya esta toda lista, pero note que en el momento de agregar un producto al carrito te redirige al inicio de la seccion productos (osea en el producto 1) en la pc no afecta casi nada ya que los productos entran todos en la pantalla, pero si estas en dispositivo mobil y agregaste 1 producto que esta muy abajo, esto seria muy tedioso, al principio se me ocurrio agregar en el action del form una redirecion al id del producto y asi evitar ir al inicio, pero pero esta redireccion queda muy raro y hasta puede llegar a marear al cliente. Entonces intente hacerlo con ajax, ya revise otros post y hasta vi tutoriales pero ninguno me sirve. Lo que quiero es que al presionar Agregar al carrito, se agregue. Les dejo partes del codigo:

productos:

<?php include 'ff.php'; ?>
<div class="container">
        <div class="back-container"><button class ="back" onclick="location.href='alhuevo.php'"><i class="fa-solid fa-arrow-left-long"></i></button></div>
            <section class="Productos">
                <article class="fideos-grimaldi">
                        <h1>Cortos</h1>      
                        <div class="productos">
                        <?php
                            $select_products = $connect->prepare("SELECT * FROM `productos` WHERE categoria='fgcorto'") or die('query failed');
                            $select_products->execute();
                            $list_products = $select_products->fetchAll(PDO::FETCH_ASSOC);
                            foreach($list_products as $producto){
                            include 'productact.php'; } ?>                     
                        </div>
                </article>       
            </section>
        </div>

addCart.php (donde se encuentran las sesiones para agregar al carrito):

     <?php
if(!isset($_SESSION)) { 
    session_start(); 
  };
  include 'connect.php';
  include 'config.php';

if (isset($_POST['id'])) {
            if(is_numeric(openssl_decrypt( $_POST['id'], COD, KEY))){
                $ID = openssl_decrypt( $_POST['id'], COD, KEY);                        
            }else{ echo '<script> alert("ID incorrecto"); </script>'; exit;
            }
            if($_POST['cantidad']<1){
            $CANTIDAD = 1;
            }else{                          
                $CANTIDAD = $_POST['cantidad'];
            }
            if(!isset($_SESSION['cart'])){
                $producto=array(
                    'ID'=>$ID,
                    'CANTIDAD'=>$CANTIDAD,
                );
                $_SESSION['cart'][0] = $producto;
                echo 
                '<div class="alert-co" id="alert-co">Producto Añadido Exitosamente</div>';        
            }else{
                $idProductos=array_column($_SESSION['cart'],"ID");
                if(in_array($ID, $idProductos)){
                    echo 
                    '<div class="alert-inc" id="alert-inc">El Producto Ya Ha Sido Agregado</div>';
                }else{
                    $producto=array(
                        'ID'=>$ID,
                        'CANTIDAD'=>$CANTIDAD,
                    );
                    array_push($_SESSION['cart'], $producto);  
                    echo 
                    '<div class="alert-co" id="alert-co">Producto Añadido Exitosamente</div>';        
                }
            }
        }
?>

productact.php (donde estan cosas generales y form para los productos) (el alert luego de success:function() fue para comprobar si el id llegaba correctamente):

<?php 
$id = $producto['id'];
$codigo = $producto['codigo'];
$imagen = "media/productos/$codigo.png";
$nombre = $producto['nombre'];                   
$precio = $producto['precio']; 
$bulto = $producto['bulto']                
?>
<div class="p" id="<?php echo $id?>">
    <img src="<?php echo $imagen; ?>" alt="<?php echo $nombre?>" title="<?php echo $nombre?>">
    <p ><?php echo $nombre; ?></p>
    <form action="backend/addCart.php" class="formadd" id="<?php echo $id?>" method="post">
        <?php if(isset($_SESSION['email'])){?>
            <p>(x <?php echo $bulto; ?>)</p>
            <p class="precioo pps">$<?php echo number_format($precio, 0, ',', '.') ?></p>                                    
            <input type="hidden" name="id" value="<?php echo openssl_encrypt($id,COD,KEY);?>">
            <input class="cantidad pps" type="number" min="1" name="cantidad" class="cantidad" placeholder="1">   
            <div class="cc"><button type="submit" name="btnCart" value="Add" class="c pps">Agregar Al carrito</button></div>
            <?php
            } 
            ?>
    </form>
</div>
<script>
    $('body').on('submit', '.formadd', function(ev){
   var id = $(this).attr('id');
      //FUNCION AJAX
      $.ajax({
        type: $(id).attr('method'),
        url: $(id).attr('action'),
        data: $(id).serialize(),

            success: function(data) {
            $('.cartnro').load(' .cartnro'); // Le hace un reload al nro de productos en el carrito(se encuentra en el header).
            },
            error: function() {
                alert('No se pudo agregar al carrito, intente mas tarde');
            }
        });
        ev.preventDefault();
    });
</script>

2 respuestas 2

0

Lo que puedes hacer es enviar el formulario mediante Ajax para evitar el evento de recarga y mostrar un Alert con un mensaje al momento de agregar algo, tu función Ajax es incorrecta, por eso no te funciona, te dejo un ejemplo:

//DETECTA EL EVENTO SUBMIT DEL FORMULARIO CON CLASE FORMPRODUCT
$('body').on('submit', '.formProduct', function(event){
//GUARDAMOS EL ID DINÁMICO DEL FORMULARIO QUE HIZO SUBMIT
   var id = $(this).attr('id');
      //FUNCION AJAX
      $.ajax({
        //TOMA LOS ATRIBUTOS DEL FORM CON JQUERY
        //OBTENEMOS EL METODO DE ENVIO DEL FORMULARIO
        type: $(id).attr('method'),
        //OBTENEMOS LA RUTA DE ENVIO DEL FORMULARIO
        url: $(id).attr('action'),
        //TODOS LOS CAMPOS CAPTURADOS EN EL FORMULARIO
        data: $(id).serialize(),
        //FUNCION EJECUTADA ANTES DE ENVIAR
        beforeSend: function() {
          alert('espere..');
        },
        //FUNCION EJECUTADA SI EL ENVIO ES CORRECTO
        success: function(data) {
          alert('Producto agregado exitosamente, siga comprando')
        },
        //FUNCION EJECUTADA AL HABER UN ERORR
        error: function() {
          alert('No se pudo agregar al carrito, intente mas tarde');
        }
      });
      ev.preventDefault(); //EVITAMOS EL EVENTO DE RECARGA AL ENVIAR FORMULARIO

En tu formulario no necesitas ejecutar una función onsubmit, con jquery detectamos ese evento. Es muy importante agregarle un id para acceder a el mediante jquery, un method, un action y los name que identifique los campos en donde se encuentra la información a mandar, ya que con esos capturaras con php los datos enviados.

< div class="p" id="<?php echo $id?>">
  < img src="<?php echo $imagen; ?>" alt="<?php echo $nombre?>" title="<?php echo $nombre?>">
    < p>
      <?php echo $nombre; ?>
      < /p>
        <!--AQUI LOS ATRIBUTOS IMPORTANTES DEL FORMULARIO-->
        < form id="producto" method="post" action="agrega la ruta PHP">
          <?php if(isset($_SESSION['email'])){?>
          < p> (x
            <?php echo $bulto; ?>)
            < /p>
              < p class="precioo pps"> $
                <?php echo number_format($precio, 0, ',', '.') ?>
                < /p>
                  < input type="hidden" name="id" id="id <?php echo $id ?>" value="<?php echo openssl_encrypt($id,COD,KEY);?>">
                    < input class="cantidad pps" type="number" min="1" name="cantidad" id="cantidad <?php echo $id ?>" class="cantidad" placeholder="1">
                      < div class="cc">
                        < button type="submit" name="btnCart" value="Add" class="c pps"> Agregar Al carrito
                          < /button>
                            </div>
                            <?php
            } 
            ?>
                              < /form>
                                < / div>

Para tu archivo PHP capturamos los datos enviados

//CAPTURAMOS EL PRIMER DATO, DONDE EL NAME ES ID, COMPROBADO POR ISSET
if (isset($_POST['id'])) {
  switch ($_POST['id']) {
    case 'Add':
      if (is_numeric(openssl_decrypt($_POST['id'], COD, KEY))) {
        $ID = openssl_decrypt($_POST['id'], COD, KEY);
      } else {
        echo 'ID CORRECTO';
        exit;
      }
      if ($_POST['cantidad'] < 1) {
        $CANTIDAD = 1;
      } else {
        $CANTIDAD = $_POST['cantidad'];
      }
      if (!isset($_SESSION['cart'])) {
        $producto = array(
          'ID' => $ID,
          'CANTIDAD' => $CANTIDAD,
        );
        $_SESSION['cart'][0] = $producto;
        $mensajeCo = "Producto Añadido Exitosamente";
      } else {
        $idProductos = array_column($_SESSION['cart'], "ID");
        if (in_array($ID, $idProductos)) {
          $mensajeInc = "El Producto Ya Ha Sido Agregado";
        } else {
          $producto = array(
            'ID' => $ID,
            'CANTIDAD' => $CANTIDAD,
          );
          array_push($_SESSION['cart'], $producto);
          $mensajeCo = "Producto Añadido Exitosamente";
        }
      }
      break;

En este archivo PHP donde recojes los datos, ordenalos, no le entendí casi nada, indenta tu código y hazlo con scripts separados, los mensajes los puedes imprimir con echo solamente, y en ajax los procesas en un alert.Dime si te funciono

10
  • hola buenas, estoy probando el codigo pero como podria hacer para que ajax obtenga este id <form action="backend/addCart.php" id="formadd<?php echo $id?>" method="post">. Por que el problema es que si mi id seria solamente formadd , en el momento de agregar un producto al carrito solo se agrega 1 (el primero que detecte con ese id) el 30 jun. 2022 a las 0:17
  • Simplemente cambia el nombre, yo le puse producto cambialo por formadd el 30 jun. 2022 a las 14:43
  • sisi lo se pero el form tiene un foreach arriba por lo tanto si le pongo simplemente formadd solo 1 producto obtendría ese id, por eso quería saber como ponerle formadd y que tenga la variable id de php, así cada producto tiene por ejemplo "formadd53" y otro "formadd51" el 30 jun. 2022 a las 15:21
  • Agregale a tus form una clase, mediante la clase obtenemos el id: el 30 jun. 2022 a las 15:27
  • He modificado el AJax, donde a los formularios agrégales la misma clase a todos formProduct u otra pero que sea la misma clase a todos, con la función detectamos el submit del formulario por clase y obtenemos de ese el id, almacenamos el id y lo pasamos a los parametros de AJax, espero con esto se resuelva. el 30 jun. 2022 a las 15:44
0

Ya pude solucionarlo el ajax quedo asi por si alguien lo necesita:

$('.formadd').on('submit', function(ev) {   
    var id2 = $(this);   
    $.ajax({
        type: $(id2).attr('method'),
        url: $(id2).attr('action'),
        data: $(id2).serialize(),
        success: function(data) {               
        $('.cantidad').val('');
        $('.cartbasket').load(' .cartbasket');
        $('.alert-co').removeClass('hide')
        },
        error: function() {
        $('.alert-inc').removeClass('hide')
        }
    });
    ev.preventDefault();
});

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.