Croma Smart Filter 🛒

A lightweight, privacy-focused bookmarklet that improves the shopping experience on Croma.com by automatically hiding out-of-stock items and lazy-loading new products.

😟 The Problem

Unlike most e-commerce platforms that hide out-of-stock items or push them to the bottom, Croma mixes unavailable inventory directly into the main search results.

This forces users to scroll past dozens of products they cannot buy especially when sorted by discount, manually clicking "Load More," just to find a few available items. It creates a cluttered and frustrating browsing experience.

🚀 The Solution

Croma Smart Filter runs entirely in your browser to fix this UX flaw. It:

1. Hides Out-of-Stock Items: Instantly removes unavailable products from the grid based on the "Currently Unavailable" badge.
2. Auto-Loads More: Automatically clicks the "Load More" button so you can scroll continuously without interruption.
3. Smart Sort Support: Intelligently pauses auto-clicking when you use the "Sort By" menu (preventing the menu from closing accidentally).
4. Privacy First: No server, no data collection, no tracking. It works locally in your browser.

📦 Installation

1. Create a new bookmark in your browser (Chrome, Firefox, Edge, Safari).
2. Name it "Croma Filter".
3. Copy the code below and paste it into the URL field:

javascript:(function(){const n="cromaAutoFilterInterval",t="croma-perm-badge";if(document.getElementById(t))return void alert("Control panel is already active!");let e=Date.now();document.addEventListener("mousemove",()=>{e=Date.now()});const o=document.createElement("div");o.id=t,o.style.cssText="position:fixed;bottom:80px;right:10px;background:#00bfa5;color:#fff;padding:8px 12px;border-radius:30px;font-family:sans-serif;font-weight:bold;z-index:99999;box-shadow:0 4px 10px rgba(0,0,0,0.3);font-size:12px;display:flex;align-items:center;gap:10px;transition:all 0.3s;";const i=document.createElement("span");i.innerText="Filter: ON",i.style.cursor="pointer",o.appendChild(i);const c=document.createElement("span");c.innerHTML="&times;",c.style.cssText="background:rgba(0,0,0,0.2);border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;line-height:1;",o.appendChild(c),document.body.appendChild(o);const r=()=>{console.log("Script Removed."),clearInterval(window[n]),window[n]=null,o.remove(),document.removeEventListener("mousemove",()=>{})},l=()=>{clearInterval(window[n]),window[n]=null,o.style.backgroundColor="#ef5350",i.innerText="Filter: OFF (Tap to Start)"},d=()=>{o.style.backgroundColor="#00bfa5",i.innerText="Filter: ON",window[n]=setInterval(()=>{const n=document.querySelector("#product-list-back");n&&Array.from(n.children).forEach(n=>{n.querySelector(".not-available-text")&&n.remove()});if(Date.now()-e<1e3)return;const t=document.querySelector("div.view-more-div > button");t&&"none"!==t.style.display&&(t.click(),t.innerText="Auto-loading...")},1500)};i.onclick=()=>{window[n]?l():d()},c.onclick=r,d()})();

🎮 How to Use

1. Navigate to a Product List: * Search for a product (e.g., "Gaming Laptops").
   • OR drill down to a specific category (e.g., Televisions > LED TVs).
   • (Tip: The tool is most useful when you Sort by Discount, as Croma tends to bury out-of-stock items there.)
2. Click the Bookmark:
   • Tap your saved "Croma Filter" bookmark.
3. Watch it Work:
   • A Green Badge will appear in the bottom-right.
   • Unavailable items will vanish instantly.
   • The page will automatically scroll and load more items for you.

Green (ON): The script is filtering items and auto-loading.

Red (OFF): Click the text to pause the script.

X Button: Click the small circle to remove the script entirely.

🛠 Contributing This project is open-source! If Croma updates their website and the CSS classes change, feel free to submit a Pull Request.

📄 License This project is licensed under the MIT License.