CARRITO SESSION CHAT GPT JS PHP MYSQL

haz un carrito de compras con localStorage de javascript elegir
productos desde una lista en mysql y php pdo hacer en archivos
separados
¡Claro! Aquí te muestro cómo puedes hacerlo en tres archivos
separados: uno para la página HTML, otro para el archivo PHP y otro
para el archivo de JavaScript que utilizará localStorage.

index.html

html
Copy code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Carrito de compras con localStorage</title>
    <script src="carrito.js"></script>
</head>
<body>
    <h1>Carrito de compras</h1>
    <table id="productos">
        <tr>
            <th>Nombre</th>
            <th>Precio</th>
            <th>Cantidad</th>
            <th>Acciones</th>
        </tr>
        <?php
            // Conexión a la base de datos
            $pdo = new
PDO('mysql:host=localhost;dbname=tu_base_de_datos', 'tu_usuario',
'tu_contraseña');

            // Consulta los productos en la base de datos
            $stmt = $pdo->prepare("SELECT * FROM productos");
            $stmt->execute();
            $productos = $stmt->fetchAll(PDO::FETCH_ASSOC);

            // Mostrar cada producto en la tabla
            foreach ($productos as $producto) {
                echo '<tr>';
                echo '<td>' . $producto['nombre'] . '</td>';
                echo '<td>$' . $producto['precio'] . '</td>';
                echo '<td><input type="number" value="1" min="1"
max="99"></td>';
                echo '<td><button onclick="agregarProducto(' .
$producto['id'] . ', \'' . $producto['nombre'] . '\', ' .
$producto['precio'] . ')">Agregar al carrito</button></td>';
                echo '</tr>';
            }
        ?>
    </table>

    <h2>Carrito</h2>
    <ul id="carrito">
    </ul>

    <button onclick="vaciarCarrito()">Vaciar carrito</button>
</body>
</html>
carrito.php

php
Copy code
<?php
session_start();

if (!isset($_SESSION['carrito'])) {
    $_SESSION['carrito'] = array();
}

if (isset($_POST['id'])) {
    // Agregar el producto al carrito
    $producto = array(
        'id' => $_POST['id'],
        'nombre' => $_POST['nombre'],
        'precio' => $_POST['precio'],
        'cantidad' => $_POST['cantidad']
    );

    array_push($_SESSION['carrito'], $producto);
}

if (isset($_POST['accion'])) {
    // Realizar alguna acción en el carrito
    switch ($_POST['accion']) {
        case 'vaciar':
            unset($_SESSION['carrito']);
            break;
    }
}

// Devolver el contenido del carrito
echo json_encode($_SESSION['carrito']);
carrito.js

javascript
Copy code
function agregarProducto(id, nombre, precio) {
    // Obtener la cantidad del producto seleccionado
    var cantidad = parseInt(document.querySelector('#productos
tr:nth-child(' + (id + 1) + ') input').value);

    // Enviar la solicitud POST al archivo PHP para agregar el
producto al carrito
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            mostrarCarrito();
        }
    };
    xhttp.open("POST", "carrito.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("




jose fernandez
hacer el carrito.js con fetch y javascript puto
¡Claro! Aquí te dejo el código para el archivo carrito.js usando fetch
y JavaScript puro:

javascript
Copy code
function agregarProducto(id, nombre, precio) {
  // Obtener la cantidad del producto seleccionado
  const cantidad = parseInt(document.querySelector(`#productos
tr:nth-child(${id + 1}) input`).value);

  // Enviar la solicitud POST al archivo PHP para agregar el producto al carrito
  fetch('carrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `id=${id}&nombre=${nombre}&precio=${precio}&cantidad=${cantidad}`
  })
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
}

function vaciarCarrito() {
  // Enviar la solicitud POST al archivo PHP para vaciar el carrito
  fetch('carrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'accion=vaciar'
  })
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
}

function mostrarCarrito(carrito) {
  // Limpiar el contenido del carrito
  const carritoElement = document.querySelector('#carrito');
  carritoElement.innerHTML = '';

  // Mostrar los productos en el carrito
  carrito.forEach(producto => {
    const item = document.createElement('li');
    item.innerHTML = `${producto.nombre} x ${producto.cantidad} =
$${producto.precio * producto.cantidad}`;
    carritoElement.appendChild(item);
  });
}

// Cargar el contenido del carrito al cargar la página
fetch('carrito.php')
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
Ten en cuenta que este código asume que el archivo carrito.php
devuelve una respuesta en formato JSON con el contenido actual del
carrito en el servidor.





jose fernandez
haz el codigo del carrito.php
¡Por supuesto! Aquí te dejo el código del archivo carrito.php:

php
Copy code
<?php
// Iniciar sesión
session_start();

// Verificar si el carrito está vacío
if (!isset($_SESSION['carrito'])) {
  $_SESSION['carrito'] = array();
}

// Agregar un producto al carrito
if (isset($_POST['id']) && isset($_POST['nombre']) &&
isset($_POST['precio']) && isset($_POST['cantidad'])) {
  $id = $_POST['id'];
  $nombre = $_POST['nombre'];
  $precio = $_POST['precio'];
  $cantidad = $_POST['cantidad'];

  // Verificar si el producto ya está en el carrito
  if (isset($_SESSION['carrito'][$id])) {
    $_SESSION['carrito'][$id]['cantidad'] += $cantidad;
  } else {
    $_SESSION['carrito'][$id] = array(
      'nombre' => $nombre,
      'precio' => $precio,
      'cantidad' => $cantidad
    );
  }

  // Devolver el contenido actual del carrito
  header('Content-Type: application/json');
  echo json_encode($_SESSION['carrito']);
  exit;
}

// Vaciar el carrito
if (isset($_POST['accion']) && $_POST['accion'] === 'vaciar') {
  unset($_SESSION['carrito']);

  // Devolver el contenido actual del carrito
  header('Content-Type: application/json');
  echo json_encode($_SESSION['carrito']);
  exit;
}

// Devolver el contenido actual del carrito
header('Content-Type: application/json');
echo json_encode($_SESSION['carrito']);
exit;
Este código asume que los productos están almacenados en una base de
datos MySQL y que se puede acceder a ella mediante PDO. También asume
que la tabla que contiene los productos tiene los campos id, nombre y
precio. Asegúrate de modificar la conexión a la base de datos en la
sección correspondiente de este archivo.





jose fernandez
agregar al boton de actualizar cantidad en el carrito hacer con fetch
en el carrito.php el actualizar cantidad

2 / 2

¡Por supuesto! Aquí te dejo el código actualizado para el archivo
carrito.js que incluye una función para actualizar la cantidad de un
producto en el carrito usando fetch y JavaScript puro:

javascript
Copy code
function agregarProducto(id, nombre, precio) {
  // Obtener la cantidad del producto seleccionado
  const cantidad = parseInt(document.querySelector(`#productos
tr:nth-child(${id + 1}) input`).value);

  // Enviar la solicitud POST al archivo PHP para agregar el producto al carrito
  fetch('carrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `id=${id}&nombre=${nombre}&precio=${precio}&cantidad=${cantidad}`
  })
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
}

function actualizarCantidad(id, cantidad) {
  // Enviar la solicitud POST al archivo PHP para actualizar la
cantidad del producto en el carrito
  fetch('carrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `id=${id}&cantidad=${cantidad}`
  })
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
}

function vaciarCarrito() {
  // Enviar la solicitud POST al archivo PHP para vaciar el carrito
  fetch('carrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'accion=vaciar'
  })
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
}

function mostrarCarrito(carrito) {
  // Limpiar el contenido del carrito
  const carritoElement = document.querySelector('#carrito');
  carritoElement.innerHTML = '';

  // Mostrar los productos en el carrito
  carrito.forEach(producto => {
    const item = document.createElement('li');
    item.innerHTML = `${producto.nombre} x <input type="number"
value="${producto.cantidad}" min="1" max="100"
onchange="actualizarCantidad(${producto.id}, this.value)" /> =
$${producto.precio * producto.cantidad}`;
    carritoElement.appendChild(item);
  });
}

// Cargar el contenido del carrito al cargar la página
fetch('carrito.php')
  .then(response => response.json())
  .then(data => {
    mostrarCarrito(data);
  })
  .catch(error => console.error(error));
Y aquí está el código actualizado para el archivo carrito.php que
incluye la funcionalidad para actualizar la cantidad de un producto en
el carrito:

php
Copy code
<?php
// Iniciar sesión
session_start();

// Verificar si el carrito está vacío
if (!isset($_SESSION['carrito'])) {
  $_SESSION['carrito'] = array();
}

// Agregar un producto al carrito
if (isset($_POST['id']) && isset($_POST['nombre']) &&
isset($_POST['precio']) && isset($_POST['cantidad'])) {
  $id = $_POST['id'];
  $nombre = $_POST['nombre'];
  $precio = $_POST['precio'];
  $cantidad = $_POST['cantidad'];

  // Verificar si el producto ya está en el carrito
  if (isset($_SESSION['carrito'][$id])) {





jose fernandez
hacer de nuevo carrito.php
¡Claro! Aquí está el código para el archivo carrito.php que incluye la
funcionalidad para agregar, actualizar y vaciar productos en el
carrito usando PHP PDO y MySQL:

php
Copy code
<?php
// Conexión a la base de datos
$host = 'localhost';
$dbname = 'mi_base_de_datos';
$user = 'mi_usuario';
$password = 'mi_contraseña';

try {
  $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
} catch (PDOException $e) {
  die('Error de conexión: ' . $e->getMessage());
}

// Iniciar sesión
session_start();

// Verificar si el carrito está vacío
if (!isset($_SESSION['carrito'])) {
  $_SESSION['carrito'] = array();
}

// Agregar un producto al carrito
if (isset($_POST['id']) && isset($_POST['nombre']) &&
isset($_POST['precio']) && isset($_POST['cantidad'])) {
  $id = $_POST['id'];
  $nombre = $_POST['nombre'];
  $precio = $_POST['precio'];
  $cantidad = $_POST['cantidad'];

  // Verificar si el producto ya está en el carrito
  if (isset($_SESSION['carrito'][$id])) {
    // Actualizar la cantidad del producto existente en el carrito
    $_SESSION['carrito'][$id]['cantidad'] += $cantidad;
  } else {
    // Agregar un nuevo producto al carrito
    $_SESSION['carrito'][$id] = array(
      'nombre' => $nombre,
      'precio' => $precio,
      'cantidad' => $cantidad
    );
  }
}

// Actualizar la cantidad de un producto en el carrito
if (isset($_POST['id']) && isset($_POST['cantidad'])) {
  $id = $_POST['id'];
  $cantidad = $_POST['cantidad'];

  if ($cantidad <= 0) {
    // Eliminar el producto del carrito si la cantidad es cero o menor
    unset($_SESSION['carrito'][$id]);
  } else {
    // Actualizar la cantidad del producto en el carrito
    $_SESSION['carrito'][$id]['cantidad'] = $cantidad;
  }
}

// Vaciar el carrito
if (isset($_POST['accion']) && $_POST['accion'] == 'vaciar') {
  $_SESSION['carrito'] = array();
}

// Obtener los productos en el carrito
$carrito = array();
$total = 0;

foreach ($_SESSION['carrito'] as $id => $producto) {
  $nombre = $producto['nombre'];
  $precio = $producto['precio'];
  $cantidad = $producto['cantidad'];

  // Obtener el precio del producto desde la base de datos
  $stmt = $pdo->prepare('SELECT precio FROM productos WHERE id = ?');
  $stmt->execute([$id]);
  $producto = $stmt->fetch(PDO::FETCH_ASSOC);

  if ($producto) {
    $precio = $producto['precio'];
    $total += $precio * $cantidad;
  }

  $carrito[] = array(
    'id' => $id,
    'nombre' => $nombre,
    'precio' => $precio,
    'cantidad' => $cantidad
  );
}

// Devolver los productos en el carrito como JSON
header('Content-Type: application/json');
echo json_encode($carrito);
Recuerda reemplazar las credenciales de la base de datos con las tuyas
propias. También es importante tener una tabla llamada "productos"





jose fernandez
mostrar el carrito en una table html hacer en el const item =
document.createElement('td');
¡Claro! Aquí está el código que puedes agregar dentro del bloque
success de la función actualizarCarrito() para mostrar el carrito en
una tabla HTML:

javascript
Copy code
// Crear la tabla HTML
const tabla = document.createElement('table');
tabla.classList.add('carrito');

// Crear la cabecera de la tabla
const cabecera = document.createElement('tr');
const cabeceraItems = document.createElement('th');
cabeceraItems.textContent = 'Producto';
cabecera.appendChild(cabeceraItems);

const cabeceraPrecio = document.createElement('th');
cabeceraPrecio.textContent = 'Precio';
cabecera.appendChild(cabeceraPrecio);

const cabeceraCantidad = document.createElement('th');
cabeceraCantidad.textContent = 'Cantidad';
cabecera.appendChild(cabeceraCantidad);

const cabeceraTotal = document.createElement('th');
cabeceraTotal.textContent = 'Total';
cabecera.appendChild(cabeceraTotal);

tabla.appendChild(cabecera);

// Crear las filas de la tabla
carrito.forEach((producto) => {
  const fila = document.createElement('tr');

  const item = document.createElement('td');
  item.textContent = producto.nombre;
  fila.appendChild(item);

  const precio = document.createElement('td');
  precio.textContent = producto.precio;
  fila.appendChild(precio);

  const cantidad = document.createElement('td');
  const cantidadInput = document.createElement('input');
  cantidadInput.type = 'number';
  cantidadInput.min = 1;
  cantidadInput.value = producto.cantidad;
  cantidadInput.dataset.id = producto.id;
  cantidad.appendChild(cantidadInput);
  fila.appendChild(cantidad);

  const total = document.createElement('td');
  total.textContent = producto.precio * producto.cantidad;
  fila.appendChild(total);

  tabla.appendChild(fila);
});

// Agregar la tabla al contenedor del carrito
const contenedor = document.getElementById('carrito-contenedor');
contenedor.innerHTML = '';
contenedor.appendChild(tabla);
Este código crea una tabla HTML con cuatro columnas (Producto, Precio,
Cantidad y Total) y agrega una fila por cada producto en el carrito.
También crea un campo de entrada para actualizar la cantidad de cada
producto en el carrito. Al actualizar la cantidad, el total se
recalcula automáticamente y se muestra en la tabla.

Recuerda que debes tener un elemento HTML con el ID
"carrito-contenedor" en tu página HTML para que funcione
correctamente.





jose fernandez
hacerlo de otra forma  de mostrar las filas en la tabla con
document.getElementById
¡Claro! En lugar de crear los elementos HTML desde cero, puedes crear
una cadena de texto con el HTML de la tabla y luego agregarla al
contenedor del carrito usando innerHTML. Aquí te muestro cómo hacerlo:

javascript
Copy code
// Crear la tabla HTML
let tablaHTML = `
  <table class="carrito">
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
`;

// Crear las filas de la tabla
carrito.forEach((producto) => {
  tablaHTML += `
    <tr>
      <td>${producto.nombre}</td>
      <td>${producto.precio}</td>
      <td>
        <input type="number" min="1" value="${producto.cantidad}"
data-id="${producto.id}">
      </td>
      <td>${producto.precio * producto.cantidad}</td>
    </tr>
  `;
});

// Cerrar la tabla HTML
tablaHTML += '</table>';

// Agregar la tabla al contenedor del carrito
const contenedor = document.getElementById('carrito-contenedor');
contenedor.innerHTML = tablaHTML;
Este código genera una cadena de texto que representa el HTML de la
tabla y luego la agrega al contenedor del carrito usando innerHTML. La
ventaja de hacerlo de esta manera es que el código es más compacto y
legible que crear los elementos HTML uno por uno. Sin embargo, es
importante tener en cuenta que cuando usas innerHTML, estás insertando
HTML sin procesar en tu página, lo que puede ser un riesgo de
seguridad si no se maneja adecuadamente.





jose fernandez
hacer lo anterior de la tabla pero conteniendo lo siguiente
`${producto.nombre} x <input type="number"
value="${producto.cantidad}" min="1" max="100"
onchange="actualizarCantidad(${producto.id}, this.value)" /> =
$${producto.precio * producto.cantidad}`;
¡Por supuesto! Aquí te muestro cómo modificar el código anterior para
que la cantidad se muestre junto al nombre del producto y se llame a
la función actualizarCantidad() cuando se cambia el valor del campo de
entrada:

javascript
Copy code
// Crear la tabla HTML
let tablaHTML = `
  <table class="carrito">
    <tr>
      <th>Producto</th>
      <th>Precio</th>
      <th>Cantidad</th>
      <th>Total</th>
    </tr>
`;

// Crear las filas de la tabla
carrito.forEach((producto) => {
  tablaHTML += `
    <tr>
      <td>${producto.nombre} x <input type="number"
value="${producto.cantidad}" min="1" max="100"
onchange="actualizarCantidad(${producto.id}, this.value)" /></td>
      <td>$${producto.precio}</td>
      <td>
        <input type="number" min="1" value="${producto.cantidad}"
data-id="${producto.id}">
      </td>
      <td>$${producto.precio * producto.cantidad}</td>
    </tr>
  `;
});

// Cerrar la tabla HTML
tablaHTML += '</table>';

// Agregar la tabla al contenedor del carrito
const contenedor = document.getElementById('carrito-contenedor');
contenedor.innerHTML = tablaHTML;
En este código, el nombre del producto y la cantidad se concatenan en
la primera celda de la fila usando la sintaxis de plantillas de
cadenas. Además, se agrega un atributo onchange al campo de entrada de
la cantidad para llamar a la función actualizarCantidad() cuando se
cambia el valor. Esta función aún no está definida en este código,
pero puedes agregarla después para que actualice la cantidad del
producto en el carrito.





jose fernandez
hacer de nuevo el carrito.js con lo ultimo hecho
¡Claro! Aquí está el código actualizado del archivo carrito.js que
incluye la modificación que hicimos en la tabla:

javascript
Copy code
// Obtener el contenedor del carrito
const contenedorCarrito = document.querySelector('#carrito-contenedor');

// Función para actualizar la cantidad de un producto en el carrito
function actualizarCantidad(idProducto, cantidad) {
  // Buscar el producto en el carrito por su ID
  const productoEnCarrito = carrito.find((producto) => producto.id ===
idProducto);

  // Actualizar la cantidad del producto en el carrito
  productoEnCarrito.cantidad = cantidad;

  // Actualizar el carrito en el almacenamiento local
  localStorage.setItem('carrito', JSON.stringify(carrito));

  // Actualizar la tabla del carrito
  mostrarCarrito();
}

// Función para mostrar los productos en el carrito
function mostrarCarrito() {
  // Limpiar el contenido anterior del contenedor del carrito
  contenedorCarrito.innerHTML = '';

  // Mostrar un mensaje si el carrito está vacío
  if (carrito.length === 0) {
    contenedorCarrito.innerHTML = '<p>El carrito está vacío</p>';
    return;
  }

  // Crear la tabla HTML
  let tablaHTML = `
    <table class="carrito">
      <tr>
        <th>Producto</th>
        <th>Precio</th>
        <th>Cantidad</th>
        <th>Total</th>
      </tr>
  `;

  // Crear las filas de la tabla
  carrito.forEach((producto) => {
    tablaHTML += `
      <tr>
        <td>${producto.nombre} x <input type="number"
value="${producto.cantidad}" min="1" max="100"
onchange="actualizarCantidad(${producto.id}, this.value)" /></td>
        <td>$${producto.precio}</td>
        <td>
          <input type="number" min="1" value="${producto.cantidad}"
data-id="${producto.id}">
        </td>
        <td>$${producto.precio * producto.cantidad}</td>
      </tr>
    `;
  });

  // Cerrar la tabla HTML
  tablaHTML += '</table>';

  // Agregar la tabla al contenedor del carrito
  contenedorCarrito.innerHTML = tablaHTML;
}

// Obtener el carrito del almacenamiento local o crear uno nuevo si no existe
let carrito = JSON.parse(localStorage.getItem('carrito')) || [];

// Mostrar los productos en el carrito al cargar la página
mostrarCarrito();
Este código incluye la función actualizarCantidad() que se llama
cuando se cambia la cantidad de un producto en la tabla. Además, la
función mostrarCarrito() ahora crea la tabla HTML con la modificación
que hicimos para mostrar la cantidad junto al nombre del producto y
llamar a actualizarCantidad() cuando se cambia la cantidad.





jose fernandez
falto hacer hacer para agregarProducto
actualizarCantidad
vaciarCarrito
mostrarCarrito

2 / 2

¡Claro! Aquí está el código completo del archivo carrito.js que
incluye todas las funciones para agregar productos, actualizar la
cantidad, vaciar el carrito y mostrar los productos en la tabla:

javascript
Copy code
// Obtener el contenedor del carrito
const contenedorCarrito = document.querySelector('#carrito-contenedor');

// Función para agregar un producto al carrito
function agregarProducto(idProducto, nombreProducto, precioProducto) {
  // Buscar el producto en el carrito por su ID
  const productoEnCarrito = carrito.find((producto) => producto.id ===
idProducto);

  // Si el producto ya está en el carrito, aumentar su cantidad
  if (productoEnCarrito) {
    productoEnCarrito.cantidad++;
  } else {
    // Si el producto no está en el carrito, agregarlo con cantidad 1
    carrito.push({
      id: idProducto,
      nombre: nombreProducto,
      precio: precioProducto,
      cantidad: 1,
    });
  }

  // Actualizar el carrito en el almacenamiento local
  localStorage.setItem('carrito', JSON.stringify(carrito));

  // Mostrar los productos en el carrito
  mostrarCarrito();
}

// Función para actualizar la cantidad de un producto en el carrito
function actualizarCantidad(idProducto, cantidad) {
  // Buscar el producto en el carrito por su ID
  const productoEnCarrito = carrito.find((producto) => producto.id ===
idProducto);

  // Actualizar la cantidad del producto en el carrito
  productoEnCarrito.cantidad = cantidad;

  // Actualizar el carrito en el almacenamiento local
  localStorage.setItem('carrito', JSON.stringify(carrito));

  // Mostrar los productos en el carrito
  mostrarCarrito();
}

// Función para vaciar el carrito
function vaciarCarrito() {
  // Vaciar el arreglo del carrito
  carrito = [];

  // Actualizar el carrito en el almacenamiento local
  localStorage.removeItem('carrito');

  // Mostrar los productos en el carrito
  mostrarCarrito();
}

// Función para mostrar los productos en el carrito
function mostrarCarrito() {
  // Limpiar el contenido anterior del contenedor del carrito
  contenedorCarrito.innerHTML = '';

  // Mostrar un mensaje si el carrito está vacío
  if (carrito.length === 0) {
    contenedorCarrito.innerHTML = '<p>El carrito está vacío</p>';
    return;
  }

  // Crear la tabla HTML
  let tablaHTML = `
    <table class="carrito">
      <tr>
        <th>Producto</th>
        <th>Precio</th>
        <th>Cantidad</th>
        <th>Total</th>
      </tr>
  `;

  // Crear las filas de la tabla
  carrito.forEach((producto) => {
    tablaHTML += `
      <tr>
        <td>${producto.nombre} x <input type="number"
value="${producto.cantidad}" min="1" max="100"
onchange="actualizarCantidad(${producto.id}, this.value)" /> =
$${producto.precio * producto.cantidad}</td>
        <td>$${producto.precio}</td>
        <td>
          <input type="number" min="1" value="${producto.cantidad}"
data-id="${producto.id}">
        </td>
        <td>$${producto.precio * producto.cantidad}</td>
      </tr>
    `;
  });

  // Cerrar la tabla HTML
  tablaHTML += '</




jose fernandez
hacer con fetch al agregarProducto
actualizarCantidad
vaciarCarrito
mostrarCarrito
¡Claro! Aquí está el código completo del archivo carrito.js que
incluye todas las funciones para agregar productos, actualizar la
cantidad, vaciar el carrito y mostrar los productos en la tabla
utilizando fetch:

javascript
Copy code
// Obtener el contenedor del carrito
const contenedorCarrito = document.querySelector('#carrito-contenedor');

// Función para agregar un producto al carrito
function agregarProducto(idProducto, nombreProducto, precioProducto) {
  fetch('agregarProducto.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: idProducto,
      nombre: nombreProducto,
      precio: precioProducto,
    }),
  })
    .then((respuesta) => respuesta.json())
    .then((datos) => {
      // Si la operación fue exitosa, actualizar el carrito y mostrar
los productos
      if (datos.ok) {
        carrito = datos.carrito;
        localStorage.setItem('carrito', JSON.stringify(carrito));
        mostrarCarrito();
      } else {
        // Si la operación falló, mostrar un mensaje de error
        alert(datos.mensaje);
      }
    })
    .catch((error) => {
      console.error('Error al agregar el producto al carrito:', error);
    });
}

// Función para actualizar la cantidad de un producto en el carrito
function actualizarCantidad(idProducto, cantidad) {
  fetch('actualizarCantidad.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      id: idProducto,
      cantidad: cantidad,
    }),
  })
    .then((respuesta) => respuesta.json())
    .then((datos) => {
      // Si la operación fue exitosa, actualizar el carrito y mostrar
los productos
      if (datos.ok) {
        carrito = datos.carrito;
        localStorage.setItem('carrito', JSON.stringify(carrito));
        mostrarCarrito();
      } else {
        // Si la operación falló, mostrar un mensaje de error
        alert(datos.mensaje);
      }
    })
    .catch((error) => {
      console.error('Error al actualizar la cantidad del producto en
el carrito:', error);
    });
}

// Función para vaciar el carrito
function vaciarCarrito() {
  fetch('vaciarCarrito.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((respuesta) => respuesta.json())
    .then((datos) => {
      // Si la operación fue exitosa, vaciar el carrito y mostrar los productos
      if (datos.ok) {
        carrito = [];
        localStorage.removeItem('carrito');
        mostrarCarrito();
      } else {
        // Si la operación falló, mostrar un mensaje de error
        alert(datos.mensaje);
      }
    })
    .catch((error) => {
      console.error('Error al vaciar el carrito:', error);
    });
}

// Función para mostrar los productos en el carrito
function mostrarCarrito() {
  fetch('obtenerCarrito.php')
    .then((respuesta) => respuesta.json())
    .then((datos) => {
      // Si la operación fue exitosa, actualizar el carrito y mostrar
los productos
      if (datos.ok) {
        carrito = datos.carrito;
        localStorage.setItem('carrito', JSON.stringify(carrito));

        // Limpiar el contenido anterior del contenedor del carrito
        contenedorCarrito.innerHTML = '';

        // Mostrar un




jose fernandez
hacer solo el function mostrarCarrito() {
Claro, aquí está el código de la función mostrarCarrito() que muestra
los productos del carrito en una tabla HTML:

javascript
Copy code
function mostrarCarrito() {
  fetch('obtenerCarrito.php')
    .then((respuesta) => respuesta.json())
    .then((datos) => {
      // Si la operación fue exitosa, actualizar el carrito y mostrar
los productos
      if (datos.ok) {
        carrito = datos.carrito;
        localStorage.setItem('carrito', JSON.stringify(carrito));

        // Limpiar el contenido anterior del contenedor del carrito
        contenedorCarrito.innerHTML = '';

        // Crear la tabla para mostrar los productos del carrito
        const tabla = document.createElement('table');
        tabla.classList.add('table', 'table-striped');

        // Crear la fila de encabezado de la tabla
        const filaEncabezado = document.createElement('tr');
        const encabezados = ['Producto', 'Precio', 'Cantidad', 'Subtotal', ''];
        for (const encabezado of encabezados) {
          const celdaEncabezado = document.createElement('th');
          celdaEncabezado.textContent = encabezado;
          filaEncabezado.appendChild(celdaEncabezado);
        }
        tabla.appendChild(filaEncabezado);

        // Crear una fila para cada producto en el carrito
        let total = 0;
        for (const producto of carrito) {
          const fila = document.createElement('tr');

          // Celda para el nombre del producto
          const celdaNombre = document.createElement('td');
          celdaNombre.textContent = producto.nombre;
          fila.appendChild(celdaNombre);

          // Celda para el precio del producto
          const celdaPrecio = document.createElement('td');
          celdaPrecio.textContent = `$${producto.precio}`;
          fila.appendChild(celdaPrecio);

          // Celda para la cantidad del producto
          const celdaCantidad = document.createElement('td');
          const inputCantidad = document.createElement('input');
          inputCantidad.type = 'number';
          inputCantidad.value = producto.cantidad;
          inputCantidad.min = '1';
          inputCantidad.max = '100';
          inputCantidad.addEventListener('change', () => {
            actualizarCantidad(producto.id, inputCantidad.value);
          });
          celdaCantidad.appendChild(inputCantidad);
          fila.appendChild(celdaCantidad);

          // Celda para el subtotal del producto
          const celdaSubtotal = document.createElement('td');
          celdaSubtotal.textContent = `$${producto.precio * producto.cantidad}`;
          fila.appendChild(celdaSubtotal);

          // Celda para el botón de eliminar el producto
          const celdaEliminar = document.createElement('td');
          const botonEliminar = document.createElement('button');
          botonEliminar.classList.add('btn', 'btn-danger');
          botonEliminar.textContent = 'Eliminar';
          botonEliminar.addEventListener('click', () => {
            eliminarProducto(producto.id);
          });
          celdaEliminar.appendChild(botonEliminar);
          fila.appendChild(celdaEliminar);

          tabla.appendChild(fila);

          // Actualizar el total del carrito
          total += producto.precio * producto.cantidad;
        }

        // Agregar la tabla al contenedor del carrito
        contenedorCarrito.appendChild(tabla);

        // Mostrar el total del carrito
        const totalCarrito = document.querySelector('#total-carrito');
        totalCarrito.textContent = `$${total}`;
      } else {
        // Si la operación falló, mostrar un mensaje de error
        alert(datos.mensaje);
      }
    })
    .catch((error) => {
      console.error('Error al obtener el carrito:', error);
    });
}




jose fernandez
hacer agregarProducto.php
Claro, aquí está el código para el archivo agregarProducto.php que
agrega un producto al carrito:

php
Copy code
<?php

// Verificar que se haya enviado un ID de producto
if (!isset($_POST['id'])) {
  echo json_encode(array('ok' => false, 'mensaje' => 'No se ha
especificado un ID de producto.'));
  exit();
}

$id = $_POST['id'];

// Obtener el producto de la base de datos
// Aquí deberías reemplazar las credenciales y el nombre de la base de
datos con los tuyos
$dsn = 'mysql:host=localhost;dbname=nombre_de_la_base_de_datos';
$usuario = 'nombre_de_usuario';
$contraseña = 'contraseña';
try {
  $conexion = new PDO($dsn, $usuario, $contraseña);
  $consulta = $conexion->prepare('SELECT * FROM productos WHERE id = :id');
  $consulta->bindParam(':id', $id);
  $consulta->execute();
  $producto = $consulta->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
  echo json_encode(array('ok' => false, 'mensaje' => 'Error al
conectar con la base de datos.'));
  exit();
}

// Verificar que se haya encontrado el producto en la base de datos
if (!$producto) {
  echo json_encode(array('ok' => false, 'mensaje' => 'No se ha
encontrado el producto especificado.'));
  exit();
}

// Verificar que haya suficiente stock para el producto
if ($producto['stock'] <= 0) {
  echo json_encode(array('ok' => false, 'mensaje' => 'No hay
suficiente stock para este producto.'));
  exit();
}

// Obtener el carrito actual del usuario
session_start();
if (!isset($_SESSION['carrito'])) {
  $_SESSION['carrito'] = array();
}
$carrito = $_SESSION['carrito'];

// Verificar si el producto ya está en el carrito
$indice = array_search($id, array_column($carrito, 'id'));
if ($indice !== false) {
  // Si el producto ya está en el carrito, aumentar su cantidad en 1
  $carrito[$indice]['cantidad'] += 1;
} else {
  // Si el producto no está en el carrito, agregarlo con cantidad 1
  $producto_carrito = array(
    'id' => $id,
    'nombre' => $producto['nombre'],
    'precio' => $producto['precio'],
    'cantidad' => 1,
  );
  array_push($carrito, $producto_carrito);
}

// Actualizar el stock del producto en la base de datos
$stock_actualizado = $producto['stock'] - 1;
try {
  $consulta = $conexion->prepare('UPDATE productos SET stock = :stock
WHERE id = :id');
  $consulta->bindParam(':stock', $stock_actualizado);
  $consulta->bindParam(':id', $id);
  $consulta->execute();
} catch (PDOException $e) {
  echo json_encode(array('ok' => false, 'mensaje' => 'Error al
actualizar el stock del producto.'));
  exit();
}

// Guardar el carrito actualizado en la sesión
$_SESSION['carrito'] = $carrito;

// Responder con el carrito actualizado
echo json_encode(array('ok' => true, 'carrito' => $carrito));

?>
Este archivo primero verifica que se haya enviado un ID de producto en
la solicitud POST. Luego obtiene el producto correspondiente de la
base de datos y verifica que haya suficiente





jose fernandez
hacer el carrito.php con agregarProducto
actualizarCantidad
vaciarCarrito
mostrarCarrito
con $_SESSION['carrito']
Por supuesto, aquí te muestro el código actualizado de carrito.php
utilizando $_SESSION['carrito'] para almacenar los productos del
carrito y las funciones de agregarProducto, actualizarCantidad,
vaciarCarrito y mostrarCarrito utilizando fetch para actualizar los
datos en tiempo real:

php
Copy code
<?php
session_start();

if (!isset($_SESSION['carrito'])) {
    $_SESSION['carrito'] = array();
}

function agregarProducto($id, $nombre, $precio, $cantidad) {
    $producto = array(
        'id' => $id,
        'nombre' => $nombre,
        'precio' => $precio,
        'cantidad' => $cantidad
    );
    array_push($_SESSION['carrito'], $producto);
}

function actualizarCantidad($id, $cantidad) {
    foreach ($_SESSION['carrito'] as &$producto) {
        if ($producto['id'] == $id) {
            $producto['cantidad'] = $cantidad;
            break;
        }
    }
}

function vaciarCarrito() {
    $_SESSION['carrito'] = array();
}

function mostrarCarrito() {
    $total = 0;
    echo '<table>';
    echo '<tr><th>Producto</th><th>Cantidad</th><th>Precio</th><th>Total</th></tr>';
    foreach ($_SESSION['carrito'] as $producto) {
        $subtotal = $producto['precio'] * $producto['cantidad'];
        $total += $subtotal;
        echo '<tr>';
        echo '<td>' . $producto['nombre'] . '</td>';
        echo '<td>' . $producto['cantidad'] . ' x <input type="number"
value="' . $producto['cantidad'] . '" min="1" max="100"
onchange="actualizarCantidad(' . $producto['id'] . ', this.value)" />
= $' . $subtotal . '</td>';
        echo '<td>$' . $producto['precio'] . '</td>';
        echo '<td>$' . $subtotal . '</td>';
        echo '</tr>';
    }
    echo '<tr><td colspan="3">Total</td><td>$' . $total . '</td></tr>';
    echo '</table>';
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Carrito de Compras</title>
</head>
<body>
    <h1>Carrito de Compras</h1>
    <?php mostrarCarrito(); ?>
    <br>
    <button onclick="vaciarCarrito()">Vaciar Carrito</button>
</body>
<script src="carrito.js"></script>
</html>




jose fernandez
hacer el carrito.js con fetch y con header('Content-Type: application/json');
echo json_encode($carrito); los agregarProducto
actualizarCantidad
vaciarCarrito
mostrarCarrito
Por supuesto, aquí está el código actualizado de carrito.js que
utiliza fetch y las funciones de agregarProducto, actualizarCantidad,
vaciarCarrito y mostrarCarrito, utilizando la respuesta de JSON del
servidor que utiliza header('Content-Type: application/json'); y echo
json_encode($carrito); para devolver el carrito actualizado.

javascript
Copy code
const urlAgregarProducto = 'agregarProducto.php';
const urlActualizarCantidad = 'actualizarCantidad.php';
const urlVaciarCarrito = 'vaciarCarrito.php';
const urlMostrarCarrito = 'mostrarCarrito.php';

function agregarProducto(id) {
  fetch(urlAgregarProducto, {
      method: 'POST',
      body: new URLSearchParams({
          'id': id
      })
  })
  .then(response => response.json())
  .then(carrito => mostrarCarrito(carrito))
  .catch(error => console.error(error));
}

function actualizarCantidad(id, cantidad) {
  fetch(urlActualizarCantidad, {
      method: 'POST',
      body: new URLSearchParams({
          'id': id,
          'cantidad': cantidad
      })
  })
  .then(response => response.json())
  .then(carrito => mostrarCarrito(carrito))
  .catch(error => console.error(error));
}

function vaciarCarrito() {
  fetch(urlVaciarCarrito, {
      method: 'POST'
  })
  .then(response => response.json())
  .then(carrito => mostrarCarrito(carrito))
  .catch(error => console.error(error));
}

function mostrarCarrito(carrito) {
  const tablaCarrito = document.getElementById('tabla-carrito');
  tablaCarrito.innerHTML = `
    <tr>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
      <th>Subtotal</th>
    </tr>
  `;
  let total = 0;
  carrito.forEach(producto => {
    const subtotal = producto.cantidad * producto.precio;
    total += subtotal;
    const fila = document.createElement('tr');
    fila.innerHTML = `
      <td>${producto.nombre}</td>
      <td><input type="number" value="${producto.cantidad}" min="1"
max="100" onchange="actualizarCantidad(${producto.id}, this.value)"
/></td>
      <td>$${producto.precio}</td>
      <td>$${subtotal}</td>
    `;
    tablaCarrito.appendChild(fila);
  });
  const filaTotal = document.createElement('tr');
  filaTotal.innerHTML = `
    <td colspan="3">Total</td>
    <td>$${total}</td>
  `;
  tablaCarrito.appendChild(filaTotal);
}

fetch(urlMostrarCarrito)
  .then(response => response.json())
  .then(carrito => mostrarCarrito(carrito))
  .catch(error => console.error(error));
Ten en cuenta que el código de PHP de las funciones agregarProducto,
actualizarCantidad, vaciarCarrito y mostrarCarrito deberá ser
actualizado para manejar las solicitudes de fetch y devolver una
respuesta de JSON con el carrito actualizado.





jose fernandez
hacer para el carrito.php segun lo anterior
Aquí está el código actualizado del archivo carrito.php que utiliza
las funciones de agregarProducto, actualizarCantidad, vaciarCarrito y
mostrarCarrito con $_SESSION['carrito'] y devuelve una respuesta JSON
actualizada para cada una de las funciones:

php
Copy code
<?php
session_start();

function agregarProducto($id) {
  // Obtener los detalles del producto desde la base de datos
  // ...

  // Agregar el producto al carrito
  $_SESSION['carrito'][$id] = array(
    'id' => $id,
    'nombre' => $nombre,
    'precio' => $precio,
    'cantidad' => 1
  );

  // Devolver el carrito actualizado como respuesta JSON
  echo json_encode($_SESSION['carrito']);
}

function actualizarCantidad($id, $cantidad) {
  // Actualizar la cantidad del producto en el carrito
  $_SESSION['carrito'][$id]['cantidad'] = $cantidad;

  // Devolver el carrito actualizado como respuesta JSON
  echo json_encode($_SESSION['carrito']);
}

function vaciarCarrito() {
  // Vaciar el carrito
  $_SESSION['carrito'] = array();

  // Devolver un array vacío como respuesta JSON
  echo json_encode(array());
}

function mostrarCarrito() {
  // Devolver el carrito actualizado como respuesta JSON
  echo json_encode($_SESSION['carrito']);
}

if (isset($_POST['accion'])) {
  $accion = $_POST['accion'];
  switch ($accion) {
    case 'agregar':
      if (isset($_POST['id'])) {
        agregarProducto($_POST['id']);
      }
      break;
    case 'actualizar':
      if (isset($_POST['id']) && isset($_POST['cantidad'])) {
        actualizarCantidad($_POST['id'], $_POST['cantidad']);
      }
      break;
    case 'vaciar':
      vaciarCarrito();
      break;
  }
  exit;
}
?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Carrito de Compras</title>
</head>
<body>
  <h1>Carrito de Compras</h1>
  <table id="tabla-carrito"></table>
  <button onclick="vaciarCarrito()">Vaciar carrito</button>
  <script>
    const urlAgregarProducto = 'carrito.php';
    const urlActualizarCantidad = 'carrito.php';
    const urlVaciarCarrito = 'carrito.php';
    const urlMostrarCarrito = 'carrito.php';

    function agregarProducto(id) {
      fetch(urlAgregarProducto, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: new URLSearchParams({
              'accion': 'agregar',
              'id': id
          })
      })
      .then(response => response.json())
      .then(carrito => mostrarCarrito(carrito))
      .catch(error => console.error(error));
    }

    function actualizarCantidad(id, cantidad) {
      fetch(urlActualizarCantidad, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          body: new URLSearchParams({
              'accion': 'actualizar',
              'id': id,
              'cantidad': cantidad
          })
      })
      .then(response => response.json())
      .then(carrito => mostrarCarrito(carrito))
      .catch(error => console.error(error));
    }

    function vaciarCarrito() {
      fetch(urlVaciarCarrito, {
          method: 'POST',
          headers

 

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más