CARRITO LOCALSTORAGE CHAT GPT JS PHP MYSQL

 <!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.js///////////////////////


// 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();


///////////////



// 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 += '</


////////////////////////////////////////////////////



// 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 += '</


///////////////////////////


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);

    });

}


///////////////////este//////////////////////////



function eliminarProducto(id) {


  let carrito = JSON.parse(localStorage.getItem("carrito"));

  for (let i = 0; i < carrito.length; i++) {

    if (carrito[i].id === id) {

      carrito.splice(i, 1);

      break;

    }

  }

  localStorage.setItem("carrito", JSON.stringify(carrito));

  mostrarCarrito();

}







//////////////////////////

function mostrarCarrito() {

  const carrito = JSON.parse(localStorage.getItem('carrito')) || [];


  const tabla = document.getElementById('tabla-carrito');

  tabla.innerHTML = '';


  carrito.forEach(producto => {

    const fila = tabla.insertRow();

    const nombre = fila.insertCell();

    const cantidad = fila.insertCell();

    const precio = fila.insertCell();

    const subtotal = fila.insertCell();

    const eliminar = fila.insertCell();


    nombre.innerText = producto.nombre;

    cantidad.innerHTML = `${producto.cantidad} <input type="number"

value="${producto.cantidad}" min="1" max="100"

onchange="actualizarCantidad(${producto.id}, this.value)" />`;

    precio.innerText = `$${producto.precio}`;

    subtotal.innerText = `$${producto.precio * producto.cantidad}`;

    eliminar.innerHTML = `<button

onclick="eliminarProducto(${producto.id})">Eliminar</button>`;

  });

}


async function eliminarProducto(id) {

  const response = await fetch('eliminarProducto.php', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify({

      id: id

    })

  });


  if (response.ok) {

    const carrito = await response.json();

    localStorage.setItem('carrito', JSON.stringify(carrito));

    mostrarCarrito();

  } else {

    console.error('Error al eliminar producto del carrito');

  }

}





////////////////////////////////


function guardarCarrito() {

  const carrito = JSON.stringify(Object.values(localStorage));


  fetch('guardarCarrito.php', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: carrito

  })

  .then(response => {

    if (!response.ok) {

      throw new Error('Error al guardar el carrito');

    }

    localStorage.clear();

    alert('Carrito guardado exitosamente');

  })

  .catch(error => {

    console.error(error);

    alert('Error al guardar el carrito');

  });

}





////////////////////////////guarda bien


////////////////////////////////////////////////////// este guardar bien

como guardar los datos en mysql del carrito que estan en  el

localStorage carrito

ChatGPT

Para guardar los datos del carrito que están en el localStorage en una

tabla de MySQL, primero debes obtener los datos del localStorage

utilizando la función JSON.parse y luego guardar los datos en la base

de datos utilizando una sentencia INSERT de SQL. Aquí te muestro un

ejemplo:


En tu archivo PHP que maneja el carrito, primero debes obtener los

datos del localStorage y luego guardarlos en la tabla de la base de

datos:

php

Copy code

// Obtener los datos del carrito del localStorage



$carrito = json_decode($_POST['carrito'], true);


// Conectar a la base de datos

$dsn = "mysql:host=localhost;dbname=tu_bd";

$username = "tu_usuario";

$password = "tu_contraseña";


try {

  $dbh = new PDO($dsn, $username, $password);

  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


  // Insertar cada producto del carrito en la tabla de la base de datos

  foreach ($carrito as $producto) {

    $nombre = $producto['nombre'];

    $precio = $producto['precio'];

    $cantidad = $producto['cantidad'];


    $stmt = $dbh->prepare("INSERT INTO carrito (nombre, precio,

cantidad) VALUES (:nombre, :precio, :cantidad)");

    $stmt->bindParam(':nombre', $nombre);

    $stmt->bindParam(':precio', $precio);

    $stmt->bindParam(':cantidad', $cantidad);

    $stmt->execute();

  }


  echo "Carrito guardado en la base de datos.";


} catch (PDOException $e) {

  echo "Error al guardar el carrito en la base de datos: " . $e->getMessage();

}



En tu archivo JavaScript, debes enviar los datos del carrito al

archivo PHP utilizando la función fetch y el método POST:





function guardarCarrito() {


  // Obtener el carrito del localStorage

  const carrito = JSON.parse(localStorage.getItem('carrito'));


  // Enviar los datos del carrito al archivo PHP utilizando fetch

  fetch('guardarCarrito.php', {

    method: 'POST',

    body: JSON.stringify({ carrito }),

    headers: {

      'Content-Type': 'application/json'

    }

  })

  .then(response => response.text())

  .then(data => console.log(data))

  .catch(error => console.error(error));

}

En este ejemplo, se utiliza el método POST para enviar los datos del

carrito al archivo PHP guardarCarrito.php. Los datos se envían como

una cadena JSON utilizando el método JSON.stringify. El encabezado de

la solicitud se establece en 'Content-Type': 'application/json' para

indicar que se está enviando datos en formato JSON.





//////////////////////////de mas


function mostrarCarrito() {

  var carrito = JSON.parse(localStorage.getItem('carrito'));

  var total = 0;


  if (carrito !== null && carrito.length > 0) {

    var tabla = '<table>';

    tabla += '<thead><tr><th>Producto</th><th>Precio</th><th>Cantidad</th><th>Total</th></tr></thead>';

    tabla += '<tbody>';


    for (var i = 0; i < carrito.length; i++) {

      var producto = carrito[i];

      var precioTotal = producto.precio * producto.cantidad;

      total += precioTotal;


      tabla += '<tr>';

      tabla += '<td>' + producto.nombre + '</td>';

      tabla += '<td>' + producto.precio + '</td>';

      tabla += '<td>' + producto.cantidad + '</td>';

      tabla += '<td>' + precioTotal + '</td>';

      tabla += '</tr>';

    }


    tabla += '</tbody>';

    tabla += '<tfoot><tr><td colspan="3">Total:</td><td>' + total +

'</td></tr></tfoot>';

    tabla += '</table>';


    document.getElementById('carrito').innerHTML = tabla;

  } else {

    document.getElementById('carrito').innerHTML = '<p>No hay

productos en el carrito.</p>';

  }

}


Comentarios

Publicar un comentario

Entradas populares de este blog

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

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

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más