Llevo varios días con este problema, y no me queda mucho tiempo. Estoy haciendo una página web de venta de ropa (es un trabajo de universidad). Y cuando compras algo, se guarda en el localStorage con el JSON y aparece en un archivo diferente llamado carro. Cuando lo hago con el live de code con html no tengo ningún problema, y me sale todo. Pero cuando lo hago usando Xampp, ya que lo necesito para el php, la base de datos con mysql y para el servidor me da problemas el localStorage, y no me aparece nada.
estas son las lineas donde lo uso en el:
pablom03@pablom03-IdeaPad-3-15ITL6:~/Escritorio/Trabajo_PaginaWeb$ sudo cat java.js | grep -b "localStorage"
1506: var carrito = JSON.parse(localStorage.getItem('carrito')) || [];
1675: localStorage.setItem('carrito', JSON.stringify(carrito));
1853: const carrito = JSON.parse(localStorage.getItem('carrito')) || [];
4222: localStorage.setItem('carrito', JSON.stringify(carrito)); // Actualiza el carrito en localStorage
4690: const carrito = JSON.parse(localStorage.getItem('carrito')) || [];
5476: localStorage.removeItem('carrito');
pablom03@pablom03-IdeaPad-3-15ITL6:~/Escritorio/Trabajo_PaginaWeb$
este es el carro.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carro</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://kit.fontawesome.com/00154b0b1a.js" crossorigin="anonymous"></script>
</head>
<body id=compra>
<div id="carro">
<section id="shopping">
</section>
<section id="total">
</section>
</div>
</body>
<script src="java.js" defer></script>
</html>
Tiene que ser algo de xampp, pero no se el que y me estoy volviendo loco.
Por si acaso paso el js entero por si sirve:
document.addEventListener('DOMContentLoaded', function () {
handleNavbarToggle();
handleBuyButtons();
displayCartItems();
displayTotalPrice();
});
function handleNavbarToggle() {
const navbarToggle = document.getElementById('js-navbar-toggle');
const menu = document.getElementById('js-menu');
if (navbarToggle && menu) {
navbarToggle.addEventListener('click', function () {
menu.classList.toggle('active');
const imgHeader = document.getElementById('ditchil-header');
if (menu.classList.contains('active')) {
imgHeader.style.backgroundImage = 'url("")';
} else {
imgHeader.style.backgroundImage = 'url("./imagenes/imd.png")';
}
});
}
}
function handleBuyButtons() {
const botonesDeCompra = document.querySelectorAll('.buy-button');
botonesDeCompra.forEach(function (botonDeCompra) {
botonDeCompra.addEventListener('click', function () {
var productContainer = botonDeCompra.parentNode;
var productName = productContainer.querySelector('.product-name').textContent;
var productPrice = productContainer.querySelector('.product-price').textContent;
var productImage = productContainer.querySelector('img').src;
Swal.fire({
title: productName,
text: productPrice,
icon: 'success',
confirmButtonText: 'OK',
});
var carrito = JSON.parse(localStorage.getItem('carrito')) || [];
carrito.push({ name: productName, price: productPrice, imagen: productImage });
localStorage.setItem('carrito', JSON.stringify(carrito));
});
});
}
function displayCartItems() {
const carro = document.getElementById('shopping');
const carrito = JSON.parse(localStorage.getItem('carrito')) || [];
carro.innerHTML = ''; // Limpia el contenedor antes de agregar elementos
const groupedProducts = carrito.reduce((acc, producto) => {
const key = `${producto.name}:${producto.price}`;
acc[key] = (acc[key] || 0) + 1;
return acc;
}, {});
Object.keys(groupedProducts).forEach(key => {
const [name, price] = key.split(':');
const count = groupedProducts[key];
const priceNumber = parseFloat(price);
const productDiv = document.createElement('div');
productDiv.className='product';
const namePriceDiv = document.createElement('div');
namePriceDiv.className = 'name-price';
const nameP = document.createElement('p');
const priceP = document.createElement('p');
const totalP = document.createElement('p');
nameP.textContent = name;
if (count == 1) {
priceP.textContent = price;
} else {
priceP.textContent = `${price} x ${count}`;
totalP.textContent = `= ${priceNumber * count}€`;
}
namePriceDiv.appendChild(nameP);
namePriceDiv.appendChild(priceP);
if (count > 1) {
namePriceDiv.appendChild(totalP);
}
const imageDiv = document.createElement('div');
const productImage = document.createElement('img');
productImage.className='product-image';
const producto = carrito.find(producto => producto.name === name && producto.price === price);
productImage.src = producto.imagen;
productImage.alt = name;
console.log(producto.imagen);
imageDiv.appendChild(productImage);
productDiv.appendChild(namePriceDiv);
productDiv.appendChild(imageDiv);
const deleteButton = document.createElement('button');
deleteButton.className = 'delete-button';
const litterBinIcon = document.createElement('i');
litterBinIcon.classList.add('fas', 'fa-trash-alt');
deleteButton.appendChild(litterBinIcon);
deleteButton.onclick = function () {
const index = carrito.findIndex(producto => producto.name === name && producto.price === price);
if (index !== -1) {
carrito.splice(index, 1); // Elimina el producto del carrito
localStorage.setItem('carrito', JSON.stringify(carrito)); // Actualiza el carrito en localStorage
displayCartItems(); // Refresca los elementos del carrito mostrados
displayTotalPrice(); // Refresca el precio total
}
};
productDiv.appendChild(deleteButton);
carro.appendChild(productDiv);
});
}
function displayTotalPrice() {
const carro = document.getElementById('total');
const carrito = JSON.parse(localStorage.getItem('carrito')) || [];
// Limpia el contenido del carro antes de agregar elementos
carro.innerHTML = '';
let total = 0;
carrito.forEach(function (producto) {
const priceNumber = parseFloat(producto.price.slice(0, -1));
total += priceNumber;
});
const lineaTotal = document.createElement('p');
lineaTotal.textContent = "Total: " + total.toFixed(2) + "€";
lineaTotal.classList.add('total-line');
const checkoutButton = document.createElement('button');
checkoutButton.className = 'checkout-button';
checkoutButton.textContent = 'Finalizar compra';
checkoutButton.addEventListener('click', () => {
console.log('Compra finalizada');
window.history.back();
localStorage.removeItem('carrito');
});
if(total>0){
carro.appendChild(lineaTotal);
carro.appendChild(checkoutButton);
}
else{
const noItems = document.createElement('p');
noItems.textContent = "Tu carrito está triste y vacío :c";
noItems.classList.add('no-items');
carro.appendChild(noItems);
carro.style.left = '30%';
}
}
// Definir la función getRandomInt
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var num_img = 12;
c = 1;
Array.from(document.getElementsByClassName('products')).forEach(productsContainer => {
const loadProducts = () => {
for (var i = 1; i < num_img + 1; i++) {
const product = document.createElement('div')
product.className = 'product'
const img = document.createElement('img')
img.src = `./imagenes/imagen${c}${1}.jpg`
img.alt = `Product $s{i}`; // Usar backticks para permitir la interpolación de cadenas
product.appendChild(img)
const name = document.createElement('p')
name.textContent = `Product${i}`
name.className = 'product-name';
product.appendChild(name)
const price = document.createElement('p')
price.textContent = `${getRandomInt(10, 100)}€`
price.className = 'product-price'
product.appendChild(price)
const button = document.createElement('button')
button.textContent = 'comprar'
button.className = 'buy-button'
product.appendChild(button)
productsContainer.appendChild(product)
}
}
loadProducts()
c++;
});
document.getElementById('send-btn').addEventListener('click', function () {
const input = document.getElementById('chat-input');
const message = input.value.trim();
if (message) {
addMessage('user', message);
setTimeout(() => {
addMessage('bot', `Respondiendo a: "${message}"`);
}, 1000);
}
input.value = ''; // Limpiar el input después de enviar
});
function addMessage(sender, message) {
const chatBox = document.getElementById('chat-box');
const msgDiv = document.createElement('div');
msgDiv.classList.add('chat-message', `${sender}-message`);
msgDiv.textContent = message;
chatBox.appendChild(msgDiv);
// Scroll to the bottom of the chat box
chatBox.scrollTop = chatBox.scrollHeight;
}
document.getElementById('loginForm').addEventListener('submit', function (event) {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
if (email && password) {
if (email.includes('@')) {
// No need to prevent the default action
} else {
event.preventDefault();
alert('Please enter a valid email address.');
}
} else {
event.preventDefault();
alert('Please fill in all fields.');
}
});
Al abrir la consola me aparecen errores de NULL, y de que no hay nada para mostrar, array vacío y etc. Con lo que tiene toda la pinta de que efectivamente no va el localStorage, ya que lo muestro todo con él en el carro.php. Debe de ser una falta de permisos de XAMPP o y yo que se, a ver si dais con la tecla.
Gracias!
JSON.parse()
deberías comprobar que lo que le vas a pasar exista