0

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!

1
  • Antes de llamar a JSON.parse() deberías comprobar que lo que le vas a pasar exista
    – Benito-B
    Commented el 27 mar. a las 9:17

1 respuesta 1

0

localStorage funciona con la url y cuando cambias de url estas utilizando localStorage para esa url en especifico.

puedes cambiar el puerto en el que Xampp se esta ejecutando y usar el mismo que el liveServer.

toma en cuenta que no se puede usar el mismo puerto en dos servidores.

1
  • Acabo de cambiarle el puerto, y ya me funciona!! Increible. No sé que tendrá que ver. Muchas gracias!! Commented el 27 mar. a las 16:23

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.