1

Estoy desarrollando una aplicación web de una tienda on-line, lo que me hace falta es hacer que el botón 'heart' funcione, ya que cuando le de click a un artículo, éste me pueda añadir a favoritos.

Aqui la imagen para que puedan entenderme

introducir la descripción de la imagen aquí

He buscado en Google pero lo único que encuentro es código para añadir a los marcadores de los navegadores y eso no es mi requerimiento.

Pienso usar cookies para guardar la lista de favoritos, y que cuando el cliente regrese los artículos que haya pinchado como favoritos deben de estar en una parte de la aplicación de favoritos.

¿Alguien podria decirme cómo hacerlo?

5
  • 4
    Si voy navegando por Internet y encuentro un botón que pone "Agregar a favoritos", me imagino que el caso de uso es añadirlo a los marcadores del navegador. Si eso no es el que quieres, deberías describir mejor cuál es el requerimiento: ¿qué es un favorito en tu aplicación? ¿cómo planeas guardarlos (base de datos, cookie, etc.)? ¿qué has intentado hasta ahora: has hecho algo en el lado del servidor o del cliente, tienes una estructura definida para guardar los datos, cómo comunicas el cliente con el servidor (si necesario), ...?
    – Alvaro Montoro
    Commented el 9 oct. 2017 a las 17:01
  • No he hecho nada de lo que me acabas de decir, pienso usar cookies, cuando el cliente regrese los artículos que haya pinchado como favoritos deben de estar en una parte de la aplicación de favoritos.
    – Hermann BD
    Commented el 9 oct. 2017 a las 17:10
  • Estoy confundido, solo me dijeron que ese icono heart debe de funcionar, no se si haz comprado en linea, que cuando das clic en el botón heart te las guarda y que cuando vuelves a iniciar sesión ese articulo está ahí guardado en favoritos.
    – Hermann BD
    Commented el 9 oct. 2017 a las 17:16
  • 1
    @ArmandoBolaños solo es una alternativa, pero, ¿has considerado guardar esos "favoritos" en una tabla relacional productos-cliente? Commented el 9 oct. 2017 a las 18:09
  • @MauricioAriasOlave sí, he tenido la idea que mencionas, pero te digo no sé como hacer que funcione con la BD.
    – Hermann BD
    Commented el 10 oct. 2017 a las 16:42

1 respuesta 1

2

En JavaScript puedes usar cookies o localStorage para guardar información en la parte del cliente de una sesión a otra. Entonces lo que tu botón de "Agregar a favoritos" podría hacer es algo como esto:

  • Leer el ID, nombre y URL del producto
  • Guardar esos datos en la cookie/localStorage

Técnicamente te bastaría con el ID, pero para no tener que andar haciendo llamadas AJAX, voy a hacer con nombre y URL para simplificarlo, lo cual va a ser un método muy básico, pero luego puedes ampliarlo a todo lo que quieras.

Entonces tendrías algo como esto (no lo pongo como ejecutable porque por motivos de seguridad no se puede usar localStorage en los snippets de SO):

<h1 id="producto-nombre">Nombre del producto</h1>
<input type="hidden" id="producto-id" value="12345" />

<a href="#" id="agregar-favoritos">Agregar a favoritos</a>

<script>

// cuando se pulsa en "agregar a favoritos"
document.getElementById("agregar-favoritos").addEventListener("click", function(e) {

  // hacemos que no se ejecute el enlace
  e.preventDefault();

  // leemos los datos clave del producto y los guardamos en un objeto
  var datos = {
    id: document.getElementById("producto-id").value,
    nombre: document.getElementById("producto-nombre").textContent,
    url: document.location.href
  };

  // leemos los favoritos del localStorage
  var favoritos = localStorage.getItem("favoritos") || "[]";
  favoritos = JSON.parse(favoritos);

  // buscamos el producto en la lista de favoritos
  var posLista = favoritos.findIndex(function(e) { return e.id == datos.id; });
  if (posLista > -1) {
    // si está, lo quitamos
    favoritos.splice(posLista, 1);
  } else {
    // si no está, lo añadimos
    favoritos.push(datos);
  }

  // guardamos la lista de favoritos 
  localStorage.setItem("favoritos", JSON.stringify(favoritos));

});
</script>

Para luego en la página de favoritos podrías hacer un listado simple:

// leemos los favoritos del localStorage
var favoritos = localStorage.getItem("favoritos") || "[]";
favoritos = JSON.parse(favoritos);

// creamos una lista
var ul = document.createElement("ul");
// para cada producto en favoritos
for (var x = 0; x < favoritos.length; x++) {
  // creamos un elemento de lista
  var li = document.createElement("li");
  // con un enlace al producto
  var a = document.createElement("a");
  a.href = favoritos[x].url;
  a.textContent = favoritos[x].nombre;
  li.appendChild(a);
  ul.appendChild(li);
}
// agregamos el producto donde correspona
document.querySelector("#favoritos").appendChild(ul);

Esto es una versión muy básica. A partir de ahí podrías complicarlo todo lo que quieras para darle una mejor experiencia al usuario:

  • Lee los favoritos al principio para saber si tienes que poner "Agregar a Favoritos" o "Eliminar de Favoritos" y darle un formato u otro.
  • Guarda sólo el ID y realiza llamadas AJAX a un servicio que te devuelva la información que quieres mostrar
  • Usa un sistema de base de datos para guardar los favoritos del usuario para preservarlos incluso si borra las cookies (y para poder hacer algo de inteligencia de negocio y estadísticas).
  • Etc.

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.