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>