Project 80, E-commerce and business
Wishlist and Compare
Two features that turn browsing into buying. Heart what you like for later, and put up to three products side by side to spot the differences.
- Main API
- localStorage
- Sharing
- URL parameters
- Dependencies
- None
- Your browser
- Checking
Save and compare
Heart a few products, tick Compare on two or three, then open the comparison. Copy the share link and open it in another tab.
How it works
- A set of saved idsThe wishlist is a Set of product ids saved to localStorage, so hearts stay filled after a reload or a new visit.
- Share as a linkThe share link adds ?w=0,2,5 to the page address. Opening it merges those products into the other person's wishlist.
- Compare what differsFor up to three products, each row checks if the values differ and highlights the row, and marks the best value, like the lowest price.
const wish = new Set(JSON.parse(localStorage.getItem("wish") || "[]"));
heart.onclick = () => {
wish.has(id) ? wish.delete(id) : wish.add(id);
localStorage.setItem("wish", JSON.stringify([...wish]));
};
shareInput.value = location.origin + location.pathname + "?w=" + [...wish].join(",");
const values = picked.map((p) => p.price);
const differs = new Set(values).size > 1;
const best = Math.min(...values);