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.
productos-cliente
?