-1

De primeras, debo decir que estoy aprendiendo y necesito ayuda para realizar esta tarea que me urge.

Iré por partes:

He realizado un archivo .js en modo(POO), con todas las funciones necesarias para gestionar un carrito de la compra. Ver código completo del archivo (gestor_cistella_poo.js):

// Programació Orientada a Objetos (POO) Gestor de la Cistella

// Declarar la class Cistell y crear un constructor
class Cistell {
  constructor() {
    let cistell = localStorage.getItem("Cistella");
    if (cistell == null) {
      this.cistell = [];
    } else {
      this.cistell = JSON.parse(cistell);
    }
  }
  // Función para guardar la CLAVE(Cistella) y los VALORES(variable: Cistell) de Local Storage
  guardar() {
    localStorage.setItem("Cistella", JSON.stringify(this.cistell));
  }
  // Función para añadir articulos a Cistella
  afegir(sofa) {
    let trovarProducte = this.cistell.find((pr) => pr.id == sofa.id);
    if (trovarProducte != undefined) {
      trovarProducte.quantitat++;
    } else {
      sofa.quantitat = 1;
      this.cistell.push(sofa);
    }
    this.guardar();
  }
  // Función para eliminar articulos de Cistella
  eliminar(sofa) {
    this.cistell = this.cistell.filter((pr) => pr.id != sofa.id);
    this.guardar();
  }
  // Función para cambiar la cantidad de articulos de Cistella
  canviarQuantitat(sofa, quantitat) {
    let trovarProducte = this.cistell.find((pr) => pr.id == sofa.id);
    if (trovarProducte != undefined) {
      trovarProducte.quantitat += quantitat;
      if (trovarProducte.quantitat <= 0) {
        this.eliminar(trovarProducte);
      } else {
        this.guardar();
      }
    }
  }
  // Función para calcular la cantidad de articles en Cistella
  obtenirNumeroDeSofas() {
    let numero = 0;
    for (let sofa of this.cistell) {
      numero += sofa.quantitat;
    }
    return numero;
  }
  // Función para calcular el precio total de la Cistella
  obtenirPreuTotal() {
    let importTotal = 0;
    for (let sofa of this.cistell) {
      importTotal += sofa.quantitat * sofa.preu;
    }
    return importTotal;
  }
}

Ahora estoy terminando el script de la página de producto, archivo(producte.js), pero voy a necesitar también utilizar las funciones en la siguiente página del carrito. Ver parte final del código de producte.js:

// Botón añadir al cesto en escucha, esperando un click
const botoCistella = document.getElementById("addToCart");
botoCistella.addEventListener("click", (e) => {

  // Obtén el color seleccionado
  let colorSeleccionat = document.getElementById("colors");
  let value = colorSeleccionat.options[colorSeleccionat.selectedIndex].value;
  // Mostrar el color seleccionado
  colorSeleccionat = value;
  console.log(colorSeleccionat);
  // Mostrar POPUP de ADVERTÈNCIA COLOR
  if (value == false) {
    alert("Vous devez choisir un couleur");
    colorSeleccionat = false;
    return;
  }

  // Obtener la cantidad seleccionada.
  let quantitat = document.getElementById("quantity");
  if (quantitat.value != 0 && quantitat.value > 0 && quantitat.value <= 100) {
    // Mostrar la cantidad seleccionada
    quantitat = quantitat.value;
    console.log(quantitat);
  } else {
    // Mostrar POPUP de ADVERTENCIA CANTIDAD
    if (quantitat.value == 0) {
      alert("Vous devez choisir un nombre");
      quantitat = false;
      return;
    }
  }
  
  // ============ OBJECTO-CESTA = Local Storage ============
  // Declarar variable para guardar la CLAVE "Cistella" y los VALORES(Cistell) de Local Storage
  localStorage.setItem("Cistella", JSON.stringify(cistell));
  let opcionsCistell = {
    id,
    colorSeleccionat,
    quantitat,
  };
  // Si (ya hay productos dentro de local storage)
  if (sofa) {
    sofa.push(opcionsCistell);
    function guardar() {
      return new guardar();
    }
    // Mostrar los articulos añadidos a LocalStorage a partir del segundo articulo
    console.log(opcionsCistell);
  }
  // Si No(hay productos en local storage)
  else {
    sofa = [];
    sofa.push(opcionsCistell);
    function guardar() {
      return new guardar();
    }
    // Mostrar el primer producto que se añade a LocalStorage
    console.log(opcionsCistell);
  }

  // Función ventana de confirmación popup, para validar e ir a la pagina de carro, o continuar comprando en la página principal
  function finestraConfirmació() {
    if (
      window.confirm(
        "Votre article a bien été ajouté au Panier !.                                                                    Pour aller directement au panier appuyez sur:      Accepter.                                          Ou si vous souhaitez continuer vos achats, appuyez sur:     Annuler"
      )
    ) {
      window.location.href = "./cart.html";
    } else {
      window.location.href = "./index.html";
    }
  }
});


En este punto, cuando el usuario desea añadir un producto al cesto de la compra, debe escoger un color y la cantidad deseados, para lo cual se lo advierto mediante dos POPUPS respectivamente al pulsar el botón de Añadir al Carrito. Es aquí dónde no me aclaro, ... Una vez seleccionados estos datos quiero utilizar la función guardar() del archivo (gestor_cistella_poo.js) para que inicie LocalStorage y vaya añadiendo los productos con las características necesarias (id del producto, color seleccionado, cantidad, precio, ...)

También debo solucionar el tercer POPUP, la ventana de confirmación, la cual antes me funcionaba correctamente y tras unos cambios, ha dejado de funcionar.

Por favor, díganme que es lo que estoy realizando mal y como puedo solucionarlo para poder pasar al desarrollo de la siguiente página "carro de la compra".

Sobre todo, me gustaría aprender a utilizar las funciones del archivo (gestor_cistella_poo.js) en todos los archivos .js

Si necesitáis ver más código o todo el proyecto, este es el enlace de mi repositorio en GitHub: https://github.com/GreenBeetleStore/Kanap.git

Os agradezco vuestro interés de antemano. Un saludo,

Xavier Torta

2

1 respuesta 1

0

Después de repasar y corregir el código he podido pasar a la página del carro de la compra con todos los datos necesarios, podéis ver el código corregido aquí:

// Funció per afegir un receptor d'esdeveniments al botó d'afegir a la cistella.
function afegirACistella() {

  // Identificar el botó d'afegir a la cistella.
  const botoCistella = document.getElementById("addToCart");

  // Afegir un esdeveniment al botó d'afegir a la cistella.
  botoCistella.addEventListener("click", function () {

    // Obtenir el color seleccionat
    let colorSeleccionat = document.getElementById("colors").value;

    // Mostra finestra ADVERTÈNCIA COLOR NO SELECCIONAT.
    if (!colorSeleccionat) {
      alert("Vous devez choisir un couleur");
      return;
    }

    // Obtenir la quantitat seleccionada. Html: 77.
    let quantitat = parseInt(document.getElementById("quantity").value);

    // Mostra finestra ADVERTÈNCIA QUANTITAT.
    if (!(quantitat > 0 && quantitat <= 100)) {
      alert("Vous devez choisir une quantité comprise entre 1 et 100");
      return;
    }

    // Declarar variable del objecte a guardar al LocalStorage.
    let articleSofa = { id, colorSeleccionat, quantitat };

    // Cridar POO a la funció afegir producte.
    cistell.afegir(articleSofa);

    // Cridar a la funció de la finestra de confirmació.
    finestraConfirmació();
  });
}

// Funció finestra de confirmació popup.
function finestraConfirmació() {
  if (
    window.confirm(
      "Votre article a bien été ajouté au Panier !.                                                                    Pour aller directement au panier appuyez sur:      Accepter.                                          Ou si vous souhaitez continuer vos achats, appuyez sur:     Annuler"
    )
  ) {
    // Opció per anar a la pàgina de la cistella.
    window.location.href = "./cart.html";
    // Opció per tornar a la pàgina index.
  } else {
    window.location.href = "./index.html";
  }
}

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.